How to add a serial number to every row in MUI DataGrid?

Question

First, some data is requested from the server.And then I want to add some data.There is no ID in the data value, but the form needs to display the serial number.

 const columns: GridColDef[] = [
        { 
            field: 'id' , 
            headerName: 'number', 
            filterable: false,
            renderCell:(index:any) => `${index + 1}`
        },
        { field: 'code' , headerName: ' code' },
        { field: 'type' , headerName: ' type' },
  ]

<DataGrid rows={row} columns={columns} />

But index is Nan.How do I generate a serial number in each line in a table when I add a new data?

Answer 1

You can use renderCell method, and its prop has a key of id which is unique for every row. It would look something like this.

renderCell: (params) => {
   return (<h1>
            {'serial Number:', params.id}
           </h1>);
        }

You can also use the npm package nanoid to generate a unique id for every row.