---
product: "AG Grid"
title: "Master / Detail"
description: "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."
enterprise: true
framework: vue
version: "36.2.0"
related:
    - title: "Detail Grids"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/master-detail-grids/"
    - title: "Detail Height"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/master-detail-height/"
    - title: "Detail Refresh"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/master-detail-refresh/"
    - title: "Master Rows"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/master-detail-master-rows/"
    - title: "Nesting"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/master-detail-nesting/"
    - title: "Custom Detail"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/master-detail-custom-detail/"
    - title: "Other"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/master-detail-other/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# 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:

```ts
<ag-grid-vue
    :masterDetail="masterDetail"
    :columnDefs="columnDefs"
    :detailCellRendererParams="detailCellRendererParams"
    /* other grid options ... */>
</ag-grid-vue>

// enable Master / Detail
this.masterDetail = true;
// the first Column is configured to use agGroupCellRenderer
this.columnDefs = [
    { field: 'name', cellRenderer: 'agGroupCellRenderer' },
    { field: 'account' }
];
// provide Detail Cell Renderer Params
this.detailCellRendererParams = {
    // 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);
    }
};
```

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/archive/36.2.0/vue-data-grid/master-detail-grids/) section.

#### Master Detail Example

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IDetailCellRendererParams,
  ModuleRegistry,
  RowApiModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  MasterDetailModule,
} from "ag-grid-enterprise";
import { IAccount, ICallRecord } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  RowApiModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  MasterDetailModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :masterDetail="true"
      :detailCellRendererParams="detailCellRendererParams"
      :rowData="rowData"
      @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IAccount> | null>(null);
    const columnDefs = ref<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 = ref<ColDef>({
      flex: 1,
    });
    const detailCellRendererParams = ref({
      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 rowData = ref<IAccount[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      // arbitrarily expand a row for presentational purposes
      setTimeout(() => {
        params.api.getDisplayedRowAtIndex(1)!.setExpanded(true);
      }, 0);
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/master-detail-data.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      detailCellRendererParams,
      rowData,
      onGridReady,
      onFirstDataRendered,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## Row Models

When using Master / Detail the Master Grid must be using either the [Client-Side](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/row-models/#client-side) or [Server-Side](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/server-side-model-master-detail/) Row Models. It is not supported with the [Viewport](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/viewport/) or [Infinite](https://www.ag-grid.com/archive/36.2.0/vue-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` |  |  |  |
| `isRowMaster` | `IsRowMaster` |  |  |  |
| `masterDefaultExpanded` | `number` |  |  |  |
| `isMasterOpenByDefault` | `IsMasterOpenByDefault` |  |  |  |
| `detailCellRenderer` | `any` |  |  |  |
| `detailCellRendererParams` | `any` |  |  |  |
| `detailRowHeight` | `number` |  |  |  |
| `detailRowAutoHeight` | `boolean` |  |  |  |
| `keepDetailRows` | `boolean` |  |  |  |
| `keepDetailRowsCount` | `number` |  |  |  |

### Detail Cell Renderer Params

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

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `detailGridOptions` | `GridOptions<TDetail>` |  |  |  |
| `getDetailRowData` | `GetDetailRowData<TData, TDetail>` |  |  |  |
| `refreshStrategy` | `'rows' \| 'everything' \| 'nothing'` |  |  |  |
| `template` | `string \| TemplateFunc` |  |  |  |