GRID FEATURE · PRO

Column menu

Column menus place sorting, filtering, and visibility controls near the current column. Keep them distinct from row actions in cell context menus and whole-column-list management in tool panels.

Markdown source Features

How it works and when to use it

Enable menus with columnMenu and configure items through columnMenuItems. Also set each column's sorting, filtering, and pinning capabilities so selected actions actually apply.

Using this feature in a product requires the Pro package and a valid license. Matching setting names do not enable Pro features in Community.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Installation and integration · Shared sample data

Example 1. Enable column header menus

Add column menus to a table with sorting and resizing enabled.

javascript

grid.columnMenu = true;
grid.defaultColDef = { sortable: true, resizable: true };

Verify the result: Open a header menu, such as Product or Quantity, to act on that column.

Example 2. Offer only administrator-approved actions

Read GridColumnMenuContext in columnMenuItems and return a GridColumnMenuItem array. For read-only reports, omit unnecessary modifications and focus on filtering and sorting.

Verify the result: Check that menu settings and actual API restrictions agree. APIs remain callable after a menu is removed, so validate permissions separately.

Example 3. Find hidden columns again

If users can hide columns through menus, also provide the sideBar columns panel or a reset button.

javascript

grid.sideBar = 'columns';

Verify the result: Users then have a way to restore hidden columns. Define defaults so hiding essential identifying columns does not make the table unclear.

Combining features and troubleshooting

Test with keyboard and mouse that header-click sorting does not conflict with opening the menu.

Read current menu state from actual column objects and column-state APIs. The initial columnDefs alone do not describe the current view.