FreeGridv1.15.1English

사이드바

그리드 오른쪽에 필터·컬럼·피벗 패널을 붙여 여러 컬럼의 필터를 한곳에서 걸고, 컬럼을 표시·숨기고 순서를 바꿉니다.

실행 예제사이드바

그리드 오른쪽에 붙는 필터·컬럼 패널.

이 데모의 코드
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;
}

사이드바는 그리드 오른쪽 가장자리에 패널을 붙이고, 패널마다 탭을 둡니다. 컬럼 패널은 컬럼 선택 창을 열어 둔 것과 같습니다. 검색, 표시·숨기기, 컬럼 그룹 트리, 드래그로 순서 바꾸기를 할 수 있습니다. 필터 패널은 모든 컬럼과 그 필터를 한 목록에 보여 주므로, 여러 컬럼의 필터를 한곳에서 걸고 어떤 컬럼에 필터가 걸렸는지 한눈에 볼 수 있습니다. 피벗 패널(pivotPanel: true)에서는 피벗 테이블을 직접 만들 수 있습니다.

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

패널은 컬럼 메뉴와 같은 컬럼 상태와 필터를 바꾸므로 서로 어긋나지 않고, 사용자가 바꾼 내용은 getState()로 저장됩니다. 떠 있는 컬럼 선택 창(openColumnChooser())은 사이드바 없이도 쓸 수 있습니다.

옵션과 메서드

이름타입설명
sideBarboolean | { open?, panels?: ('columns' | 'filters' | 'pivot')[] }오른쪽에 붙는 패널. true면 탭만 보이고 { open: true }면 첫 패널이 열린 채 시작합니다. panels로 패널 종류와 순서를 고릅니다(기본: columns와 filters, pivot이나 pivotPanel이 있으면 pivot까지).
pivotPanelboolean사이드바 기본 패널에 피벗 패널을 더합니다.
toggleSideBar(open?, panel?)void사이드바를 열고 닫거나 패널을 바꿉니다. panel은 'columns', 'filters', 'pivot'.