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',
BooleanExpression: '[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.

Master Detail Plugin Options

Plugin Options used when creating a Master / Detail grid

Passed into the plugin as the only argument.

It contains 2 properties:

  • detailAdaptableOptions - the Adaptable Options to use for ALL detail (i.e. child) Grids

This means that all Detail Grids will share the same behaviour (and Predefined Config), and any object created for one Detail Grid will be applicable to all.

  • onDetailInit - function called when a Detail Grid is initialised (which happens when it opens)it is given the Adaptable Api object

It receives an Adaptable Api object for use in other functions

The signature is:

onDetailInit?: (api: AdaptableApi) => void;


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