Data Grid - Rows
This section goes in details on the aspects of the rows you need to know.
Feeding data
Grid rows can be defined with the rows prop.
rows expects an array of objects.
Rows should have this type: GridRowData[].
The columns' "field" property should match a key of the row object (GridRowData).
<DataGrid
columns={[{ field: 'name' }]}
rows={[
{ id: 1, name: 'React' },
{ id: 2, name: 'Material-UI' },
]}
/>Updating rows
Rows can be updated in two ways:
The rows prop
The simplest way is to provide the new rows using the rows prop.
It replaces the previous values. This approach has some drawbacks:
- You need to provide all the rows.
- You might create a performance bottleneck when preparing the rows array to provide to the grid.
Infinite loading
The grid provides a onRowsScrollEnd prop that can be used to load additional rows when the scroll reaches the bottom of the viewport area.
In addition, the area in which the callback provided to the onRowsScrollEnd is called can be changed using scrollEndThreshold.
<DataGridPro
{...data}
rows={data.rows.concat(loadedRows)}
loading={loading}
hideFooterPagination
onRowsScrollEnd={handleOnRowsScrollEnd}
components={{
LoadingOverlay: CustomLoadingOverlay,
}}
/>apiRef
The second way to update rows is to use the apiRef.
This is an imperative API that is designed to solve the previous two limitations of the declarative rows prop. apiRef.current.updateRows(), updates the rows to the grid. It merges the new rows with the previous ones.
The following demo updates the rows every 200ms.
<DataGridPro rows={rows} columns={columns} apiRef={apiRef} />The default behavior of updateRows API is to upsert rows.
So if a row has an id that is not in the current list of rows then it will be added to the grid.
Alternatively, if you would like to delete a row, you would need to pass an extra _action property in the update object as below.
apiRef.current.updateRows([{ id: 1, _action: 'delete' }]);
Row height
By default, the rows have a height of 52 pixels. This matches the normal height in the Material Design guidelines.
To change the row height for the whole grid, set the rowHeight prop:
<DataGrid rowHeight={25} {...data} />Styling rows
You can check the styling rows section for more information.
🚧 Row spanning
⚠️ This feature isn't implemented yet. It's coming.
👍 Upvote issue #207 if you want to see it land faster.
Each cell takes up the width of one row.
Row spanning allows to change this default behavior.
It allows cells to span multiple rows.
This is very close to the "row spanning" in an HTML <table>.
🚧 Row reorder
⚠️ This feature isn't implemented yet. It's coming.
👍 Upvote issue #206 if you want to see it land faster.
Row reorder is used to rearrange rows by dragging the row with the mouse.