reactjs - 在表中添加序列号列

Question

我在我的应用程序中为表使用了一个名为 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 字段，但这不是我需要的顺序。我该如何解决这个问题？

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 开始。