reactjs - 如何在反应表中添加可排序的索引列

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: "row",
    maxWidth: 50,
    filterable: false,
    Cell: (row) => {
        return <div>{row.index}</div>;
    }
},

Answer 2

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

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

Answer 3

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

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

Answer 4

   {
      Header: '#',
      Cell: (row) => {
        return <div>{Number(row.row.id) + 1}</div>;
      },
    }

"react-table": "7.7.0", 获取分页索引和页面大小

function getIndex(props) {
  return (
     <div>
       {props.state.pageIndex * props.state.pageSize + 
        Number(props.row.id) + 1}
     </div>
  );
}

Answer 5

export const SerialNumberColumn = {
    Header: "Sr No", // label of header
    id: "row", 
    maxWidth: 50,
    filterable: false,  
    Cell: (row) => {
      let {pageIndex} = row.state; // get current page index (1 - n)
      let {index} = row.cell.row;  // get current row number (0 - 9)
      let srNo = ``;

      if(pageIndex === 1){
        srNo = index + 1;
      // 1, 2, 3, 4,
     // as index starts from 0

      }else{
        if(index === 9){
          srNo = `${pageIndex}0`;
       // in case of 20, 30, 40, 50
        }else{
          srNo = `${pageIndex - 1}${index + 1}`;
       // for others such as 11, 12, 13, 41, 42, ..., n
        }
      }
        return <div>{srNo}</div>;
    }
};

例如，您的页面大小为 10（每页 10 行），总共有15 页。所以总记录为 10 * 15 = 150；

上面的代码所做的是，

1. let {pageIndex} = row.**strong text**state;

这将提取每行的页码。因此，从记录 0-9 开始，页码将为 1

2. let {index} = row.cell.row;

获取行号

因此，第一行为 0，第二行为 1，依此类推。对于每一页，我们将获得 0-9 条记录或更少，因为页面大小为 10。

3. 由于行号从 0 开始，我们将其递增 1。

if(pageIndex === 1){
        srNo = index + 1;

// srNo = 0 + 1 -> 1
// srNo = 1 + 1 -> 2

4. 从第二页开始，当行号为 9 时，序号应为 20、30、40

行号 | 序列号 0 11 1 12 2 13 。. . . . . 9 20

所以我们只放pageIndex0

          srNo = `${pageIndex}0`; 
// srNo = 20
// srNo = 30
// srNo = 40

5. 最后是第一页之后的其余序列号 srNo = `${pageIndex - 1}${index + 1}`;

为了。例如：

srNo = `${2 - 1}${0 + 1}`; 11