Expand All

  Getting Started

  Reference

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Master Detail Grids

A common requirement is to have a master / detail relationship between two grids where you have the rows expand into more details by displaying another grid with different columns when you expand the rows of the top level grid.

ag-Grid supports master detail grids using the grids fullWidth feature.

The example below shows using fullWidth to provide a master / detail grid setup. The fullWidth concept is used as normal, that fact that another grid instance is used in the fullWidth cellRenderer is independent to the configuration of the fullWidth feature.

The example uses getNodeChildDetails(dataItem) callback (explained in section Tree Data). There is no advantage in this example to using the flower technique, however it is presented to demonstrate an alternative.

The following should be noted from the example:

  • Two grid types are used, one instance of the master grid and many detail grids. There are as many detail grids shown as required to render all the currently displayed detail rows.
  • The grid types share no configuration.
  • As the user scrolls up and down, the detail grids are continuously destroyed and recreated in correspondence to ag-Grids row virtualisation.
  • The nested grids are fully featured ag-Grid's, with full support of all features. The example demonstrates filtering and sorting in the detail grid.
  • The grids work independently of each other, for example selection in one grid does not impact selection in any other grid.
  • In order to allow for filtering by name and account, we add to all the lear rows their parent name and parent account values.

The example is using parent / child relationships and has exactly one child to each parent. This is why the list of phone calls is returned in getNodeChildDetails() and that full list is the data provided to the fullWidth cellRenderer. The master grid thinks each row has one child row (the fullWidth row), it is not concerned with the fact that each child row in fact displays a list of child records. ag-Grid has the concept of Master / Slave grids which is a technique for syncing column between two grids. This is not related to Master / Detail grids explained here. They just have similar names.

Server Requests for Additional Data

The examples on this page do not contact the server for more data to display in the fullWidth components. This is to keep the examples simple. On your application, there is nothing stopping you from hitting there server again to get more data to display. How to do this is outside of the context of ag-Grid, however maybe you would consider showing a loading spinner icon while you fetch the data in the fullWidth component.

Using fullWidth with Pagination, Virtual Pagination and Viewport

It is possible to use fullWidth with any of the row models. However grouping (and / or parent child) relationships that are required to make fullWidth useful in your circumstance may not be available. In other words, fullWidth works everywhere but parent / child may not. See the sections on the individual row model for details.