Column Menu

The Column Menu appears in every column in AdapTable and provides quick access to useful functionality.

It contains a mix of entries applicable either to the current Column or to the Grid as a whole.

note

If you are using AG Grid Enteprise (with the correct modules) then AdapTable will insert its column menu items into the AG Grid menu.

If you are using AG Grid Community or don't have access to the AG Grid column menu, AdapTable will create a bespoke menu for you.

The options in the menu vary depending on the data type of column and the current state of that column.

The Column Header Menu is accessed by clicking the 3 horizontal lines in the Column Header.

tip

To make the 3 horizontal lines always visible in the Column Header set suppressMenuHide to true in GridOptions.

Column Menu Entries

There are 3 types of menu entries that can appear in the Column Menu:

Vendor Grid Column Menu Entries - shipped by the underlying Vendor Grid
System Column Menu Entries - shipped by AdapTable (which you can choose to hide)
User Column Menu Entries - provided by developers at run-time (with functions available for you to control where, when and how they appear)

Items Order

The default order for displaying the 3 sections is: 'vendor', 'adaptable', 'user'.

However this can easily be changed via the columnMenuOrder property in Menu Options.

// Set the Column menu to display in this order
// 1. User items, 2. vendor grid items, 3. Adaptable's shipped items
adaptableOptions.menuOptions = {
  columnMenuOrder: ['user', 'vendor', 'adaptable'],
};

caution

When setting this property, ensure to include all 3 values, as missing entries will be absent from the menu

System Column Menu Entries

AdapTable, by default, includes a number of entries in the Column Menu.

Each entry is associated with a different AdapTable Module - this makes it easy for developers to exclude those entries they don't wish to appear (see below for more details).

note

Because there are 4 Dashboard related Menu Items they are grouped into a single Sub Menu

The full list of System Column Menu Entries is:

Menu Entry	Module	Where Displayed
Dashboard -> Configure	Dashboard	All Columns
Dashboard -> Expand / Collapse	Dashboard	All Columns
Dashboard -> Dock / Float	Dashboard	All Columns
Dashboard -> Hide / Show	Dashboard	All Columns
Add / Remove Flashing Alerts	Alerts	All Columns
Edit Calculated Column	Calculated Column	Calculated Columns
Create / Edit Conditional Style	Conditional Style	All Columns
New / Edit Custom Sort	Custom Sort	All Columns
Show / Hide Quick Filter Bars	Filter	All Columns
Clear Filter	Filter	Currently Filtered Columns
New / Edit Format Column	Format Column	All Columns
Show As / Remove Checkbox	Format Column	Boolean Columns
Edit Free Text Column	Free Text Column	Free Text Columns
Show Info -> Grid	Grid Info	All Columns
Show Info -> Column	Grid Info	All Columns
Edit Layout	Layout	All Columns
Hide Column	Layout	All Columns
Select -> Column	Layout	All Columns
Select -> Whole Grid	Layout	All Columns
New Plus Minus Rule	Plus Minus	Numeric Columns
Show System Status	System Status	All Columns
Ungroup Column	Row Grouping	Row Grouped Columns

If running the Chart Plugin the following Column Menu Entries are also available:

Menu Entry	Module	Where Displayed
View as Pie Chart	Chart	All Columns
View as Sparkline	Chart	Numeric Columns
Edit Sparkline Column	Sparkline Coumn	Sparkline Columns

Hiding System Menu Entries

Developers can, at design-time, choose not to display some (or all) of the shipped Column Menu entries.

This can be done in 2 ways - both via the showAdaptableColumnMenu property in Menu Options:

Boolean Value

Simply provide a value of false (the default is true) when setting the property.

// Hide the Column Menu in ALL circumstances
adaptableOptions.menuOptions = {
  showAdaptableColumnMenu: false
};

caution

This will hide all System Column Menu entries for all columns

Custom Function Implementation

Provide a custom implementation for the function allowing you to choose for each column and menu item combination whether to show it or not.

The function receives 2 arguments (Adaptable Menu Item and Menu Context) and returns a boolean:

(menuItem: AdaptableMenuItem, menuContext: MenuContext) => boolean;

And can be used as follows:

// Don't show System Column Menu entries for the 'counterparty' column
// Don't show the 'Layout' or 'PieChart' menu entries - for any column
adaptableOptions.menuOptions = {
  showAdaptableColumnMenu: (menuItem: AdaptableMenuItem, menuContext: MenuContext) => {
  if (menuContext.adaptableColumn.ColumnId === 'counterparty') {
      return false;
    }
    if (menuItem.module === 'Layout' || menuItem.module === 'PieChart') {
      return false;
    }
    return true;
  },
};

User Column Menu Entries

Developers can add their own custom entries to the Column Menu at design-time.

Each User Column Menu is of type User Menu Item defined as follows:

Property	Description
disabled	Function to evaluate whether Menu Item is enabled
hidden	Function to evaluate whether Menu Item is visible
icon	Optional icon to show in the Menu Item
label	The text that will appear in the Menu Item
onClick	Function to invoke when the Menu Item is clicked
subMenuItems	Array of Menu Items, enabling creation of (limitless levels of) sub menus

OnClick Function

The onClick function property is invoked by Adaptable when the menu item is selected by the user.

It takes a Menu Context object and returns void:

onClick?: (menuContext: MenuContext) => void;

Hidden Predicate

It might not always make sense for a User Column Menu entry to appear (e.g. it might be applicable only to numeric columns).

For this reason, the User Menu Item includes a hidden function enabling devs to 'hide' Column Menu entries based on the menu context.

It takes a Menu Context object and returns a boolean:

hidden?: (menuContext: MenuContext) => boolean;

Disabled Predicate

An alternative to hiding the Menu Item altogether is to disable it in certain circumstances.

Therefore, the User Menu Item also includes a disabled function which disables Column Menu entries based on the menu context.

Again, it takes a Menu Context object and returns a boolean:

disabled?: (menuContext: MenuContext) => boolean;

Label Property / Function

Occasionally you might want the label of the User Menu Entry to vary depending on the state of your grid or other factors.

For this reason, as well as accepting a normal string value the label property can also accept a function.

It takes a Menu Context object and returns a string:

label: string | ((menuContext: MenuContext) => string);;

Example

This example shows all 4 functions at work:

 adaptableOptions.menuOptions = {
    columnMenuItems: [
      {
        label: (menuContext: MenuContext) => {
          return menuContext.AdaptableApi.dashboardApi.isDashboardCollapsed()
            ? 'Expand Dashboard'
            : 'Collapse Dashboard';
        },
        onClick: (menuContext: MenuContext) => {
          menuContext.AdaptableApi.dashboardApi.isDashboardCollapsed()
            ? adaptableApi.dashboardApi.expandDashboard()
            : adaptableApi.dashboardApi.collapseDashboard();
        },
        hidden: (menuContext: MenuContext) => {
          return menuContext.Column.ColumnId == 'currency';
        },
        disabled: (menuContext: MenuContext) => {
          return menuContext.Column.ColumnId == 'counterparty';
        },
      },
      },
    ],
  };

Menu Context Object

Many of the functions regarding rendering, clicking and editing Menu Items use a Menu Context object.

This provides full information and the current column, cell and grid selection and is defined as follows:

Property	Description
adaptableApi	The Adaptable Api - included as a convenience
adaptableColumn	Current Adaptable Column
gridCell	Cell that has been clicked; contains cell value
isGroupedNode	Whether current row node is grouped
isRowGroupColumn	Whether current Column is Row Group
isSelectedCell	Whether cell that was clicked is also currently selected
isSingleSelectedColumn	Whether Column that was clicked is only column with selected cells
primaryKeyValue	Value of Primary Key column in current row
rowNode	Current AG Grid row node
selectedCellInfo	Currently selected cells in the grid
selectedRowInfo	Currently selected rows in the grid
vendorColumn	Current Vendor Grid Column

note

tip

Column Menu Entries#

Items Order#

caution

System Column Menu Entries#

note

Hiding System Menu Entries#

Boolean Value#

caution

Custom Function Implementation#

User Column Menu Entries#

OnClick Function#

Hidden Predicate#

Disabled Predicate#

Label Property / Function#

Example#

Menu Context Object#

More Information#

Column Menu Entries

Items Order

System Column Menu Entries

Hiding System Menu Entries

Boolean Value

Custom Function Implementation

User Column Menu Entries

OnClick Function

Hidden Predicate

Disabled Predicate

Label Property / Function

Example

Menu Context Object

More Information