时间戳

首页 > 解决方案 > 如何使用打字稿反应使数据表中的自动增量编号列发生反应？

reactjs - 如何使用打字稿反应使数据表中的自动增量编号列发生反应？

问题描述

我正在尝试做一些简单的事情：在 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.

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

标签： reactjstypescriptreact-typescriptreact-data-table-component

解决方案

您可以访问一个 rowIndex 属性。它在 body 函数的第二个参数中。

下面的例子：

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

推荐阅读