Skip to content

Data Grid - Master detail

Expand your rows to display additional information.

The master detail feature allows expanding a row to display additional information inside a panel. To use this feature, pass a function to the getDetailPanelContent prop with the content to be rendered inside the panel. Any valid React element can be used as the row detail, even another grid.

By default, the detail panel height is 500px. You can customize it by passing a function to the getDetailPanelHeight prop. This function must return either a number or the "auto" string. If it returns a number, then the panel will use that value (in pixels) for the height. If it returns "auto", then the height will be derived from the content.

<DataGridPro
  getDetailPanelContent={({ row }) => <div>Row ID: {row.id}</div>}
  getDetailPanelHeight={({ row }) => 100} // Optional, default is 500px.
/>

// or

<DataGridPro
  getDetailPanelContent={({ row }) => <div>Row ID: {row.id}</div>}
  getDetailPanelHeight={({ row }) => 'auto'} // Height based on the content.
/>

To expand a row, click on the + icon or press Space inside the detail toggle column. Returning null or undefined as the value of getDetailPanelContent will prevent the respective row from being expanded.

Order ID
Customer
Placed at
Currency
Total
1
Matheus
2/1/2025
USD
3,768.188
2
Olivier
4/27/2024
MXN
697.011
3
Flavien
12/15/2024
EUR
4,990.545
4
Danail
12/26/2024
EUR
155.925
5
Alexandre
4/3/2025
AUD
758.888
Total Rows: 5

Infer height from the content

Like dynamic row height, you can also derive the detail panel height from its content. For this, pass a function to the getDetailPanelHeight prop returning "auto", as below:

<DataGridPro getDetailPanelHeight={() => 'auto'} />

The following example demonstrates this option in action:

Order ID
Customer
Placed at
Currency
Total
1
Matheus
4/13/2024
MXN
1,013.145
2
Olivier
1/24/2025
HKD
610.407
3
Flavien
4/13/2024
AUD
2,794.806
4
Danail
2/17/2025
GBP
896.49
5
Alexandre
6/15/2024
JPY
3,014.204
Total Rows: 5

Controlling expanded detail panels

To control which rows are expanded, pass a list of row IDs to the detailPanelExpandedRowIds prop. Passing a callback to the onDetailPanelExpandedRowIds prop can be used to detect when a row gets expanded or collapsed.

On the other hand, if you only want to initialize the grid with some rows already expanded, use the initialState prop as follows:

<DataGridPro initialState={{ detailPanel: { expandedRowIds: [1, 2, 3] } }}>
Order ID
Customer
Placed at
Currency
Total
1
Matheus
3/28/2025
AUD
430.87
2
Olivier
1/4/2025
CHF
88.22
3
Flavien
9/16/2024
ARS
309.85
4
Danail
1/18/2025
BRL
804.6
5
Alexandre
5/10/2024
BRL
607.27
Total Rows: 5

Using a detail panel as a form

As an alternative to the built-in row editing, a form component can be rendered inside the detail panel, allowing the user to edit the current row values.

The following demo shows integration with react-hook-form, but other form libraries are also supported.

Order ID
Customer
Email
1
Matheus
mi@ci.ua
2
Olivier
su@we.li
3
Flavien
piiziji@sil.ci
4
Danail
eho@ejepu.li
5
Alexandre
pumeko@jo.ai
Total Rows: 5

Customizing the detail panel toggle

To change the icon used for the toggle, you can provide a different component for the icon slot as follow:

<DataGridPro
  components={{
    DetailPanelExpandIcon: CustomExpandIcon,
    DetailPanelCollapseIcon: CustomCollapseIcon,
  }}
/>

If this is not sufficient, the entire toggle component can be overridden. To fully customize it, add another column with field: GRID_DETAIL_PANEL_TOGGLE_FIELD to your set of columns. The grid will detect that there is already a toggle column defined and it will not add another toggle in the default position. The new toggle component can be provided via renderCell in the same as any other column. By only setting the field, is up to you to configure the remaining options (e.g. disable the column menu, filtering, sorting). To already start with a few suggested options configured, spread GRID_DETAIL_PANEL_TOGGLE_COL_DEF when defining the column.

<DataGridPro
  columns={[
    {
      field: GRID_DETAIL_PANEL_TOGGLE_FIELD,
      renderCell: (params) => <CustomDetailPanelToggle {...params} />
    },
  ]}
/>

// or

<DataGridPro
  columns={[
    {
      ...GRID_DETAIL_PANEL_TOGGLE_COL_DEF, // Already contains the right field
      renderCell: (params) => <CustomDetailPanelToggle {...params}>
    },
  ]}
/>

This approach can also be used to change the location of the toggle column, as shown below.

Order ID
Customer
Placed at
Currency
Total
1
Matheus
2/27/2025
USD
775.34
2
Olivier
7/7/2024
CAD
911.96
3
Flavien
11/30/2024
USD
420.69
4
Danail
4/10/2024
EUR
111.75
5
Alexandre
5/25/2024
ARS
918.16
Total Rows: 5

Disable detail panel content scroll

By default, the detail panel has a width that is the sum of the widths of all columns. This means that when a horizontal scrollbar is present, scrolling it will also scroll the panel content. To avoid this behavior, set the size of the detail panel to the outer size of the grid. Use apiRef.current.getRootDimensions() to get the latest dimension values. Finally, to prevent the panel from scrolling, set position: sticky and left: 0.

The following demo shows how this can be achieved. Notice that the toggle column is pinned to make sure that it will always be visible when the grid is scrolled horizontally.

Order ID
Customer
Email
Placed at
Currency
Address
City
Total
1
Matheus
so@tagozuk.sj
4/29/2024
AUD
1247 Cobu Square
Igdunmu, Jamaica
1,837.605
2
Olivier
dohup@zoj.pa
11/7/2024
CAD
1618 Gerah Pass
Cabecde, Martinique
583.328
3
Flavien
caddo@lazfukego.ml
4/16/2024
BRL
1017 Iseasi Avenue
Malapdef, Bahrain
1,684.284
4
Danail
go@hasohfec.mq
5/28/2024
THB
108 Rargun Court
Kichaisi, Luxembourg
1,256.283
5
Alexandre
owpukhu@en.il
6/27/2024
HKD
1766 Egusez Loop
Rugfucsib, Lesotho
2,529.366
6
José
higupdud@wad.gs
8/18/2024
NZD
460 Mecke Grove
Normabtek, Macedonia, the Former Yugoslav Republic of
55.125
Total Rows: 6

apiRef

Signature:
getExpandedDetailPanels: () => GridRowId[]
Signature:
setExpandedDetailPanels: (ids: GridRowId[]) => void
Signature:
toggleDetailPanel: (id: GridRowId) => void