React JS中如何在DataGrid中显示行索引？API无索引能否复用分页数字？

核心实现逻辑 #

序号完全可以通过分页的当前页码和每页显示条数，加上行在当前页的本地索引来计算，公式如下：
序号 = (当前页码 - 基准值) * 每页条数 + 当前页内行索引 + 1

注：基准值看DataGrid库的分页规则，多数库页码从0开始（基准值为0），少数从1开始（基准值为1）

具体代码示例（以Material-UI DataGrid为例） #

1. 新增序号列配置
   在列定义中添加专门的序号列，通过renderCell方法动态计算序号：

const columns = [
  {
    field: 'serialNumber',
    headerName: '序号',
    width: 80,
    sortable: false, // 序号无需排序
    filterable: false, // 序号无需筛选
    renderCell: (params) => {
      // 获取分页参数
      const currentPage = params.api.getCurrentPage(); // MUI DataGrid页码从0开始
      const pageSize = params.api.getPageSize();
      // 获取当前页内的行索引
      const rowLocalIndex = params.rowIndex;
      // 计算并返回序号
      return currentPage * pageSize + rowLocalIndex + 1;
    }
  },
  // 你的业务列
  { field: 'id', headerName: 'ID', width: 120 },
  { field: 'name', headerName: '名称', width: 180 },
  // ...其他业务列
];

2. 自动同步分页变化
   当用户切换页码、调整每页条数时，renderCell会随组件更新自动重新计算序号，无需额外编写同步逻辑。

通用注意事项 #

• 不同DataGrid库的参数获取方式有差异：比如部分库的页码从1开始，公式需调整为(currentPage - 1) * pageSize + rowLocalIndex + 1
• 确保行索引是当前页内的顺序索引，而非全局数据的原始索引（分页、排序、筛选后，行顺序会变化，多数库的rowIndex/idx会自动适配）

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