在表中添加序列号列答案

【问题标题】：Adding serial number column in the table在表中添加序列号列
【发布时间】：2020-08-22 10:02:36
【问题描述】：

我在我的应用程序中为表使用了一个名为 react-data-table-component 的库。一切都很顺利，但是我需要添加一个列，该列将在我的表中显示序列号。序列号总是从 1 开始到照片数组中的对象总数。

const columns = [
    {
      name: '#',
      selector: 'id',
      cell: (row) => <span>{I need to show serial number here}</span>
    },
    {
      name: 'Name',
      selector: 'photo_link',
      sortable: true,
    }
    ... // Other fields
]

<DataTable
        columns={columns}
        data={photos}
        paginationTotalRows={total_photos}

列数组中的单元格键仅将行作为参数，它具有当前对象，但我无法获取对象的索引。

我在数组的每个对象中都有 id 字段，但这不是我需要的顺序。我该如何解决这个问题？

【问题讨论】：

标签： reactjs react-data-table-component

【解决方案1】：

我知道已经晚了，但发帖会帮助别人！

您可以在列定义中借助索引获得序列号，例如

const columns = [
  {
    name: '#',
    cell: (row, index) => index + 1  //RDT provides index by default
  },
   ... // Other fields
]

索引总是从 0 开始，所以我们使用 + 1，现在它将从 1 开始。

【讨论】：

排序时顺序会中断

【解决方案2】：

在列中试试这个

render:(text,record,index)=>`${index+1}`,

【讨论】：

【解决方案3】：

我认为最简单的方法是预先将序列号添加到您的数组项中。

photos.forEach((photo, index) => { photo.serial = index + 1; });

然后，只需在列定义中使用此序列字段：

{
  name: '#',
  selector: 'serial'
}

【讨论】：

我在 api 响应中有 100 张照片。在我渲染之前我必须这样做吗？没有其他方法已经内置在库中了吗？
我在文档中没有找到内置的方法。对 100 多个项目执行此操作（一次，在您获取数据之后）没什么大不了的。我会说一直动态地做这件事会更好。另外，如果您稍后对数组进行排序，则会保留预先生成的序列，这是另一个优势。