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 EntryModuleWhere Displayed
Dashboard -> ConfigureDashboardAll Columns
Dashboard -> Expand / CollapseDashboardAll Columns
Dashboard -> Dock / FloatDashboardAll Columns
Dashboard -> Hide / ShowDashboardAll Columns
Add / Remove Flashing AlertsAlertsAll Columns
Edit Calculated ColumnCalculated ColumnCalculated Columns
Create / Edit Conditional StyleConditional StyleAll Columns
New / Edit Custom SortCustom SortAll Columns
Show / Hide Quick Filter BarsFilterAll Columns
Clear FilterFilterCurrently Filtered Columns
New / Edit Format ColumnFormat ColumnAll Columns
Show As / Remove CheckboxFormat ColumnBoolean Columns
Edit Free Text ColumnFree Text ColumnFree Text Columns
Show Info -> GridGrid InfoAll Columns
Show Info -> ColumnGrid InfoAll Columns
Edit LayoutLayoutAll Columns
Hide ColumnLayoutAll Columns
Select -> ColumnLayoutAll Columns
Select -> Whole GridLayoutAll Columns
New Plus Minus RulePlus MinusNumeric Columns
Show System StatusSystem StatusAll Columns
Ungroup ColumnRow GroupingRow Grouped Columns

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

Menu EntryModuleWhere Displayed
View as Pie ChartChartAll Columns
View as SparklineChartNumeric Columns
Edit Sparkline ColumnSparkline CoumnSparkline 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:

PropertyDescription
disabledFunction to evaluate whether Menu Item is enabled
hiddenFunction to evaluate whether Menu Item is visible
iconOptional icon to show in the Menu Item
labelThe text that will appear in the Menu Item
onClickFunction to invoke when the Menu Item is clicked
subMenuItemsArray 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:

PropertyDescription
adaptableApiThe Adaptable Api - included as a convenience
adaptableColumnCurrent Adaptable Column
gridCellCell that has been clicked; contains cell value
isGroupedNodeWhether current row node is grouped
isRowGroupColumnWhether current Column is Row Group
isSelectedCellWhether cell that was clicked is also currently selected
isSingleSelectedColumnWhether Column that was clicked is only column with selected cells
primaryKeyValueValue of Primary Key column in current row
rowNodeCurrent AG Grid row node
selectedCellInfoCurrently selected cells in the grid
selectedRowInfoCurrently selected rows in the grid
vendorColumnCurrent Vendor Grid Column

More Information