Configuring the Column Menu

AdapTable Version:

Framework:

Summary

Developers have full control over the Column Menu including the ability to:
- reorder Menu Items
- restructure Menu Items
- remove Menu Items

The Column Menu can be fully configured at design-time to meet users' requirements.

This is done via the customColumnMenu function property in Column Menu Options.

The property is a function that receives, in its context, all the information about the AG Grid and AdapTable Column Menu items and structure, to facilitate full menu manipulation.

Deep Dive

Configuring the Column Menu using the customColumnMenu property

The customColumnMenu property is a function which:

receives a CustomColumnMenuContext object
returns a collection of CustomColumnMenuItem objects:

customColumnMenu?: (menuContext: CustomColumnMenuContext<TData>) => CustomColumnMenuItem[];

CustomColumnMenuContext

The CustomColumnMenuContext which the function receives, contains 4 collections of default menu items & structures:

Property	Description
defaultAdaptableMenuItems	Flat list of all available AdapTable Menu Items
defaultAdaptableMenuStructure	Default structure of Adaptable Menu Items
defaultAgGridMenuItems	Flat list of all available AG Grid Menu Items
defaultAgGridMenuStructure	Default structure of AG Grid Menu Items
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

And it extends the ColumnMenuContext object which contains a few useful properties:

Property	Description
adaptableColumn	Current AdapTable Column
agGridColumn	Current AG Grid Column
isRowGroupColumn	Whether current Column is Row Group
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

CustomColumnMenuItem

The CustomColumnMenuItem which the function returns is slightly more complicated as it can be formed of many different objects, to enable a rich menu experience:

export type CustomColumnMenuItem =
  | AgGridMenuItem<AgGridColumnMenuItemType>
  | AdaptableSystemColumnMenuItem<AdaptableColumnMenuItemName>
  | UserColumnMenuItem
  | '-'
  | {
      menuType: 'Group';
      label: string;
      subMenuItems: CustomColumnMenuItem[];
      disabled?: boolean;
      icon?: AdaptableIcon;
    };

As can be seen it can include 3 types of Menu Items (as well as a separator):

AG Grid Menu Item
AdapTable System Column Menu Item
User Column Menu Item

AG Grid Menu Item

The AG Grid Menu Item contains a couple of properties

Property	Description
menuType	Type of Menu - always 'AgGrid'
name	Name of the Menu Type

AdapTable System Column Menu Item

The AdapTable System Column Menu Item has a single MenuType property...

Property	Description
menuType	Type of Menu - always 'Adaptable'

...but also extends the more verbose AdapTable Menu Item object which contains these properties:

Property	Description
category	Category of Adaptable Menu Item: Module, General, Group or CustomSettingsPanel
icon	Icon to display in Menu Item
isVisible	Whether menu item is visible
label	Text that appears in the menu
name	Unique name for the Menu Item
onClick	Function to invoke when (custom) menu item is clicked
subItems	Sub Menu Items to display

User Column Menu Item

The User Column Menu Item - used for providing bespoke Menu Items - is defined as follows:

Property	Description
disabled	Whether menu item is disabled
hidden	Whether menu item is hidden
icon	Optional icon to display
label	Text to appear in the Menu Item
menuType	Type of Menu - always 'User'
onClick	Function invoked when the Menu Item is clicked
subMenuItems	Array of Menu Items, enabling limitless levels of menus

The default order of the Items in the Column Menu is AG Grid Menu items first, then AdapTable Menu items.

But the menu can be re-ordered by providing a custom implementation of customColumnMenu.

This example shows how to reorder the Menu Items in the Column Menu
When opening the Column Menu in the Name column, the order is: AG Grid Menu Items, Open Settings Panel, other AdapTable Menu Items
When opening the Column Menu in all other columns, the order is: Open Settings Panel, AG Grid Menu Items, other AdapTable Menu Items

Expand to see the Menu Options configuration

columnMenuOptions: {
  customColumnMenu: (context: CustomColumnMenuContext) => {
    const {
      defaultAgGridMenuStructure,
      defaultAdaptableMenuStructure,
      adaptableColumn,
    } = context;
    const openSettingsPanelMenuItem = defaultAdaptableMenuStructure.find(
      (item) => item !== '-' && item.name === 'settings-panel-open'
    );
    const otherAdaptableMenuItems = defaultAdaptableMenuStructure.filter(
      (item) => item === '-' || item.name !== 'settings-panel-open'
    );
    if (adaptableColumn.columnId === 'name') {
      return [
        openSettingsPanelMenuItem,
        '-',
        ...defaultAgGridMenuStructure,
        '-',
        ...otherAdaptableMenuItems,
      ];
    }
    return [
      ...defaultAgGridMenuStructure,
      '-',
      openSettingsPanelMenuItem,
      '-',
      ...otherAdaptableMenuItems,
    ];
  },
},

Try It Out

Open the Column Menu for a cell in the Name Column and see how it differs to opening the Column Menu in other Columns

The customColumnMenu property can also be used restructure the Menu Items in line with user requirements.

For instance, menus can be grouped or nested differently to the default structure provided by AdapTable.

This example shows how to restructure the Menu Items in the Column Menu
In each Column Menu, all the AG Grid items have been grouped together into one Menu Item (and placed first)
Additionally, some of the AdapTable items have been grouped together in 'Info' and 'Actions' sub menus

Expand to see the Menu Options configuration

columnMenuOptions: {
  customColumnMenu: (context: CustomColumnMenuContext) => {
    const {defaultAgGridMenuItems, defaultAdaptableMenuItems} = context;

    const infoItems: AdaptableSystemColumnMenuItem<AdaptableColumnMenuItemName>[] =
      [];
    const actionsItems: AdaptableSystemColumnMenuItem<AdaptableColumnMenuItemName>[] =
      [];
    const otherItems: AdaptableSystemColumnMenuItem<AdaptableColumnMenuItemName>[] =
      [];
    defaultAdaptableMenuItems.forEach(item => {
      if (item.category === 'ColumnInfo' || item.category === 'GridInfo') {
        infoItems.push(item);
      } else if (
        item.label === 'Show System Status' ||
        item.label === 'See Cell Summary'
      ) {
        actionsItems.push(item);
      } else {
        otherItems.push(item);
      }
    });

    return [
      {
        menuType: 'Group',
        label: 'AG Grid Actions',
        subMenuItems: defaultAgGridMenuItems,
      },
      '-',
      {
        menuType: 'Group',
        label: 'Info',
        subMenuItems: infoItems,
      },
      {
        menuType: 'Group',
        label: 'Actions',
        subMenuItems: actionsItems,
      },
      '-',
      ...otherItems,
    ];
  },
},

import {
  AdaptableColumnMenuItemName,
  AdaptableOptions,
  AdaptableSystemColumnMenuItem,
  CustomColumnMenuContext,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Column Menu - Restructuring',
  columnMenuOptions: {
    customColumnMenu: (context: CustomColumnMenuContext) => {
      const {defaultAgGridMenuItems, defaultAdaptableMenuItems} = context;

      const infoItems: AdaptableSystemColumnMenuItem<AdaptableColumnMenuItemName>[] =
        [];
      const actionsItems: AdaptableSystemColumnMenuItem<AdaptableColumnMenuItemName>[] =
        [];
      const otherItems: AdaptableSystemColumnMenuItem<AdaptableColumnMenuItemName>[] =
        [];
      defaultAdaptableMenuItems.forEach(item => {
        if (item.category === 'ColumnInfo' || item.category === 'GridInfo') {
          infoItems.push(item);
        } else if (
          item.label === 'Show System Status' ||
          item.label === 'See Cell Summary'
        ) {
          actionsItems.push(item);
        } else {
          otherItems.push(item);
        }
      });

      return [
        {
          menuType: 'Group',
          label: 'AG Grid Actions',
          subMenuItems: defaultAgGridMenuItems,
        },
        '-',
        {
          menuType: 'Group',
          label: 'Info',
          subMenuItems: infoItems,
        },
        {
          menuType: 'Group',
          label: 'Actions',
          subMenuItems: actionsItems,
        },
        '-',
        ...otherItems,
      ];
    },
  },
  initialState: {
    Dashboard: {
      Tabs: [{Name: 'Demo', Toolbars: ['SystemStatus']}],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['SystemStatus'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'updated_at',
            'description',
            'created_at',
            'has_wiki',
            'pushed_at',
            'open_issues_count',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

The customColumnMenu property can also be used to remove some Menu Items from the Column Menu.

Removing Menu Items can be done in 2 ways:

Hiding an entire section of the Column Menu (either AdapTable or AG Grid)
Hiding particular Column Menu Items

This example hides specific Menu items from some Column Menus:
- Name column displays only the Settings Panel & (the 5)Layout related items
- Github Stars displays only the AdapTable items
- Github Watchers displays only the AG Grid items
- For all other columns, the default Column Menu items are displayed

Expand to see the Menu Options configuration

columnMenuOptions: {
  customColumnMenu: (context: CustomColumnMenuContext) => {
    if (context.adaptableColumn.columnId === 'name') {
      return context.defaultAdaptableMenuItems.filter(
        item => item.category === 'SettingsPanel' || item.category === 'Layout'
      );
    }
    if (context.adaptableColumn.columnId === 'github_stars') {
      return context.defaultAdaptableMenuStructure;
    }
    if (context.adaptableColumn.columnId === 'github_watchers') {
      return context.defaultAgGridMenuStructure;
    }
    return [
      ...context.defaultAgGridMenuStructure,
      '-',
      ...context.defaultAdaptableMenuStructure,
    ];
  },
},

Row-Grouped Columns

The ColumnMenuObject used in the Column Menu includes an isRowGroupColumn property.

This can be used to provide specific Column Menu Items for Row-Grouped Columns.

This example hides all AG Grid Menu items in Row Grouped Column's Column Menu other than 3: Un-Group All, Expand All Row Groups & Collapse All Row Groups

Expand to see the Menu Options configuration

columnMenuOptions: {
  customColumnMenu: (context: CustomColumnMenuContext) => {
    const {defaultAgGridMenuStructure} = context;
    if (context.isRowGroupColumn) {
      const rowUngroupMenuItem = defaultAgGridMenuStructure.find(
        item => item.menuType === 'AgGrid' && item.name === 'rowUnGroup'
      );
      const expandAllMenuItem = defaultAgGridMenuStructure.find(
        item => item.menuType === 'AgGrid' && item.name === 'expandAll'
      );
      const contractAllMenuItem = defaultAgGridMenuStructure.find(
        item => item.menuType === 'AgGrid' && item.name === 'contractAll'
      );
      return [
        rowUngroupMenuItem,
        expandAllMenuItem,
        contractAllMenuItem,
      ] as any;
    } else {
      return [
        ...context.defaultAgGridMenuStructure,
        '-',
        ...context.defaultAdaptableMenuStructure,
      ];
    }
  },
},

PreviousColumn Menu NextCustom Column Menu Items

Framework:

Configuring the Column Menu

Summary

Deep Dive

Configuring the Column Menu using the customColumnMenu property

Reordering Menu Items

Expand to see the Menu Options configuration

Restructuring Menu Items

Expand to see the Menu Options configuration

Removing Menu Items

Expand to see the Menu Options configuration

Row-Grouped Columns

Expand to see the Menu Options configuration