MUI X DataGrid添加行号列问题求助

你当前的行号列实现无效，核心问题有两个：

• 误用了非MUI X DataGrid的API（customBodyRender、options是旧版表格组件或其他库的属性，MUI X DataGrid不支持）
• 行号列未合并到最终的表格列数组中

以下是可行的解决方法：

步骤1：正确定义行号列 #

MUI X DataGrid 可以通过valueGetter或renderCell属性结合行参数计算行号，分页场景下还需结合分页参数保证行号连续：

// 行号列定义（支持分页）
const numberColumn = [
  {
    field: 'rowNumber',
    headerName: '#',
    width: 70,
    sortable: false,
    filterable: false,
    disableColumnMenu: true,
    // 分页场景下计算全局连续行号
    valueGetter: (params) => {
      return params.page * params.pageSize + params.rowIndex + 1;
    },
    // 若无需分页，直接用renderCell更简单
    // renderCell: (params) => params.rowIndex + 1
  }
];

步骤2：合并所有列 #

将行号列、业务列、操作列合并为最终的列数组：

const concatColumns = numberColumn.concat(employeeColumns, actionColumn);

步骤3：更新DataGrid组件配置 #

将columns属性替换为合并后的列数组，同时建议传入总数据量确保分页逻辑准确：

return (
  <div className="datatable">
    <DataGrid
      rows={data}
      className="datagrid"
      getRowId={(data) => data._id}
      checkboxSelection
      columns={concatColumns}
      pageSize={9}
      count={data.length}
      rowsPerPageOptions={[9]}
      components={{ Toolbar: GridToolbar }}
      componentsProps={{
        toolbar: {
          showQuickFilter: true,
          quickFilterProps: { debounceMs: 500 },
        },
      }}
      initialState={{
        filter: {
          filterModel: {
            items: [],
            quickFilterLogicOperator: GridLinkOperator.Or,
          },
        },
      }}
    />
  </div>
);

关键说明 #

• field是列的唯一标识，必须设置（即使该列不对应数据源字段）
• 关闭sortable、filterable等属性可以避免行号列出现不必要的交互选项
• 分页场景下必须结合params.page和params.pageSize计算行号，保证翻页后行号连续

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