Skip to content

Commit

Permalink
[docs] Improve the getRowId doc section (#5156)
Browse files Browse the repository at this point in the history
  • Loading branch information
flaviendelangle committed Jun 14, 2022
1 parent 9e317d5 commit 924aecc
Showing 1 changed file with 20 additions and 4 deletions.
24 changes: 20 additions & 4 deletions docs/data/data-grid/rows/rows.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,34 @@ Otherwise, the grid will re-apply heavy work like sorting and filtering.

{{"demo": "RowsGrid.js", "bg": "inline"}}

:::warning
Each row object should have a field that uniquely identifies the row.
By default, the grid will use the `id` property of the row. Note that [column definition](/x/react-data-grid/column-definition/) for `id` field is not required.
## 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.

When using dataset without a unique `id` property, you can use the `getRowId` prop to specify a custom id for each row.
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`:

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

{{"demo": "RowsGridWithGetRowId.js", "bg": "inline", "defaultCodeOpen": false}}

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.

:::warning
Just like the `rows` prop, the `getRowId` prop should keep the same reference between two renders.
Otherwise, the grid will re-apply heavy work like sorting and filtering.
:::

## Updating rows

### The `rows` prop
Expand Down

0 comments on commit 924aecc

Please sign in to comment.