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.

A live, editable Svelte 5 data grid example from the SvGrid gallery (Columns). See the SvGrid documentation for the full API.

About this example

The docked tool panel of the Svelte 5 data grid, enabled with the toolPanel prop. A button appears at the grid's top right and the panel docks on the right edge with two tabs: Columns toggles visibility, reorders columns up and down and groups by a column; Filters offers an operator and value control per column, with numeric operators picked from cellDataType, kept in sync with the column menu and filter row. The panel ships in @svgrid/enterprise.

The docked enterprise sidebar. Two tabs: COLUMNS (toggle visibility, reorder up/down, group by a column) and FILTERS (one operator + value control per column, kept in sync with the column menu / filter row). Turn it on with toolPanel - a button appears at the grid's top-right and the panel docks on the right edge.

Imports, features and API used

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

Table features registered: columnGroupingFeature, columnFilteringFeature, rowSortingFeature

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

Frequently asked questions

How do I enable the tool panel?

Add toolPanel to <SvGrid>. With columnGroupingFeature and columnFilteringFeature registered, the Columns tab can group and the Filters tab can filter; no other configuration is needed.

Do the panel filters and the column menu stay consistent?

Yes. Both write the same column filter state, so a filter set in the panel appears in the header menu and vice versa.

Where do the numeric operators come from?

From cellDataType on the column. A column marked number gets equals, greater than, less than and between in the panel, text columns get the text operators.

Source code (146-tool-panel.svelte)

<!-- Documented in: docs/help/columns/tool-panel.md -->
<script lang="ts">
  /**
   * 146. Tool panel (Columns + Filters)
   * -----------------------------------
   * The docked enterprise sidebar. Two tabs: COLUMNS (toggle visibility,
   * reorder up/down, group by a column) and FILTERS (one operator + value
   * control per column, kept in sync with the column menu / filter row). Turn
   * it on with `toolPanel` - a button appears at the grid's top-right and the
   * panel docks on the right edge.
   *
   *   <SvGrid responsive={true} toolPanel ... />
   */
  import {
    SvGrid,
    tableFeatures,
    columnGroupingFeature,
    columnFilteringFeature,
    rowSortingFeature,
    type GridColumns,
  } from '@svgrid/grid'
  import { makePeople, type Person } from '../shared/seed'

  const features = tableFeatures({ columnGroupingFeature, columnFilteringFeature, rowSortingFeature })
  const rows = makePeople(200)

  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' },
    {
      field: 'salary',
      header: 'Salary',
      width: 140,
      cellDataType: 'number',
      aggregate: 'sum',
      format: { type: 'currency', currency: 'USD', options: { maximumFractionDigits: 0 } },
    },
  ]
</script>

<section class="flex flex-col flex-1 min-h-0 gap-3">
  <div
    class="shrink-0 rounded-lg border px-4 py-3"
    style="border-color: var(--sg-border); background: var(--sg-header-bg);"
  >
    <p class="text-sm font-semibold" style="color: var(--sg-fg);">
      Docked tool panel via <code>toolPanel</code> - Columns + Filters tabs
    </p>
    <p class="mt-1 text-xs" style="color: var(--sg-muted);">
      Use the <strong>Columns &amp; Filters</strong> button in the toolbar above
      the grid (open here by default). <strong>Columns</strong> tab: toggle
      visibility, reorder with ↑/↓, click ⊞ to group (try Department - Salary
      rolls up via its <code>aggregate</code>). <strong>Filters</strong> tab:
      pick an operator + value per column (Age / Salary get numeric operators
      via <code>cellDataType</code>); it stays in sync with the column menu.
    </p>
  </div>

  <div class="flex-1 min-h-0">
    <SvGrid responsive={true}
      columnResize
      data={rows}
      columns={columns}
      features={features}
      toolPanel
      toolPanelDefaultOpen
      groupable
      selectionMode="none"
      rowHeight={34}
      containerHeight="100%"
      fitColumns={true}
    />
  </div>
</section>

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.
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.
Autosize columns - api.autosizeColumn(id) and api.autosizeAllColumns() snap columns to the widest visible cell via canvas-based text measurement. The column header menu has an "Autosize" item that calls the same code. Manual drag-resize still works.