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?
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.