import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="Data Grid/Master Detail/Overview" />

# Data Grid - Master Detail

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. [Learn more about Master Detail on the MUI X website](https://mui.com/x/react-data-grid/master-detail/).

To make it easier to render the inner grids using the Master Detail feature, two specialized parameters have been added to our `DataGrid` component: `detailPanelField` with the name of the field that will provide an array with the inner grid data, and `detailPanelProps` with the DataGrid props to be passed to the inner grid (usually `getRowId` with an ID resolver and `tableConfig`). Note that the panel height will be automatically derived from the content by passing `() => 'auto'` to the `getDetailPanelHeight` prop.

<Canvas>
  <Story id="data-grid-master-detail--networks" />
</Canvas>