如何在React Bootstrap Table中添加可正常显示的序号列

1 核心问题：API属性使用错误 #

你当前使用的cell属性是老版本react-bootstrap-table的自定义单元格渲染API，目前主流使用的react-bootstrap-table2（即react-bootstrap-table-next）中，自定义单元格内容的属性改为formatter，同时必须给该列配置一个唯一的dataField值，否则部分版本会跳过渲染该列的内容。

2 基础实现（不分页场景/仅显示当前页序号） #

修正后的列配置如下：

const columns = [
{ 
  text: 'Sn',
  dataField: 'sn', // 新增唯一的dataField，值不与其他字段重复即可
  formatter: (cell, row, index) => index + 1 , // 替换原cell属性为formatter
  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"
},
];

3 分页场景全局序号实现 #

如果你的表格开启了分页，需要展示跨页的连续全局序号，可以结合分页参数计算：

// 示例分页状态，替换为你项目中的实际分页变量即可
const [currentPage, setCurrentPage] = useState(1); // 当前页码，从1开始计数
const sizePerPage = 10; // 每页展示条数

const columns = [
{ 
  text: 'Sn',
  dataField: 'sn',
  // 计算全局序号
  formatter: (cell, row, index) => (currentPage - 1) * sizePerPage + index + 1,
  headerAttrs: { width: "50px" }
},
// 其余列配置保持不变
...
]

内容的提问来源于stack exchange，提问作者Jatin Panday