在 table 中添加序列号列

Question

我在我的应用程序中为 table 使用名为 react-data-table-component 的库。一切都进行得很顺利，但是我需要添加一个列来显示我的 table 中的序列号。序列号始终从 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 字段，但这不是我需要的顺序。我该如何解决这个问题？

Answer 1

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

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

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

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

Answer 2

在列中试试这个

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

Answer 3

我知道已经晚了，但发帖对其他人有帮助！

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

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

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

在 table 中添加序列号列

Adding serial number column in the table

reactjs

react-data-table-component