Overview
Columns can be hidden with the isHidden flag. The grid ships with built-in header menu
items — 'hideColumn' (hide the right-clicked column) and 'columnVisibility' (submenu with a toggle per column) — or you can drive it entirely from code.
CV01 Interactive Demo
Right-click any header for the Hide Column or Column Visibility menu, or use the buttons below.
Hidden columns: None
CV02 Context Menu
Add the predefined items to headerContextMenu:
Enabling the Menu
The 'columnVisibility' submenu is built dynamically from the current columns. Each entry
shows ☐ / ☑ based on column.isHidden.
CV03 Programmatic API
Mutate column.isHidden and reassign the array to trigger a re-render:
Toggle Visibility from Code
Why reassign? The grid tracks changes via the
columns setter. Mutating a column in place won't
trigger a render — spreading the array ([...grid.columns]) and reassigning does.API Reference
| Property | Type | Description |
|---|---|---|
column.isHidden | boolean | Hide a column while keeping it in the columns array so visibility toggles can still reference it. |
grid.headerContextMenu | (string | object)[] | Predefined items and custom entries. Include 'hideColumn' and/or 'columnVisibility' to expose visibility control. |
'hideColumn' | string | Predefined menu item — hides the column the menu was opened on. |
'columnVisibility' | string | Predefined submenu — auto-generates one toggle per column plus a Show all row. |