如何使用typescript使自动递增数据表中的数字列做出反应

Question

我正在尝试做一些简单的事情：在primereact/components/datatable/datatable列上显示行号。

问题是，唯一可能的方法是添加一个带有索引的数据字段，如果打开排序，索引就会被打乱

我不想添加数据字段。

<DataTable
value={this.props.state.communitylist}
paginator={true}
rows={10}
rowsPerPageOptions={[10, 20, 30, 50]}
header={header}
globalFilter={this.state.globalFilter}
scrollable={true}
responsive={true}>
<Column field="shortId" header="ShortId"/>
<Column field="country" header="Country"/>
<Column field="city" header="City"/>
<Column field="partners" header="Partners"/>
<Column header="Action" body={this.actionButtons}
style={{textAlign: 'center', width: '10em'}}/>
</DataTable>

正如您所看到的，第一列是shortId。这是数据库字段。我不想这样。

我想在没有数据库字段的情况下自动递增编号，而不是shortId。

理想情况下，会有一种方法允许这样做，但我似乎找不到任何方法。

Answer 1

您可以访问rowIndex属性。它在身体功能的第二个参数中。

以下示例：

<Column header="Index" body={(_, { rowIndex }) => rowIndex + 1} />