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.
Order ID
Customer
Placed at
Currency
Total
1
Matheus
11/14/2024
HKD
297.93
2
Olivier
7/24/2024
NZD
744.22
3
Flavien
10/26/2024
BRL
895.91
4
Danail
5/31/2025
EUR
298.11
5
Alexandre
11/1/2024
TRY
118.03
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.
Order ID
Customer
Placed at
Currency
Total
1
Matheus
11/26/2024
NZD
418.32
2
Olivier
7/31/2024
JPY
248.66
3
Flavien
1/2/2025
THB
828.19
4
Danail
12/7/2024
NZD
872.12
5
Alexandre
11/19/2024
BRL
528.18
Toggling detail panels on row click
In the demo below, you can toggle the detail panel by clicking anywhere on the row:
Order ID
Customer
Placed at
Currency
Total
1
Matheus
7/29/2024
JPY
3,508.218
2
Olivier
1/19/2025
NZD
3,138.408
3
Flavien
3/26/2025
CAD
883.187
4
Danail
7/28/2024
AUD
2,932.072
5
Alexandre
2/3/2025
NZD
311.966