我想添加编号列，这可能会显示行索引，所以第一行将有数字一等...数据表中的一切显示罚款，除了编号。但我还没找到解决办法。这是我的代码
我添加了这个带有按钮的操作列

const actionColumn = [
{
  field: "action",
  headerName: "Action",
  width: 200,
  renderCell: (params) => {
    return (
      <div className="cellAction">
        <Link to={`${params.row._id}`} style={{ textDecoration: "none" }}>
          <Button variant="outlined" color="primary" size="small" >Details</Button>
        </Link>
        <div
          className="deleteButton"
          onClick={() => console.log(params.row._id)}
        >
         <div className="deleteButton">
          <DeleteOutlinedIcon sx={{color:'red'}} fontSize='small'/>
          </div> 
        </div>
      </div>
    );
  },
},
 ];

这是我想add.it应该显示编号的列。正如所看到的，我已经尝试使用customBodyRender，但无济于事

const numbering=[{
    name: '#',
    options: {
        filter: false,
        customBodyRender: ( value, tableMeta, updateValue) => {
            return (
              tableMeta.rowIndex + 1
            );
        }
       }
      }
     ]
  const concat =employeeColumns.concat(actionColumn)

雇员列上面是从另一个文件，它工作得很好。。我只是想知道如何做每行的编号，这样我就可以保持在datatable项目计数这是我的jsx

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

任何帮助都将不胜感激