Data Grid - Row definition

Define your rows.

Feeding data

The rows can be defined with the rows prop, which expects an array of objects.

<DataGrid
  columns={[{ field: 'name' }]}
  rows={[
    { id: 1, name: 'React' },
    { id: 2, name: 'MUI' },
  ]}
/>

<DataGrid
  columns={[{ field: 'name' }]}
  rows={[
    { id: 1, name: 'React' },
    { id: 2, name: 'MUI' },
  ]}
/>

Press Enter to start editing

Row identifier

Each row must have a unique identifier.

This identifier is used internally to identify the row in the various models—for instance, the row selection model—and to track the row across updates.

By default, the data grid looks for a property named id in the data set to get that identifier.

If the row's identifier is not called id, then you need to use the getRowId prop to tell the grid where it's located.

The following demo shows how to use getRowId to grab the unique identifier from a property named internalId:

<DataGrid getRowId={(row) => row.internalId} />

If no such unique identifier exists in the data set, then you must create it by some other means, but this scenario should be avoided because it leads to issues with other features of the grid.

Note that it is not necessary to create a column to display the unique identifier data. The data grid pulls this information directly from the data set itself, not from anything that is displayed on the screen.

Styling rows

You can check the styling rows section for more information.