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.

Example

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: https://www.ag-grid.com/javascript-grid-master-detail/
const gridOptions: GridOptions = {
columnDefs,
rowData,
masterDetail: true,
detailCellRendererParams: {
detailGridOptions: {
columnDefs: detailColumnDefs,
},
getDetailRowData: function(params: any) {
params.successCallback(params.data.squad);
},
},
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: [
masterDetailAgGridPlugin({
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);

Requirements

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

Demo

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