Add row number column to table - react-bootstrap-table

Question

I'm trying to do something simple: display the row number on a react-bootstrap-table 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.
Ideally there would be a method that allows for this but I can't seem to find any.

Answer 1

I had the same issue.
add
TableHeaderColumn
like this:
<BootstrapTable data={data}>
...
<TableHeaderColumn dataField="any" dataFormat={indexN}>#</TableHeaderColumn>
...
</BootstrapTable>
and function:
function indexN(cell, row, enumObject, index) {
return (<div>{index+1}</div>)
}

Answer 2

For now there is a big change in the react-bootstrap-table2, that there's no TableHeaderColumn, instead you are supposed to be define the "columns" prop on BootstrapTable. I solve this issue by using columns formatter and data mapping like so:
In the Backend:
const ret = data.map((d, i) => {
return { num: i + 1, id: d.id, name: d.name, age: d.age}
});
return ret;
In the Frontend:
const columns = [{
dataField: 'id',
text: '#',
sort: true,
headerStyle: () => {
return { width: '10%', textAlign: 'center' }
},
formatter: (rowContent: any, row: any) => {
return (
<div>
{row.num}
</div>
)
}
}
Ref: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/migration.html