Adding serial number to the react bootstrap table

Question

I am using a React-bootstrap table in my project, I want to add a column in my table with a serial number but am unable to generate the serial number so kindly guide me on how to do it.

Currently am writing the below code to generate serial number but not getting the numbers in the columns.

const columns = [
{ text: 'Sn',
  cell: (row, index) => index + 1 ,
  headerAttrs: { width: "50px" }
},
{
  text: "Customer Id",
  dataField: "customerId",
  classes: "alignment"
},
{
  text: "Email",
  dataField: "email",
  classes: "alignment",
  headerAttrs: { width: "200px" }
},
{
  text: "Role",
  dataField: "role"
},
{
  text: "Date Created",
  dataField: "dateCreated",
  formatter: dateFormatter
},
{
  text: "Customer Type",
  dataField: "plan"
},
];

Answer 1

You can use the following formatter property to get the respective serial number.

{
  dataField: 'sl.no',
  text: 'Sl no.',
  formatter: (cell, row, rowIndex, formatExtraData) => {
    return rowIndex + 1;
  },
  sort: true,
},