如何在MUI-X DataGrid中实现静态行号？

你之前用getRowIndexRelativeToVisibleRows的方式行不通，因为这个方法返回的是当前可见行的动态位置，排序或过滤后可见行顺序改变，这个值就会跟着变，而且表格状态更新时该单元格不会自动重新渲染，导致行号混乱。

要实现静态行号，核心是让行号和行数据绑定，而不是依赖表格的动态行索引，具体做法如下：

方案1：给行数据添加固定行号字段 #

直接在原始行数据中加入一个不会改变的rowNumber字段，渲染时直接取这个值：

// 带固定行号的行数据
const rows = [
  { id: 1, rowNumber: 1 },
  { id: 2, rowNumber: 2 },
  { id: 3, rowNumber: 3 }
];

<DataGridPremium 
  columns={[
    { 
      field: 'rowNumber',
      headerName: '行号',
      sortable: false, // 禁用排序，避免用户误操作
      filterable: false, // 禁用过滤
      width: 80
    },
    {
      field: 'id',
      headerName: 'ID'
    }
  ]}
  rows={rows}
/>

方案2：动态生成固定行号（不修改原始数据） #

如果不想改动原始行数据，可以在传入表格前，通过map给每行添加静态行号：

const originalRows = [{ id: 1 }, { id: 2 }, { id: 3 }];
// 基于原始数据的索引生成固定行号
const rowsWithStaticNumber = originalRows.map((row, index) => ({
  ...row,
  rowNumber: index + 1 // 从1开始计数，若要从0开始直接用index
}));

<DataGridPremium 
  columns={[
    { 
      field: 'rowNumber',
      headerName: '行号',
      sortable: false,
      filterable: false,
      width: 80
    },
    {
      field: 'id',
      headerName: 'ID'
    }
  ]}
  rows={rowsWithStaticNumber}
/>

这两种方式的行号都会和行数据绑定，不管表格怎么排序、过滤，行号都保持初始的固定值，不会出现混乱。

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