react-bootstrap-table

Add row number column to table

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.

Solution

  • 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>) 
}