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 dont 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. For example, only numeric columns have a Flashing Cell menu item, and if the column is already set to display flashing cells, the Turn Flashing Cell On option is replaced by Turn Flashing Cell Off.

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 and when 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 User Interface Options.

// Set the Column menu to display in this order
// 1. User items, 2. vendor grid items, 3. Adaptable's shipped items
adaptableOptions.userInterfaceOptions = {
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 Function - this makes it easy for developers to exclude those entries they dont wish to appear (see below for more details).

note

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

The full list of System Column Menu Entries is:

Menu EntryAdaptable FunctionWhere Displayed
Dashboard - ConfigureDashboardAll Columns
Dashboard - Expand / CollapseDashboardAll Columns
Dasbhoard - Dock / FloatDashboardAll Columns
Edit Calculated ColumnCalculated ColumnCalculated Columns
Create Cell Validation RuleCell ValidationAll Columns
Create Conditional StyleConditional StyleAll Columns
New / Edit Custom SortCustom SortAll Columns
Show / Hide Quick Filter BarsFilterAll Columns
Clear FilterFilterCurrently Filtered Columns
Turn Flashing Cell Off / OnFlashing CellsNumeric Columns
New / Edit Format ColumnFormat ColumnAll Columns
Edit Free Text ColumnFree Text ColumnFree Text Columns
New / Edit Gradient ColumnGradient ColumnNumeric Columns
Show Info - GridGrid InfoAll Columns
Show Info - ColumnGrid InfoAll Columns
Edit LayoutLayoutAll Columns
Hide ColumnLayoutAll Columns
Select - ColumnLayoutAll Columns
Select - Whole GridLayoutAll Columns
Show As / Remove CheckboxLayoutBoolean Columns
New / Edit Percent BarPercent BarNumeric Columns
New Plus Minus RulePlus MinusNumeric Columns
Show System StatusSystem StatusAll Columns
Clear Updated RowsUpdated RowAll (if updated rows)
Ungroup ColumnRow GroupingRow Grouped Columns

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

Menu EntryAdaptableFunctionWhere Displayed
View as Pie ChartChartAll Columns
View as SparklineChartNumeric Columns
Edit Sparkline ColumnSparkline CoumnSparkline Columns

Hiding System Column 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 User Interface 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.userInterfaceOptions = {
    showAdaptableColumnMenu: false
    };
    caution

    This will hide all AdapTable Column Menu items 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 recieves 2 arguments (Adaptable Menu Item and Menu Info) and returns a boolean.

    // Don't show System Column Menu entries for the 'counterparty' column
    // Don't show the 'Layout' or 'PieChart' menu entries - for any column
    adaptableOptions.userInterfaceOptions = {
    showAdaptableColumnMenu: (menuItem: AdaptableMenuItem, menuInfo: MenuInfo) => {
    if (menuInfo.Column.ColumnId === 'counterparty') {
    return false;
    }
    if (menuItem.FunctionName === 'Layout' || menuItem.FunctionName === '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 entry needs also to include the JavaScript function that should be invoked by AdapTable when the menu entry is selected at run-time.

As with all instances where a JavaScript function needs to be provided to AdapTable, this is done in 2 steps:

note

Predefined Config is stored as JSON so cannot include JavaScript functions (as they cannot be stringifed)

  1. Provide a custom, named implementation of the UserMenuItemClickedFunction in the User Functions section of Adaptable Options.

  2. Reference that function by name in the User Interface section of Predefined Config.

// Create 2 User Menu Items - providing 2 properties:
// a. a Label - that will appear in the Menu Entry
// b. the name of the function to invoke when the entry is clicked
let demoConfig: PredefinedConfig = {
UserInterface: {
ColumnMenuItems: [
{
Label: 'Collapse Dashboard',
UserMenuItemClickedFunction: 'collapseDashboard'
},
{
Label: 'Clear Column Filters',
UserMenuItemClickedFunction: 'clearFilters'
},
],
},
};
// Provide 2 User Menu Item Functions
// a. Collapse the Dashboard - using the Dashboard API
// b. Clear all the Column Filters - using the Column Filter API
// Note that that type of the UserFunction is 'UserMenuItemClickedFunction'
// and that the name matches the one provided in Predefined Config above
adaptableOptions.userFunctions=[
{
type: 'UserMenuItemClickedFunction',
name: 'collapseDashboard',
handler(menuInfo) {
menuInfo.AdaptableApi.dashboardApi.collapseDashboard();
},
},
{
type: 'UserMenuItemClickedFunction',
name: 'clearFilters',
handler(menuInfo) {
menuInfo.AdaptableApi.filterApi.clearAllColumnFilter();
}
},
]

Hiding User Column Menu Entries

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, AdapTable provides a function enabling devs to 'hide' Column Menu entries based on the current context.

note

Predefined Config is stored as JSON so cannot include JavaScript functions (as they cannot be stringifed)

This is done in a similar 2 steps to creating them:

  1. Provide a custom, named implementation of the UserMenuItemShowPredicate in the User Functions section of Adaptable Options.

  2. Reference that predicate by name in the User Interface section of Predefined Config.

// Create a User Menu Item to Sort a column providing 2 User Functions
// a. 'UserMenuItemClickedFunction' - will be invoked when the Menu Entry is clicked
// b. 'UserMenuItemShowPredicate' - will be invoked when the Menu displays
let demoConfig: PredefinedConfig = {
UserInterface: {
ColumnMenuItems: [
{
Label: 'Sort Column',
Icon: '<img width="15" height="15" src="../../images/sort.png">',
UserMenuItemClickedFunction: 'sortColumn',
UserMenuItemShowPredicate: 'isSortable',
},
],
},
};
// Provide 2 User Functions
// Both rely on the 'MenuInfo' object to retrieve details about the current column
// a. 'UserMenuItemClickedFunction' - to sort the column (using Grid API)
// b. 'UserMenuItemShowPredicate' - to only display the entry for sortable columns
// Note that that both the type of and name of each UserFunction matches
// what is provided in Predefined Config above
adaptableOptions.userFunctions=[
{
type: 'UserMenuItemClickedFunction',
name: 'sortColumn',
handler(menuInfo) {
const columnSort: ColumnSort = {
ColumnId: menuInfo.Column.ColumnId,
SortOrder: 'Asc',
};
menuInfo.AdaptableApi.gridApi.setColumnSorts([columnSort])
},
},
{
type: 'UserMenuItemShowPredicate',
name: 'isSortable',
handler(menuInfo) {
return menuInfo.Column.Sortable;
},
},
]

Editing User Column Menu Entries

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, AdapTable provides a function enabling devs to change the label of a Menu Entry based on the current context.

note

Predefined Config is stored as JSON so cannot include JavaScript functions (as they cannot be stringifed)

This is done in a similar 2 steps to creating them:

  1. Provide a custom, named implementation of the UserMenuItemLabelFunction in the User Functions section of Adaptable Options.

  2. Reference that predicate by name in the User Interface section of Predefined Config.

tip

If the function returns an empty string then AdapTable will revert to using the value of the Label property

// Create the Menu Item referencing the 'setLabel' UserMenuItemLabelFunction
// Note the Label value of 'Sort Column' will be used by AdapTable
// if the UserMenuItemLabelFunction returns an empty string
let demoConfig: PredefinedConfig = {
UserInterface: {
ColumnMenuItems: [
{
Label: 'Sort Column',
Icon: '<img width="15" height="15" src="../../images/sort.png">',
UserMenuItemClickedFunction: 'sortColumn',
UserMenuItemShowPredicate: 'isSortable',
UserMenuItemLabelFunction: 'setLabel',
},
],
},
};
// Provide 3 User Functions
// All rely on the 'MenuInfo' object to retrieve details about the current column
// a. 'UserMenuItemClickedFunction' - to sort the column (using Grid API)
// b. 'UserMenuItemShowPredicate' - to only display the entry for sortable columns
// c. 'UserMenuItemLabelFunction' to set label text based on whether column is sorted
// Note that that both the type of and name of each UserFunction matches
// what is provided in Predefined Config above
adaptableOptions.userFunctions=[
{
type: 'UserMenuItemClickedFunction',
name: 'sortColumn',
handler(menuInfo) {
const columnSorts = menuInfo.AdaptableApi.gridApi.getColumnSorts();
if (columnSorts.find(cs => cs.ColumnId == menuInfo.Column.ColumnId)) {
let customSort: ColumnSort = {
ColumnId: menuInfo.Column.ColumnId,
SortOrder: 'Asc',
};
menuInfo.AdaptableApi.gridApi.setColumnSorts([customSort]);
} else {
menuInfo.AdaptableApi.gridApi.setColumnSorts([]);
}
},
},
{
type: 'UserMenuItemShowPredicate',
name: 'isSortable',
handler(menuInfo) {
return menuInfo.Column.Sortable;
},
},
{
type: 'UserMenuItemLabelFunction',
name: 'setSortColumnLabel',
handler(menuInfo) {
const columnSorts = menuInfo.AdaptableApi.gridApi.getColumnSorts();
return columnSorts.find(cs => cs.ColumnId == menuInfo.Column.ColumnId)
? 'Unsort column'
: '';
},
},
]

More Information