0

I'm trying to do something simple: display the row number on a primereact / components / datatable / DataTable column.

Problem is that the only way it seems possible is by adding a data field with indexes, which get scrambled if sorting is turned on.

I don't want to add data field.

<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>

As you can see first column is shortId. this is database field. I don't want to this.

I want to automation increment number without database field instead of shortId.

Ideally there would be a method that allows for this but I can't seem to find any.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
grudev
  • 485
  • 1
  • 6
  • 15

1 Answers1

1

There is a rowIndex property you can access. It's in the second parameter for the body function.

Example below:

<Column header="Index" body={(_, { rowIndex }) => rowIndex + 1} />
Jeremy Henson
  • 166
  • 7