---
title: "Master / Detail"
enterprise: true
framework: react
version: "36.1.0"
---

# Master / Detail

Master Detail refers to a top level grid called a Master Grid having rows that expand. When the row is expanded, another grid is displayed with more details related to the expanded row. The grid that appears is known as the Detail Grid.

[Master / Detail Video Tutorial](https://www.youtube.com/watch?v=8OeJn75or2w)

## Enabling Master / Detail

Master / Detail can be enabled using the `masterDetail` grid option with detail rows configured using `detailCellRendererParams` as shown below:

```jsx
// enable Master / Detail
const masterDetail = true;
// the first Column is configured to use agGroupCellRenderer
const [columnDefs, setColumnDefs] = useState([
    { field: 'name', cellRenderer: 'agGroupCellRenderer' },
    { field: 'account' }
]);
// provide Detail Cell Renderer Params
const detailCellRendererParams = useMemo(() => { 
	return {
        // provide the Grid Options to use on the Detail Grid
        detailGridOptions: {
            columnDefs: [
                { field: 'callId' },
                { field: 'direction' },
                { field: 'number'}
            ]
        },
        // get the rows for each Detail Grid
        getDetailRowData: params => {
            params.successCallback(params.data.callRecords);
        }
    };
}, []);

<AgGridReact
    masterDetail={masterDetail}
    columnDefs={columnDefs}
    detailCellRendererParams={detailCellRendererParams}
/>
```

The example below shows a simple Master / Detail with all the above configured.

1. The grid property `masterDetail=true` is set. This tells the grid to allow expanding rows to display Detail Grids.
2. The Cell Renderer on the first column in the Master Grid is set to `agGroupCellRenderer`. This tells the grid to use the Group Cell Renderer which in turn includes the expand / collapse functionality for that column.
3. The Detail Cell Renderer parameter `detailGridOptions` is set. This contains configuration for the Detail Grid, such as which columns to display and which grid features to enable inside the Detail Grid.
4. A callback is provided via the Detail Cell Renderer parameter `getDetailRowData`. This callback is called for each Detail Grid and sets the rows to display in each Detail Grid.

> **Note**
>
> To learn more about `detailCellRendererParams` configuration see the [Detail Grids](https://www.ag-grid.com/react-data-grid/master-detail-grids/) section.

#### Master Detail Example

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  IDetailCellRendererParams,
  ModuleRegistry,
  RowApiModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  MasterDetailModule,
} from "ag-grid-enterprise";
import { IAccount } from "./interfaces";
import { useFetchJson } from "./useFetchJson";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  RowApiModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  MasterDetailModule,
  ColumnMenuModule,
  ContextMenuModule,
];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    // group cell renderer needed for expand / collapse icons
    { field: "name", cellRenderer: "agGroupCellRenderer" },
    { field: "account" },
    { field: "calls" },
    { field: "minutes", valueFormatter: "x.toLocaleString() + 'm'" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
    };
  }, []);
  const detailCellRendererParams = useMemo(() => {
    return {
      detailGridOptions: {
        columnDefs: [
          { field: "callId" },
          { field: "direction" },
          { field: "number", minWidth: 150 },
          { field: "duration", valueFormatter: "x.toLocaleString() + 's'" },
          { field: "switchCode", minWidth: 150 },
        ],
        defaultColDef: {
          flex: 1,
        },
      },
      getDetailRowData: (params) => {
        params.successCallback(params.data.callRecords);
      },
    } as IDetailCellRendererParams<IAccount, ICallRecord>;
  }, []);

  const { data, loading } = useFetchJson<IAccount>(
    "https://www.ag-grid.com/example-assets/master-detail-data.json",
  );

  const onFirstDataRendered = useCallback((params: FirstDataRenderedEvent) => {
    // arbitrarily expand a row for presentational purposes
    setTimeout(() => {
      params.api.getDisplayedRowAtIndex(1)!.setExpanded(true);
    }, 0);
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IAccount>
            rowData={data}
            loading={loading}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            masterDetail={true}
            detailCellRendererParams={detailCellRendererParams}
            onFirstDataRendered={onFirstDataRendered}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: Master Detail Example](https://www.ag-grid.com/examples/master-detail/simple/reactFunctionalTs)

## Row Models

When using Master / Detail the Master Grid must be using either the [Client-Side](https://www.ag-grid.com/react-data-grid/row-models/#client-side) or [Server-Side](https://www.ag-grid.com/react-data-grid/server-side-model-master-detail/) Row Models. It is not supported with the [Viewport](https://www.ag-grid.com/react-data-grid/viewport/) or [Infinite](https://www.ag-grid.com/react-data-grid/infinite-scrolling/) Row Models.

The Detail Grid on the other hand can use any Row Model.

## API Reference

### Master Detail Properties

Top level Master Detail properties available on the Grid Options:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `masterDetail` | `boolean` |  | `false` | Set to `true` to enable Master Detail. See [Master Detail](https://www.ag-grid.com/react-data-grid/master-detail/) for more information. Module: [`MasterDetailModule`](https://www.ag-grid.com/react-data-grid/modules/). |
| `isRowMaster` | `IsRowMaster` |  |  | Callback to be used with [Master Detail](https://www.ag-grid.com/react-data-grid/master-detail/) to determine if a row should be a master row. If `false` is returned no detail row will exist for this row. See [Dynamic Master Rows](https://www.ag-grid.com/react-data-grid/master-detail-master-rows/#dynamic-master-rows) for more information. Module: [`MasterDetailModule`](https://www.ag-grid.com/react-data-grid/modules/). |
| `masterDefaultExpanded` | `number` |  |  | Master Detail: set to the number of levels of master rows to expand by default, e.g. `0` for none, `1` for first level only, etc. Set to `-1` to expand everything. If not set, falls back to `groupDefaultExpanded`. See [Open Master Rows by Default](https://www.ag-grid.com/react-data-grid/master-detail-master-rows/#opening-master-rows-by-default) for more information. Module: [`MasterDetailModule`](https://www.ag-grid.com/react-data-grid/modules/). |
| `isMasterOpenByDefault` | `IsMasterOpenByDefault` |  |  | (Client-side Row Model only) Master Detail: allows master rows to be open by default. See [Open Master Rows by Default](https://www.ag-grid.com/react-data-grid/master-detail-master-rows/#opening-master-rows-by-default) for more information. Module: [`MasterDetailModule`](https://www.ag-grid.com/react-data-grid/modules/). |
| `detailCellRenderer` | `any` |  |  | Provide a custom `detailCellRenderer` to use when a master row is expanded. See [Custom Detail](https://www.ag-grid.com/react-data-grid/master-detail-custom-detail/) for more information. Module: [`MasterDetailModule`](https://www.ag-grid.com/react-data-grid/modules/). |
| `detailCellRendererParams` | `any` |  |  | Specifies the params to be used by the Detail Cell Renderer. Can also be a function that provides the params to enable [dynamic definitions](https://www.ag-grid.com/react-data-grid/master-detail-grids/#dynamic-definitions) of the params. See [Detail Grids](https://www.ag-grid.com/react-data-grid/master-detail-grids/) for more information. Module: [`MasterDetailModule`](https://www.ag-grid.com/react-data-grid/modules/). |
| `detailRowHeight` | `number` |  |  | Set fixed height in pixels for each detail row. See [Fixed Height](https://www.ag-grid.com/react-data-grid/master-detail-height/#fixed-height) for more information. Module: [`MasterDetailModule`](https://www.ag-grid.com/react-data-grid/modules/). [Initial](https://www.ag-grid.com/react-data-grid/grid-interface/#initial-grid-options). |
| `detailRowAutoHeight` | `boolean` |  |  | Set to `true` to have the detail grid dynamically change it's height to fit it's rows. See [Auto Height](https://www.ag-grid.com/react-data-grid/master-detail-height/#auto-height) for more information. Module: [`MasterDetailModule`](https://www.ag-grid.com/react-data-grid/modules/). [Initial](https://www.ag-grid.com/react-data-grid/grid-interface/#initial-grid-options). |
| `keepDetailRows` | `boolean` |  | `false` | Set to `true` to keep detail rows for when they are displayed again. See [Detail Grid Lifecycle](https://www.ag-grid.com/react-data-grid/master-detail-grids/#detail-grid-lifecycle) for more information. Module: [`MasterDetailModule`](https://www.ag-grid.com/react-data-grid/modules/). [Initial](https://www.ag-grid.com/react-data-grid/grid-interface/#initial-grid-options). |
| `keepDetailRowsCount` | `number` |  | `10` | Sets the number of details rows to keep. See [Detail Grid Lifecycle](https://www.ag-grid.com/react-data-grid/master-detail-grids/#detail-grid-lifecycle) for more information. Module: [`MasterDetailModule`](https://www.ag-grid.com/react-data-grid/modules/). [Initial](https://www.ag-grid.com/react-data-grid/grid-interface/#initial-grid-options). |

### Detail Cell Renderer Params

Properties available on the `IDetailCellRendererParams&lt;TData = any, TDetail = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `detailGridOptions` | [`GridOptions<TDetail>`](https://www.ag-grid.com/react-data-grid/grid-options/) |  |  | Provide Grid Options to use for the Detail Grid. |
| `getDetailRowData` | `GetDetailRowData<TData, TDetail>` |  |  | A function that provides what rows to display in the Detail Grid. |
| `refreshStrategy` | `'rows' \| 'everything' \| 'nothing'` |  |  | Defines how to refresh the Detail Grids as data is changing in the Master Grid. |