CODEWITHSUNDEEP
react-bootstrap-table
ZekeDroid
ZekeDroid

Reputation: 7209

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.

Upvotes: 1

Views: 9457

Answers (2)

Danang Ponorogo
Danang Ponorogo

Reputation: 89

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

Upvotes: 0

ChaosPredictor
ChaosPredictor

Reputation: 4081

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

Upvotes: 6

Related Questions