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.

Always memoize the function provided to getDetailPanelContent and getDetailPanelHeight. The grid depends on the referential value of these props to cache their values and optimize the rendering.

const getDetailPanelContent = React.useCallback(() => { ... }, []);

<DataGridPro getDetailPanelContent={getDetailPanelContent} />

Depending on the height of the detail panel, you may see a blank space when scrolling. This is caused by the data grid using a lazy approach to update the rendered rows. Set rowThreshold to 0 to force new rows to be rendered more often to fill the blank space. Note that this may reduce the performance.

<DataGridPro rowThreshold={0} />

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:

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 data grid with some rows already expanded, use the initialState prop as follows:

<DataGridPro initialState={{ detailPanel: { expandedRowIds: [1, 2, 3] } }}>

detailPanelExpandedRowIds: []

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.

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
  slots={{
    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.

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 data 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 data grid is scrolled horizontally.

Recipes

More examples of how to customize the detail panel:

One expanded detail panel at a time

apiRef

The grid exposes a set of methods that enables all of these features using the imperative apiRef. To know more about how to use it, check the API Object section.

getExpandedDetailPanels()

Returns the rows whose detail panel is open.

Signature:

getExpandedDetailPanels: () => GridRowId[]

setExpandedDetailPanels()

Changes which rows to expand the detail panel.

Signature:

setExpandedDetailPanels: (ids: GridRowId[]) => void

toggleDetailPanel()

Expands or collapses the detail panel of a row.

Signature:

toggleDetailPanel: (id: GridRowId) => void