Column customization

Users can drag headers to reorder, drag header edges to resize, and use the column menu to autosize, hide, pin or reset columns. Choose columns opens a…

Live demoColumn customization

Show, hide, reorder, resize, autosize and reset columns; save the layout.

Code for this demo

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;
}

Users can drag headers to reorder, drag header edges to resize, and use the column menu to autosize, hide, pin or reset columns. Choose columns opens a chooser with search, select all, the group tree and drag-to-reorder; the same panel can be docked on the right with sideBar. Store getColumnState() to remember each user's layout.

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();