标签: react-table

在react-table上，当表排序并且数据更改时，表可以重置（转到默认排序状态）或重新排序（通过将编辑的行放在正确的位置并保留列排序选择）

这是由autoResetSortBy: Boolean

有没有办法在数据编辑后简单地将表保持在无序状态？如果用户正在编辑一行中的多个值，则当他们编辑表格排序依据的单元格时，该行可能会跳转。我希望表至少在编辑时将行保留在适当的位置

https://codesandbox.io/s/practical-napier-ksgfx

1. 按名称列排序
2. 编辑其中一行中的名称单元格，然后单击同一行中的另一个单元格
3. 该行将跳转到另一个位置，因为表已重新排序

我正在渲染一个反应表，需要知道在父组件中选择了哪些行。

这是我的表格组件：

const TableComponent = (props) => {
  const { columns, data } = props;
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state: { selectedRowIds },
  } = useTable(
    {
      columns,
      data,
    },
    useRowSelect
  );

  return (
    <table {...getTableProps()}>
        <thead>
            {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
                ))}
            </tr>
            ))}
        </thead>
        <tbody {...getTableBodyProps()}>
            {rows.slice(0, 10).map((row, i) => {
            prepareRow(row);
            return (
                <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                    return (
                    <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                    );
                })}
                </tr>
            );
            })}
        </tbody>
    </table> …

是否可以禁用一列的全局过滤器，但为禁用的列添加另一个过滤器react-table？就像是：

我正在使用反应表包。我制作了一个带有行选择的简单表格。问题是：行选择结果是一个带有索引的对象：

{
 0: true,
 1: true,
 ...
}

但我想成为我的数据的主键，如下所示：

{
  EXoxMjyd4leYABdpuy8m: true,
  2gXlClA38AU8sSM5jnZ7: true,
  ...
}

代码示例

在文档中，我找不到可以设置选择键的配置。问题是，我怎样才能实现第二个例子呢？

我有一个使用react-table的表，但是对于其中一列，我想显示两个数据-名称和描述。

getInitialState(){
    return {
      data: [{
        id: 1,
        keyword: 'Example Keyword',
        product: [
          name: 'Red Shoe',
          description: 'This is a red shoe.'
        ]
      },{
        id: 2,
        keyword: 'Second Example Keyword',
        product: [
          name: 'blue shirt',
          description: 'This is a blue shirt.'
        ]
      }]
    }
},
render(){
  const { data } = this.state;

  return (
    <div className="app-body">
      <ReactTable
        data={data}
        columns={[{
          columns: [{
              Header: 'Id',
              accessor: id,
              show: false
            }, {
              Header: 'Keyword',
              accessor: 'keyword'
            }, {
              Header: 'Product',
              accessor: 'product'  // …

我有一个反应表，我想在其中添加一些自定义过滤

我想要实现的是一个下拉选择器，它动态填充了所有可用的选择

我快到了，有一个可行的解决方案，但我真正想做的是让我的 customFilter 可用于三个字段中的每一个，名字、姓氏和年龄 - 目前它可以工作，但对每个值都进行了硬编码

所以这一行

.map(item => item.lastName)

需要像

.map(item => item.{accessor})

这不起作用，但想法是我可以获得每个字段的访问器值，然后这将是真正动态且可重用的

const customFilter = ({ filter, onChange }) => {
    return (
      <select
        onChange={event => onChange(event.target.value)}
        style={{ width: "100%" }}
        value={filter ? filter.value : "all"}
      > 
        <option value="all">Show All</option>
        {testData
          .map(item => item.lastName)

          .filter((item, i, s) => s.lastIndexOf(item) == i)
          .map(function (value) {
            log.debug('renderItem: ', value);
            return (
              <option key={value} value={value}>
                {value}
              </option>
            );
          })}
      </select>
    );
  };

  const testData = [
    { firstName: 'Aang', …

有谁知道用 React-Table 选择多行的方法。假设我们是否希望单击一行中的一个单元格，然后按 SHIFT 键，然后选择另一行，并可能使用 CSS 对所选行进行颜色编码？这甚至可能吗？

我是表的新手。目前，我有一个5行的表格可在react-table上呈现，并且我不需要分页功能。我知道可以关闭分页，可以通过“ pagination = {false}”来完成。但是分页控件仍然显示，有没有办法隐藏它？

我在反应中使用react table。我从这里学习 https://github.com/tannerlinsley/react-table/tree/v6#codesandbox-examples 和从这里 https://www.npmjs.com/package/react-table

我想显示我的行交替颜色“红色”和“绿色”，每个单元格上都有黑色边框。我们可以在反应表中显示吗？

这是我的代码 https://codesandbox.io/s/ecstatic-banzai-zp54o

useSortBy sortType 属性的文档说：

sortType: String | Function(rowA: <Row>, rowB: <Row>, columnId: String, desc: Bool)

    Used to compare 2 rows of data and order them correctly.
    If a function is passed, it must be memoized. The sortType function should return -1 if rowA is larger, and 1 if rowB is larger. react-table will take care of the rest.
    String options: basic, datetime, alphanumeric. Defaults to alphanumeric.
    The resolved function from the this string/function will be used to sort the …