reactjs - 如何使用 React js 在网格 js 中显示行索引

Question

目前在 reactjs 中使用 grid.js 创建我的数据表。

这是我的代码

<Grid
    data={data.filter(e => e.status != 0)}
    columns={[
        {
            id: 'url',
            name: 'url',
            hidden: true

        }, {
            id: 'id',
            name: '#',
            formatter: (cell) => _(this.showIndexNo()) //<-- where i do the function to display row index number

        }, {
            id: 'name',
            name: 'Name'
        }, {
            id: 'smgk_name',
            name: 'SM Name',
            formatter: (cell, row) => _(this.showSmlink(row.cells[0].data, row.cells[3].data))

        }, {
            id: 'email',
            name: 'Email',
            // formatter: (cell) => _(moment(cell).format(MOMENT_FORMAT))

        },
        {
            id: 'id',
            name: 'Actions',
            formatter: (cell) => _(this.showButton(cell))
            //(cell) => `Name: ${cell}`
        }
    ]}

    search={true}
    sort={true}
/>

我想在我的网格 js 中显示行索引/自动增量。我应该如何编辑此代码？

 showIndexNo() {

 const { subscriberData } = this.state;

 let a = [];

 return (subscriberData.filter(e => e.status != 0).map((item, i) => i ) ) }

我得到了这个结果：

我不能使用 ID 作为行索引，因为当我删除一个详细信息时，ID 仍然存在，只有状态将更改为已删除（这不会显示在网格中），所以我需要行索引。非常感谢任何帮助

Answer 1

return (subscriberData.filter(e => e.status != 0).map((item, i) =>
  return { ...item,
    rowIndex: i //use rowIndex as column
  }))
}