Vue Data Grid Column Menu

Column menu

Add a per-column header menu to the Data Grid that gathers sort, pin, move and hide actions behind one accessible ⋮ button, and customize its items with a builder.

On this page

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-menu 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.

vue

<script setup lang="ts">
import { CDataGrid } from '@coreui/vue-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']

const items = 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]
  }
})

const columns = [
  {
    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 }
]
</script>

<template>
  <CDataGrid
    :columns="columns"
    :items="items"
    :item-key="(item) => String(item.id)"
    column-menu
    column-order
    column-pinning
    column-visibility
    :pagination="{ pageSize: 10 }"
  />
</template>

Pass a builder function to column-menu 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:

:column-menu="({ column, defaultActions }) => CDataGridMenuAction[]"

Reorder — return defaultActions in 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?: CDataGridIcon,     // a VNode or a () => VNode factory
  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
}

Icons are native Vue VNodes (CDataGridIcon = VNode | (() => VNode)) — build them with h(...) or a render function; there is no SVG-string sanitization because nothing is inserted as raw HTML.

vue

<script setup lang="ts">
import { h } from 'vue'
import { CDataGrid } from '@coreui/vue-data-grid'
import type { CDataGridColumnMenuContext } from '@coreui/vue-data-grid'

const roles = ['admin', 'editor', 'viewer']

const items = Array.from({ length: 1000 }, (_, i) => ({
  id: i + 1,
  name: `User ${i + 1}`,
  email: `user${i + 1}@example.com`,
  role: roles[i % roles.length]
}))

const columns = [
  {
    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 }
]

const copyIcon = () =>
  h(
    'svg',
    {
      xmlns: 'http://www.w3.org/2000/svg',
      width: 16,
      height: 16,
      viewBox: '0 0 512 512',
      'aria-hidden': 'true',
      focusable: 'false'
    },
    [
      h('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'
      }),
      h('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'
      })
    ]
  )

// A builder receives the built-in actions plus the column, and returns the
// final list — filter items, reorder them, or add your own.
const columnMenu = ({ column, defaultActions }: CDataGridColumnMenuContext) => [
  ...defaultActions,
  {
    key: 'copy-header',
    label: 'Copy header',
    group: 'custom',
    icon: copyIcon,
    run: () => navigator.clipboard?.writeText(column.label ?? column.key)
  }
]
</script>

<template>
  <CDataGrid
    :columns="columns"
    :items="items"
    :item-key="(item) => String(item.id)"
    :column-menu="columnMenu"
    column-order
    column-pinning
    column-visibility
    :pagination="{ pageSize: 10 }"
  />
</template>

Options

Option	Type	Default	Description
`columnMenu`	`boolean \| ((ctx) => CDataGridMenuAction[])`	`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 prop, each a CDataGridIcon (a VNode or () => VNode): 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.

Vue Data Grid Column Menu

Column menu

Column header menu

Customize the menu

Options