Add a per-column header menu to the Angular Data Grid that gathers sort, pin, move and hide actions behind one accessible ⋮ button, and customize its items with a builder.
The column menu collects a column’s actions — sort, pin, move, hide — behind a single ⋮ button in the header, so users don’t have to discover drag-and-drop. It is the keyboard-accessible path to sorting, reordering and pinning, and it only shows the actions you’ve actually enabled.
Column header menu
columnMenu adds a ⋮ button to each header cell with the column’s actions in
one place — Sort ascending/descending/Unsort, Pin left/right/Unpin, Move
left/right and Hide column. Items appear only for enabled features
(sorting, columnPinning, columnOrder, columnVisibility) and respect
per-column sortable/movable/hideable opt-outs; a column with no available
action gets no button. Related actions are separated into groups by a divider.
The menu follows the ARIA menu pattern (arrow keys, Home/End, Escape restores
focus) — Move left/right is the keyboard-accessible way to reorder columns,
complementing drag & drop. All labels are translatable via labels.
import { Component } from '@angular/core'
import { DataGridComponent } from '@coreui/angular-data-grid'
import type { DataGridColumn, DataGridItem } from '@coreui/angular-data-grid'
const firstNames = ['Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank', 'Grace', 'Heidi', 'Ivan', 'Judy']
const lastNames = ['Smith', 'Jones', 'Brown', 'Taylor', 'Wilson', 'Davies', 'Evans', 'Thomas']
const roles = ['admin', 'editor', 'viewer']
@Component({
selector: 'docs-data-grid-column-menu-example',
imports: [DataGridComponent],
template: `
<c-data-grid
[columns]="columns"
[items]="items"
[itemKey]="itemKey"
[columnMenu]="true"
[columnOrder]="true"
[columnPinning]="true"
[columnVisibility]="true"
[pagination]="{ pageSize: 10 }"
/>
`
})
export class DataGridColumnMenuExample {
readonly columns: DataGridColumn[] = [
{
key: 'id', label: '#', width: 90, movable: false, hideable: false
},
{ key: 'name', label: 'Name' },
{ key: 'email', label: 'Email', style: { width: '30%' } },
{ key: 'role', label: 'Role', width: 140 }
]
readonly items: DataGridItem[] = Array.from({ length: 1000 }, (_, i) => {
const name = `${firstNames[i % firstNames.length]} ${lastNames[i % lastNames.length]}`
return {
id: i + 1,
name,
email: `${name.toLowerCase().replace(' ', '.')}${i}@example.com`,
role: roles[i % roles.length]
}
})
readonly itemKey = (item: DataGridItem) => String(item.id)
}Customize the menu
Bind a builder function to columnMenu to take full control of the items.
It receives the column and the built-in actions for that column, and returns the
final list — so you can reorder, drop or add items, per column:
columnMenu: ({ column, defaultActions }) => DataGridMenuAction[]- Reorder — return
defaultActionsin a different order. - Hide an item — filter it out by
key('sort-asc','sort-desc','clear-sort','pin-left','pin-right','unpin','move-left','move-right','hide'). - Add your own — push a new action object.
- Per column — branch on
column(the column definition).
A column whose builder returns at least one action shows the ⋮ button, even with no built-in feature enabled. Each action has this shape:
{
key: string, // unique id, also used to filter built-ins
label: string, // menu item text
icon?: TemplateRef<unknown>, // optional icon template
disabled?: boolean, // render but don't run
group?: string, // items with different groups get a divider between them
run: () => void // invoked on click; the menu closes first
}Unlike the vanilla and React grids there are no SVG strings or sanitizer here:
icon overrides are Angular templates. Pass a <ng-template> (a TemplateRef)
to any of the icon inputs — columnMenuIcon, sortAscendingIcon,
sortDescendingIcon, sortNeutralIcon, pinLeftIcon, pinRightIcon,
unpinIcon, moveLeftIcon, moveRightIcon, hideColumnIcon — to replace a
built-in icon, and use the same TemplateRef for a custom action’s icon. The
example below declares an <ng-template #copyIcon> and reads it with
viewChild.required, then appends a “Copy header” action that copies the
column’s label to the clipboard.
import { Component, TemplateRef, viewChild } from '@angular/core'
import { DataGridComponent } from '@coreui/angular-data-grid'
import type { DataGridColumn, DataGridColumnMenuBuilder, DataGridItem } from '@coreui/angular-data-grid'
const roles = ['admin', 'editor', 'viewer']
@Component({
selector: 'docs-data-grid-column-menu-custom-example',
imports: [DataGridComponent],
template: `
<ng-template #copyIcon>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512">
<path
fill="currentColor"
d="M472 16H160a24.027 24.027 0 0 0-24 24v312a24.027 24.027 0 0 0 24 24h312a24.027 24.027 0 0 0 24-24V40a24.027 24.027 0 0 0-24-24m-8 328H168V48h296Z"
/>
<path
fill="currentColor"
d="M344 464H48V168h56v-32H40a24.027 24.027 0 0 0-24 24v312a24.027 24.027 0 0 0 24 24h312a24.027 24.027 0 0 0 24-24v-64h-32Z"
/>
</svg>
</ng-template>
<c-data-grid
[columns]="columns"
[items]="items"
[itemKey]="itemKey"
[columnMenu]="columnMenu"
[columnOrder]="true"
[columnPinning]="true"
[columnVisibility]="true"
[pagination]="{ pageSize: 10 }"
/>
`
})
export class DataGridColumnMenuCustomExample {
private readonly copyIcon = viewChild.required<TemplateRef<unknown>>('copyIcon')
readonly columns: DataGridColumn[] = [
{
key: 'id', label: '#', width: 90, movable: false, hideable: false
},
{ key: 'name', label: 'Name' },
{ key: 'email', label: 'Email', style: { width: '30%' } },
{ key: 'role', label: 'Role', width: 140 }
]
readonly items: DataGridItem[] = Array.from({ length: 1000 }, (_, i) => ({
id: i + 1,
name: `User ${i + 1}`,
email: `user${i + 1}@example.com`,
role: roles[i % roles.length]
}))
readonly itemKey = (item: DataGridItem) => String(item.id)
// A builder receives the built-in actions plus the column, and returns the
// final list — filter items, reorder them, or add your own. Custom icons are
// passed as a TemplateRef, like the grid's own menu icons.
readonly columnMenu: DataGridColumnMenuBuilder = ({ column, defaultActions }) => [
...defaultActions,
{
key: 'copy-header',
label: 'Copy header',
group: 'custom',
icon: this.copyIcon(),
run: () => navigator.clipboard?.writeText(column.label ?? column.key)
}
]
}Options
| Option | Type | Default | Description |
|---|---|---|---|
columnMenu | boolean | ((ctx) => DataGridMenuAction[]) | false | Adds a per-column header menu. true builds it from the enabled features (sort/pin/move/hide); a builder ({ column, defaultActions }) => actions returns the final item list (see Customize the menu). |
Every menu and header icon is overridable with its own TemplateRef input
(<ng-template>): columnMenuIcon, sortAscendingIcon, sortDescendingIcon,
sortNeutralIcon, pinLeftIcon, pinRightIcon, unpinIcon, moveLeftIcon,
moveRightIcon and hideColumnIcon. They default to the CoreUI icon set.
The default menu’s items depend on which features are on
(sorting, pinning,
ordering & visibility). Its labels come from
labels; see
Accessibility for the keyboard model.