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

Question

我需要渲染表格中每一行的编号。它应该是静态的，并且在对表中的列进行排序或过滤时不应更改。 我尝试使用 grid api 的

getRowIndexRelativeToVisibleRows

方法，但在排序和过滤以及行号与行数据混合时它不起作用。 我认为问题在于，当您更改表格列菜单中的排序或过滤顺序时，具有行号的单元格将不会再次呈现。

这就是我尝试过的：

<Table 
  columns=[{ 
    field: 'id',
    renderCell: (params) => params.api.getRowIndexRelativeToVisibleRows(params.id),
  }]
  
  rows={[{ id: 1 }, { id: 2 }, { id: 3 }]}
/>

Answer 1

export default function DataTable() {
  const columns = [
    {
      field: 'rowNumber',
      headerName: 'Row Number',
      width: 100,
      renderCell: (params) => {
        return <>{params.rowIndex + 1}</>;
      },
    },
    { field: 'id', headerName: 'ID', width: 130 }
  ];

  const rows = [
    { id: 1 },
    { id: 2 },
    { id: 3 }
  ];

  return (
    <div style={{ width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}   
      />
    </div>
  );
}