AdapTable Version:

Framework:

Master Detail Grids

Summary

AdapTable fully supports the Master / Detail mode provided by AG Grid
It provides a dedicated Plugin which extends the functionality on offer

One of the most powerful features in AG Grid are Master Detail Grids.

These are grids where each row in the Master Grid can be expanded to display a Details grid.

AdapTable fully supports (and extends) AG Grid Master Detail grids.

It does so via a dedicated Plugin which provides extra features.

Primarily it enables all Detail Grids to share common AdapTable objects (e.g. Reports or Format Columns).

Installing Master Detail Plugin

Terminal

npm install @adaptabletools/adaptable-plugin-master-detail-aggrid

Caution

If using CommonJS, then install @adaptabletools/adaptable-plugin-master-detail-aggrid-cjs instead
Make sure also to include your License Key in the DetailOptions grid you provide

Unlike with Row Grouping, the Details Grid is a totally separate, fully configurable AdapTable instance.

Note

Each Details Grid contains its own set of columns and own unique data

This allows you essentially to provide 2 definitions:

the main Master Grid which provides the top level of rows
the Details Grid which will appear when a Master row is expanded

Deep Dive

Providing Details Grid Definition

The Details Grid is provided in the detailAdaptableOptions property in Master Detail Plugin Options and is added to the plugins section of Adaptable Options.

plugins: [
  masterDetailAgGridPlugin({
    detailAdaptableOptions: {
      // provide here - including adaptableId
    },
  }),
],

It is possible to create a second Master / Detail grid as the child of an initial Master / Details grid.

Caution

Only one level of nesting Master / Details grids is possible

Master Detail

Fork Fork

This demo illustrates how to use Master Detail Grids in AdapTable
The Master and Detail grids have different AdapTable configurations
However each Detail Grids shares the same Column Formatting on the GitHub Stars column

Expand to see how the Master Detail Grid was configured

The Detail Grids are defined in the masterDetailAgGridPlugin setction of plugins:

Note: this includes Initial Adaptable State which includes the Format Column on the GitHub Stars column

plugins: [
  masterDetailAgGridPlugin({
    detailAdaptableOptions: {
      adaptableId: 'Language Details',
      primaryKey: 'id',
      initialState: {
        FormatColumn: {
          FormatColumns: [
            {
              Name: 'FormatColumn-github_stars-212',
              Scope: {
                ColumnIds: ['github_stars'],
              },
              Style: {
                FontWeight: 'Bold',
                BackColor: '#ffbc05',
              },
            },
          ],
        },
      },
    },
  }),
],

Try It Out

Create a Format Column in one Details Grid and see it applied in the other 2

import {AdaptableOptions, DetailInitContext} from '@adaptabletools/adaptable';
import masterDetailAgGridPlugin from '@adaptabletools/adaptable-plugin-master-detail-aggrid';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Master Detail',
  plugins: [
    masterDetailAgGridPlugin({
      detailAdaptableOptions: {
        adaptableId: 'Language Details',
        primaryKey: 'id',
        initialState: {
          Theme: {CurrentTheme: 'dark'},
          FormatColumn: {
            FormatColumns: [
              {
                Name: 'formatColumn-github_stars',
                Scope: {
                  ColumnIds: ['github_stars'],
                },
                Style: {
                  FontWeight: 'Bold',
                  BackColor: '#ffbc05',
                },
              },
            ],
          },
          Layout: {
            CurrentLayout: 'Details Layout',
            Layouts: [
              {
                TableColumns: [
                  'name',
                  'language',
                  'has_wiki',
                  'pushed_at',
                  'github_stars',
                  'open_issues_count',
                  'github_watchers',
                  'updated_at',
                  'description',
                  'created_at',
                ],
                Name: 'Details Layout',
                AutoSizeColumns: true,
              },
            ],
          },
        },
      },
    }),
  ],
  initialState: {
    Dashboard: {
      ModuleButtons: ['FormatColumn', 'SettingsPanel'],
    },
    Theme: {CurrentTheme: 'dark'},
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-language',
          Scope: {
            ColumnIds: ['language'],
          },
          Style: {
            ForeColor: '#2966a8',
            FontWeight: 'Bold',
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Master Layout',
      Layouts: [
        {
          TableColumns: [
            'language',
            'year',
            'author',
            'version',
            'maintainer',
            'fileExtension',
          ],
          Name: 'Master Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Initialising the Details Grid

AdapTable provides an onDetailInit property.

This contains a function that is invoked when a Details Grid is initialised.

Hint

You can use this property to provide bespoke configuration for the Details Grid at run-time

Deep Dive

onDetailInit property

The onDetailInit property is exposed by Master Detail Plugin Options.

This takes the form of a function which is invoked when each Detail Grid initialises.

It receives the DetailInitContext object which includes details of the Master Row Node (and its data) as well as the Adaptable API:

Property	Description
data	The data in the Master Grid Row that was opened
primaryKeyValue	Primary Key Value of Master Grid Row that was opened
rowNode	Row Node in the Master Grid that was opened
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Master Detail - Detail Init

Fork Fork

This demo illustrates how to use onDetailInit to configure the Detail Grids in Master Detail Grids
The function calls the AdapTable API to close the Tool Panel (SideBar) in the Details Grid when it opens - but only if the Language is "JavaScript" or "TypeScript"

Expand to see how onDetailInit was used

onDetailInit(detailContext: DetailInitContext) {
  const detailAdapTableApi: AdaptableApi = detailContext.adaptableApi;
  console.log('detail instance created', detailAdapTableApi);
  detailAdapTableApi.eventApi.on('AdaptableReady', () =>
    console.log('detail grid ready')
  );
  detailAdapTableApi.toolPanelApi.closeAdapTableToolPanel()
},

import {
  AdaptableOptions,
  DetailInitContext,
  AdaptableApi,
} from '@adaptabletools/adaptable';
import masterDetailAgGridPlugin from '@adaptabletools/adaptable-plugin-master-detail-aggrid';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Master DetailInit',
  plugins: [
    masterDetailAgGridPlugin({
      detailAdaptableOptions: {
        adaptableId: 'Language Details Init',
        primaryKey: 'id',
        initialState: {
          Theme: {CurrentTheme: 'dark'},
          Layout: {
            CurrentLayout: 'Details Layout',
            Layouts: [
              {
                Name: 'Details Layout',
                TableColumns: [
                  'name',
                  'github_stars',
                  'language',
                  'github_watchers',
                  'updated_at',
                  'description',
                  'created_at',
                  'has_wiki',
                  'pushed_at',
                  'open_issues_count',
                ],
                AutoSizeColumns: true,
              },
            ],
          },
        },
      },
      onDetailInit(detailContext: DetailInitContext) {
        const detailAdapTableApi: AdaptableApi = detailContext.adaptableApi;
        detailAdapTableApi.eventApi.on('AdaptableReady', () =>
          console.log('detail grid ready')
        );
        if (
          detailContext.data['language'] === 'JavaScript' ||
          detailContext.data['language'] === 'TypeScript'
        ) {
          detailAdapTableApi.toolPanelApi.closeAdapTableToolPanel();
        }
      },
    }),
  ],
  initialState: {
    Dashboard: {
      ModuleButtons: ['FormatColumn', 'SettingsPanel'],
    },
    Theme: {CurrentTheme: 'dark'},
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-language',
          Scope: {
            ColumnIds: ['language'],
          },
          Style: {
            ForeColor: '#2966a8',
            FontWeight: 'Bold',
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Master Layout',
      Layouts: [
        {
          TableColumns: [
            'language',
            'year',
            'author',
            'version',
            'maintainer',
            'fileExtension',
          ],
          Name: 'Master Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Master Detail Plugin Options

Property	Description
detailAdaptableOptions	`AdaptableOptions` used in Detail Grids; all share same behaviour & State
onDetailInit	Function called when a Detail Grid is initialised, receives context including Adaptable Api

FAQ

I cannot export the Master-Details Grid? That is by design; Master-Detail Grids cannot be exported as a single export since the Detail "Grids" can be anything at all (however each Grid can be exported separately)

PreviousFormatting NextTree Data

Framework: