如何在react-table中添加可排序的索引列

Question

因此，我想使用react-table创建一个可排序的列，该列为每行编号（根据其在数据集中的位置）。

根据文档，排序是通过对accessor值进行比较的排序功能完成的。但是，与accessor选项不同，该选项不会公开索引Cell。

因此，这将不起作用：

const columns = [
  {
    Header: '#',
    id: 'index',
    accessor: (row) => row.index // 'index' is undefined
  },
  /* ... */
]

我当前的解决方法是将索引直接注入数据集中，如下所示：

myIndexedData = myData.map((el,index) => ({index, ...el})) //immutable

return (
  <ReactTable
    data={myIndexedData}
    columns={columns}
  />
);

这并不是真正的最佳解决方案，尤其是对于大型数据集。有没有我看不到的更好的方法？

Answer 1

您可以使用第二个参数作为索引。

{
      Header: '#',
      id: 'index',
      accessor: (_row: any, i : number) => i + 1 
}

Answer 2

{
    Header: "",
    id: "row",
    maxWidth: 50,
    filterable: false,
    Cell: (row) => {
        return <div>{row.index}</div>;
    }
},

Answer 3

{
    Header: "Index",
    accessor: "",
    Cell: (row) => {
        return <div>{row.row.id + 1}</div>;
    },
    disableSortBy: true,
    disableFilters: true,
},

ver."react-table": "^7.6.3",