How to Add Row Number Column to Bootstrap Table in React.js

Adding a row number column to the HTML table is very useful to make it user-friendly. If you are using React Bootstrap Table, the serial number column can be added easily. In this example code snippet, we will show you how to add a row number column to React Bootstrap Table in React.js.

Add Row Number Column to React Bootstrap Table
Use the following code snippet to display row numbers in the Bootstrap Table.

function indexNum(cell, row, enumObject, index) {
    return (<div>{index+1}</div>) 
}

<BootstrapTable data={data}>
    ...
    <TableHeaderColumn dataField="id" dataFormat={indexNum}>#</TableHeaderColumn>
    ...
</BootstrapTable>

Add Row Number Column to React Bootstrap Table with Pagination
Use the following code snippet to display row numbers in the Bootstrap paginated Table.

indexNum = (cell, row, enumObject, index) => {
    let current_pagenum = this.state.page;
    let total_records_per_page = this.state.sizePerPage;
    let row_index = (index+1);
    let serial_num = ((total_records_per_page*(current_pagenum-1))+row_index);
    return (<div>{serial_num}</div>) 
}

<BootstrapTable data={data}>
    ...
    <TableHeaderColumn dataField="id" dataFormat={indexNum}>#</TableHeaderColumn>
    ...
</BootstrapTable>