고정과 다단 헤더

고정한 컬럼은 가운데 영역을 가로로 스크롤해도 계속 보입니다. 사용자는 컬럼 메뉴에서 고정과 해제를 할 수 있습니다. children이 있는 컬럼은 그룹 헤더가 되고 원하는 깊이까지 중첩할 수 있습니다. 그룹이 고정 영역에 걸쳐 나뉘면 각 영역에 그룹 헤더가 표시됩니다.

실행 예제컬럼 고정

중요한 컬럼을 왼쪽이나 오른쪽에 고정하면 가로로 스크롤해도 계속 보입니다.

이 데모의 코드

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

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  // demoColumns pins ID and Name to the left and Total to the right.
  const grid = createGrid(ctx.host, { columns: demoColumns(lang, 12), data: makeRows(3000, 12), locale: lang });

  const pin = (colId: string, pinned: 'left' | 'right' | null) => {
    const state = grid.getColumnState().map(s => (s.colId === colId ? { ...s, pinned } : s));
    grid.applyColumnState(state);
    ctx.log(`${colId} → ${pinned ?? 'unpinned'}`);
  };
  button(ctx, tr(lang, { en: 'Pin Email left', ko: '이메일 왼쪽 고정' }), () => pin('email', 'left'));
  button(ctx, tr(lang, { en: 'Pin Status right', ko: '상태 오른쪽 고정' }), () => pin('status', 'right'));
  button(ctx, tr(lang, { en: 'Unpin Name', ko: '이름 고정 해제' }), () => pin('name', null));
  button(ctx, tr(lang, { en: 'Reset', ko: '초기화' }), () => grid.resetColumnState());
  return grid;
}

실행 예제다단 헤더

헤더를 여러 단으로 묶어 연도별·분기별 데이터를 한눈에 보여줍니다.

이 데모의 코드

import { createGrid, type ColumnDef } from '@freegridjs/core';
import { makeRows } from '../data';
import { 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 money = { type: 'number', format: '#,##0', width: 100 } as const;
  // Three header levels: Year → Half → Quarter.
  const columns: ColumnDef[] = [
    { field: 'id', header: 'ID', width: 70, type: 'number', format: '0', pinned: 'left' },
    { header: h('Customer', '고객'), children: [
      { field: 'name', header: h('Name', '이름'), width: 160 },
      { field: 'company', header: h('Company', '회사'), width: 130 },
      { field: 'country', header: h('Country', '국가'), width: 140 },
    ] },
    { header: h('Revenue 2026', '2026년 매출'), children: [
      { header: h('First half', '상반기'), children: [
        { field: 'q1', header: 'Q1', ...money },
        { field: 'q2', header: 'Q2', ...money },
      ] },
      { header: h('Second half', '하반기'), children: [
        { field: 'q3', header: 'Q3', ...money },
        { field: 'q4', header: 'Q4', ...money },
      ] },
    ] },
    { field: 'total', header: h('Total', '합계'), ...money, width: 120, pinned: 'right' },
  ];
  return createGrid(ctx.host, { columns, data: makeRows(2000), locale: lang });
}

고정한 컬럼은 가운데 영역을 가로로 스크롤해도 계속 보입니다. 사용자는 컬럼 메뉴에서 고정과 해제를 할 수 있습니다. children이 있는 컬럼은 그룹 헤더가 되고 원하는 깊이까지 중첩할 수 있습니다. 그룹이 고정 영역에 걸쳐 나뉘면 각 영역에 그룹 헤더가 표시됩니다.

const columns = [
  { field: 'name', header: 'Name', pinned: 'left' },
  { header: 'Revenue 2026', children: [
    { header: 'First half', children: [{ field: 'q1' }, { field: 'q2' }] },
    { header: 'Second half', children: [{ field: 'q3' }, { field: 'q4' }] },
  ] },
  { field: 'total', header: 'Total', pinned: 'right' },
];