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

Uses `@svgrid/grid` (MIT). Category: Columns. Live demo: https://svgrid.com/demos/146-tool-panel/

Install: `npm i @svgrid/grid` (Svelte 5).

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

```text
<SvGrid responsive={true} toolPanel ... />
```

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

## Related documentation

- [Tool panel (Columns + Filters)](https://svgrid.com/docs/help/columns/tool-panel.md)

## Related articles

- [A Column Show/Hide Toggle in SvGrid](https://svgrid.com/blog/column-visibility-toggle/) - 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 (146-tool-panel.svelte)

```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](https://github.com/sv-grid/sv-grid/blob/main/examples/src/demos/146-tool-panel.svelte)