컬럼 커스터마이징

헤더를 드래그해 순서를 바꾸고, 헤더 경계를 드래그해 너비를 조절하고, 컬럼 메뉴에서 너비 자동 맞춤, 숨기기, 고정, 초기화를 할 수 있습니다. 컬럼 선택은 검색, 전체 선택, 그룹 트리, 드래그 순서 변경이 있는 창을 엽니다. 같은 패널을 sideBar로 오른쪽에 붙일…

실행 예제컬럼 커스터마이징

컬럼을 숨기거나 순서와 너비를 바꾸고, 그 배치를 저장해 둘 수 있습니다.

이 데모의 코드

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

const KEY = 'freegrid-demo-columns';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const columns = demoColumns(lang).map(c => (c.field === 'id' ? { ...c, lockVisible: true } : c));
  const grid = createGrid(ctx.host, {
    columns,
    data: makeRows(3000),
    locale: lang,
    sideBar: { open: true }, // docked Columns panel
  });

  grid.on('columnVisible', e => ctx.log(`columnVisible → ${e.colId}: ${e.visible}`));
  grid.on('columnMove', e => ctx.log(`columnMove → ${e.colId} to ${e.toIndex}`));
  grid.on('columnResize', e => ctx.log(`columnResize → ${e.colId}: ${e.width}px`));

  button(ctx, tr(lang, { en: 'Choose columns…', ko: '컬럼 선택…' }), () => grid.openColumnChooser());
  button(ctx, tr(lang, { en: 'Toggle side bar', ko: '사이드바 열기/닫기' }), () => grid.toggleSideBar());
  button(ctx, tr(lang, { en: 'Autosize all', ko: '모두 자동 맞춤' }), () => grid.autoSizeColumns());
  separator(ctx);
  button(ctx, tr(lang, { en: 'Save layout', ko: '레이아웃 저장' }), () => {
    localStorage.setItem(KEY, JSON.stringify(grid.getColumnState()));
    ctx.log(tr(lang, { en: 'saved to localStorage', ko: 'localStorage에 저장됨' }));
  });
  button(ctx, tr(lang, { en: 'Restore layout', ko: '레이아웃 복원' }), () => {
    const saved = localStorage.getItem(KEY);
    if (saved) grid.applyColumnState(JSON.parse(saved));
    ctx.log(saved ? tr(lang, { en: 'restored', ko: '복원됨' }) : tr(lang, { en: 'nothing saved yet', ko: '저장된 레이아웃 없음' }));
  });
  button(ctx, tr(lang, { en: 'Reset columns', ko: '컬럼 초기화' }), () => grid.resetColumnState());
  return grid;
}

헤더를 드래그해 순서를 바꾸고, 헤더 경계를 드래그해 너비를 조절하고, 컬럼 메뉴에서 너비 자동 맞춤, 숨기기, 고정, 초기화를 할 수 있습니다. 컬럼 선택은 검색, 전체 선택, 그룹 트리, 드래그 순서 변경이 있는 창을 엽니다. 같은 패널을 sideBar로 오른쪽에 붙일 수도 있습니다. getColumnState()를 저장해 두면 사용자별 레이아웃을 기억할 수 있습니다.

const grid = createGrid(el, {
  columns: [
    { field: 'id', lockVisible: true },       // cannot be hidden
    { field: 'internalCode', chooser: false }, // not listed in the chooser
    ...rest,
  ],
  data,
  sideBar: { open: false }, // docked Columns panel (true = closed, { open: true } = open)
});

grid.openColumnChooser();
grid.setColumnVisible('email', false);
grid.autoSizeColumns();             // all columns
grid.autoSizeColumns(['name']);     // one column

// save / restore the user's layout
localStorage.setItem('layout', JSON.stringify(grid.getColumnState()));
grid.applyColumnState(JSON.parse(localStorage.getItem('layout')));
grid.resetColumnState();