Every column header carries a menu button (⋮). By default it's a flat list of actions plus a "Choose columns" submenu. Opt into the tabbed layout with columnMenuTabs:

Open the live example: Tabbed column menu (Columns)

<SvGrid {data} {columns} {features} columnMenuTabs />

The tabbed menu has three tabs:

General - sort ascending / descending / clear, pin left / right / unpin, autosize this / all columns, group / ungroup by the column, reset columns.
Filter - the column's filter UI (operator + value, a second AND/OR condition, and the value checklist). Shown only when filtering is enabled for the column. This is the same UI the header's funnel icon opens, so the two stay in sync.
Columns - a quick visibility checklist for every column, without leaving the menu.

The menu opens on the General tab. The Filter tab is omitted for columns that aren't filterable (filterable: false or no field).

<!-- The menu appears automatically; filtering enables the Filter tab. -->
<SvGrid {data} {columns} features={tableFeatures({ rowSortingFeature, columnFilteringFeature })} />

For a docked, always-visible version of the Columns and Filters lists, see the tool panel.

The header menu holds sort, the filter for that column, and visibility. Pair it with toolPanel when people need to see every column at once rather than hunting through headers.

<script lang="ts">
  import { SvGrid, type GridColumns, type SvGridApi } from '@svgrid/grid'

  type Person = {
    id: number
    name: string
    email: string
    city: string
    age: number
    salary: number
  }

  const seed: Person[] = [
    { id: 1, name: 'Ada Lovelace',   email: '[email protected]',   city: 'London',   age: 36, salary: 142000 },
    { id: 2, name: 'Grace Hopper',   email: '[email protected]', city: 'New York', age: 45, salary: 168000 },
    { id: 3, name: 'Linus Torvalds', email: '[email protected]', city: 'Portland', age: 54, salary: 155000 },
  ]

  const columns: GridColumns<Person> = [
    { field: 'name',   header: 'Name',   width: 180 },
    { field: 'city',   header: 'City',   width: 140 },
    { field: 'age',    header: 'Age',    width: 90, editorType: 'number' },
    { field: 'salary', header: 'Salary', width: 140,
      format: { type: 'currency', currency: 'USD' } },
  ]
</script>

<SvGrid data={seed} {columns} sortable filterable filterMode="menu" toolPanel />

filterMode="menu" keeps the header compact - the operators live behind the header button instead of taking a permanent row. Worth it when the grid is short and vertical space is the scarce thing.

<script lang="ts">
  import { SvGrid, type GridColumns, type SvGridApi } from '@svgrid/grid'

  type Person = {
    id: number
    name: string
    email: string
    city: string
    age: number
    salary: number
  }

  const seed: Person[] = [
    { id: 1, name: 'Ada Lovelace',   email: '[email protected]',   city: 'London',   age: 36, salary: 142000 },
    { id: 2, name: 'Grace Hopper',   email: '[email protected]', city: 'New York', age: 45, salary: 168000 },
    { id: 3, name: 'Linus Torvalds', email: '[email protected]', city: 'Portland', age: 54, salary: 155000 },
  ]

  const columns: GridColumns<Person> = [
    { field: 'name',  header: 'Name',  width: 180 },
    { field: 'email', header: 'Email', width: 210 },
    { field: 'city',  header: 'City',  width: 140 },
  ]
</script>

<SvGrid data={seed} {columns} sortable filterable filterMode="menu" />

Column menu

What the menu carries

Menu without the filter row

See also

Related articles