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