Master Detail Plugin

Version 7 of AdapTable introduced support for using Master-Detail grids in ag-Grid.

It allows you to create a definition for the Detail grid which will apply for all detail grids.

This means that if you create a Conditional Style in Predefind Config it will apply in each detail grid.

How It Works

The masterDetailAgGridPlugin has 2 properties:

  • detailAdaptableOptions - an AdaptableOptions object to be used for every Detail grid

  • onDetailInit: (api: AdaptableApi) => void - an optional function which will be called whenever a Detail grid is opened (essentially initialised), providing you with the AdaptableApi instance for full programmatic access to all Adaptable features.


This code taken from the Master-Detail demo shows how it works.

We have set up a Master-Detail grid in ag-Grid and the Adaptable Options object for the Master grid in the normal way.

And we have supplied the detail grid Adaptable Options in the plugins section. Here we create a Conditional Style in Predefined Config to be used in all Detail grids.

// typical ag-Grid GridOptions object but popuplated for use in a Master-Detail grid
// for more information see:
const gridOptions: GridOptions = {
masterDetail: true,
detailCellRendererParams: {
detailGridOptions: {
columnDefs: detailColumnDefs,
getDetailRowData: function(params: any) {
isRowMaster: function(dataItem) {
return dataItem ? dataItem.squad.length > 0 : false;
const adaptableOptions: AdaptableOptions = {
primaryKey: 'name',
userName: 'Demo User',
adaptableId: 'Master Detail Demo - Master Grid',
predefinedConfig: demoConfig,
vendorGrid: { ...gridOptions, modules: AllEnterpriseModules },
plugins: [
detailAdaptableOptions: {
primaryKey: 'name',
adaptableId: 'Master Detail Demo - Detail Grid',
predefinedConfig: {
ConditionalStyle: {
ConditionalStyles: [
Scope: {
ColumnIds: ['age'],
Style: {
BackColor: '#ffffe0',
Expression: '[age]> 30'
adaptableApi = await Adaptable.init(adaptableOptions);


This plugin depends on the ag-Grid @ag-grid-enterprise/master-detail Module (or @ag-grid-enterprise/all-modules) being present.


There is a Master-Detail demo at the AdapTable Demo Site