Data Grid - Row customization recipes

Advanced row customization recipes.

One expanded detail panel at a time

By default, the Master-detail row panel feature supports multiple expanded detail panels simultaneously.

However, you can control the expanded detail panels to have only one detail panel expanded at a time.

Expand or collapse all detail panels

The following demo shows how to create a custom header element that expands or collapses all detail panels at once.

Here's how it works:

The custom header uses gridRowsLookupSelector to find all rows with a detail panel. It checks the status of open panels using the useGridSelector hook to access the grid's state. When clicked, it uses setExpandedDetailPanels from the Grid API to expand or collapse all detail panels.

Toggling detail panels on row click

In the demo below, you can toggle the detail panel by clicking anywhere on the row: