Tabbed column menu

About this example

A tabbed column header menu for the Svelte 5 data grid, opt-in with columnMenuTabs. The menu on any header then has three tabs: General with sort, pin, autosize, group and reset; Filter with the column's operator, value and value checklist; and Columns with a visibility checklist. It is off by default, where the flat menu has a Choose columns submenu, and a switch in the demo compares both.

Opt into the tabbed header menu with columnMenuTabs. The column menu (the ⋮ button on any header) then has three tabs: General - sort / pin / autosize / group / reset Filter - the column's filter UI (operator + value + value checklist) Columns - a quick visibility checklist It is OFF by default (the flat menu with a "Choose columns" submenu). Toggle the switch below to compare.

Imports, features and API used

Imports: @svgrid/grid, ../shared/seed

Table features registered: rowSortingFeature, columnFilteringFeature, columnGroupingFeature

Columns: firstName (First name), lastName (Last name), department (Department), country (Country), status (Status), age (Age)

Frequently asked questions

How do I enable the tabbed menu?

Set columnMenuTabs on <SvGrid>. The header menu switches from the flat action list to General, Filter and Columns tabs.

What is in the Filter tab?

The column's operator and value editor plus a checklist of distinct values with search, the same filter surface the flat menu opens, kept in sync with the filter row when showColumnFilters is on.

Which is the default?

The flat menu. It keeps the actions one click away and puts column visibility in a Choose columns submenu; the tabbed layout suits grids with heavy filtering.

Related documentation

• Column menu

Related articles

• A Custom Column Header Menu in SvGrid - Build a per-column header menu for sort, hide, pin, and custom actions using header snippets and your own dropdown component.
• Multi-Level (Grouped) Column Headers in SvGrid - Band related columns under a shared parent header using SvGrid's nested column definition - how to nest, pin, combine with sorting and filtering, and when NOT to use grouping.
• A Column Show/Hide Toggle in SvGrid - Build a column chooser panel that lets users show or hide columns at runtime, with persistence across page loads and a guard against hiding everything.

Source code (185-column-menu-tabs.svelte)

<!-- Documented in: docs/help/columns/column-menu.md -->
<script lang="ts">
  /**
   * 185. Tabbed column menu (columnMenuTabs)
   * ----------------------------------------
   * Opt into the tabbed header menu with `columnMenuTabs`. The
   * column menu (the ⋮ button on any header) then has three tabs:
   *   General - sort / pin / autosize / group / reset
   *   Filter  - the column's filter UI (operator + value + value checklist)
   *   Columns - a quick visibility checklist
   * It is OFF by default (the flat menu with a "Choose columns" submenu). Toggle
   * the switch below to compare.
   */
  import {
    SvGrid,
    tableFeatures,
    rowSortingFeature,
    columnFilteringFeature,
    columnGroupingFeature,
    type GridColumns,
  } from '@svgrid/grid'
  import { makePeople, type Person } from '../shared/seed'

  const features = tableFeatures({ rowSortingFeature, columnFilteringFeature, columnGroupingFeature })
  const rows = makePeople(150)
  let tabbed = $state(true)

  const columns: GridColumns<Person> = [
    { field: 'firstName', header: 'First name', width: 140 },
    { field: 'lastName', header: 'Last name', width: 140 },
    { field: 'department', header: 'Department', width: 150 },
    { field: 'country', header: 'Country', width: 120 },
    { field: 'status', header: 'Status', width: 110 },
    { field: 'age', header: 'Age', width: 90, cellDataType: 'number' },
  ]
</script>

<section class="flex flex-col flex-1 min-h-0 gap-3">
  <div class="flex items-center gap-3 shrink-0">
    <label class="cmt-switch">
      <input type="checkbox" bind:checked={tabbed} />
      <span><code>columnMenuTabs</code> {tabbed ? 'on' : 'off'}</span>
    </label>
    <span class="text-xs" style="color: var(--sg-muted);">
      Open any column's <strong>⋮</strong> menu. {tabbed
        ? 'Tabbed: General / Filter / Columns.'
        : 'Flat: actions list + Choose columns submenu.'}
    </span>
  </div>

  <div class="flex-1 min-h-0">
    {#key tabbed}
      <SvGrid responsive={true}
      columnResize
        data={rows}
        columns={columns}
        features={features}
        columnMenuTabs={tabbed}
        showColumnFilters={true}
        selectionMode="none"
        showRowNumbers={true}
        rowHeight={36}
        containerHeight="100%"
        fitColumns={true}
      />
    {/key}
  </div>
</section>

<style>
  .cmt-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sg-fg); cursor: pointer; }
  .cmt-switch input { accent-color: var(--sg-accent, #2563eb); width: 16px; height: 16px; }
</style>

View this example on GitHub

More Columns examples

• Column pinning + freezing - Wide 13-column grid. Pin Company left and Price right via the column menu; the middle scrolls under sticky edges.
• Columns hierarchy + manager - Side-panel tree of grouped columns: drag leaves to reorder, click a chevron to collapse a group into one summary column, toggle visibility per leaf or whole group.
• Column layout API - setColumnWidth + setColumnPinning + getColumnWidths + getColumnPinning. Save the snapshot to localStorage, restore on reload, drive widths and pins from buttons.
• Tool panel (Columns + Filters) - The docked enterprise sidebar, two tabs. Columns: toggle visibility, reorder up/down, group by a column. Filters: an operator + value control per column (numeric operators come free via cellDataType), kept in sync with the column menu. Enable with the toolPanel prop.
• Column reorder - Set enableColumnReorder on <SvGrid> and every header becomes draggable, with a drop indicator. api.setColumnOrder / getColumnOrder + onColumnOrderChange event; persist to restore across reloads.