Side bar

Docked Filters, Columns and Pivot panels on the right of the grid: filter several columns in one place and show, hide and reorder columns.

Paid feature · Side bar panels. Free for 30 days on a new domain; after that it needs a free personal key or a company key. See pricing

Docked Filters and Columns panels on the right of the grid.

Code for this demo

import { createGrid } from '@freegridjs/core';
import { demoColumns, makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: demoColumns(lang),
    data: makeRows(2000),
    locale: lang,
    // docked panels on the right: filters first, then the column list
    sideBar: { open: true, panels: ['filters', 'columns'] },
  });
  grid.on('filterChange', e => ctx.log(`filterChange → ${Object.keys(e.filters).join(', ') || h('none', '없음')}`));
  grid.on('columnVisible', e => ctx.log(`columnVisible → ${e.colId}: ${e.visible}`));

  text(ctx, h('Filter several columns from the Filters panel, then switch to Columns to hide, show and reorder them.',
    '필터 패널에서 여러 컬럼에 필터를 건 다음, 컬럼 패널로 바꿔 숨기기·표시·순서 바꾸기를 해 보세요.'));
  separator(ctx);
  button(ctx, h('Open Filters', '필터 패널 열기'), () => grid.toggleSideBar(true, 'filters'));
  button(ctx, h('Open Columns', '컬럼 패널 열기'), () => grid.toggleSideBar(true, 'columns'));
  button(ctx, h('Close', '닫기'), () => grid.toggleSideBar(false));
  return grid;
}

The side bar docks panels on the right edge of the grid, with a tab for each. The Columns panel is the column chooser kept open: search, show and hide, the column-group tree and drag-to-reorder. The Filters panel lists every column with its filter, so people can set several filters in one place and see at a glance which columns are filtered. The Pivot panel (pivotPanel: true) lets them build a pivot table.

const grid = createGrid(el, {
  columns,
  data,
  // true: closed tabs on the right; { open: true }: open from the start
  sideBar: { open: true, panels: ['columns', 'filters'] },
  // pivotPanel: true,   // adds the Pivot panel (see Pivot tables)
});

grid.toggleSideBar();                  // open or close
grid.toggleSideBar(true, 'filters');   // open on the Filters panel
grid.toggleSideBar(false);             // close

The panels change the same column state and filters as the column menu, so everything stays in step, and getState() saves what people set. The floating chooser from openColumnChooser() works without the side bar.

Options and methods

Name	Type	Description
`sideBar`	`boolean \| { open?, panels?: ('columns' \| 'filters' \| 'pivot')[] }`	Docked panels on the right. true shows the tabs closed, { open: true } opens the first panel; panels picks the panels and their order (default: columns and filters, plus pivot with pivot or pivotPanel).
`pivotPanel`	`boolean`	Add the Pivot panel to the default side bar panels.
`toggleSideBar(open?, panel?)`	`void`	Open, close or switch the side bar; panel is 'columns', 'filters' or 'pivot'.