요약 행

요약 행에는 합계, 평균 같은 집계를 표시합니다. 위치는 상단 또는 하단이고, 스크롤 영역 밖에 고정하거나 데이터와 함께 스크롤되게 할 수 있습니다. 데이터나 필터가 바뀌면 다시 계산하고, scope: 'selected'일 때는 선택이 바뀔 때도 다시 계산합니다. 셀에 서식을…

실행 예제요약 행

합계·평균 같은 요약 행을 위나 아래에 고정하거나, 데이터와 함께 스크롤되게 둘 수 있습니다.

이 데모의 코드

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

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const quarters = { q1: 'sum', q2: 'sum', q3: 'sum', q4: 'sum', total: 'sum' } as const;
  let summary: SummaryOptions = {
    position: 'bottom',
    pinned: true,
    scope: 'filtered',
    rows: [
      { label: tr(lang, { en: 'Total', ko: '합계' }), columns: { ...quarters, id: 'count' } },
      {
        label: tr(lang, { en: 'Average', ko: '평균' }),
        columns: { q1: 'avg', q2: 'avg', q3: 'avg', q4: 'avg', total: 'avg', growth: { agg: 'avg', format: '0.0%' } },
      },
      {
        label: tr(lang, { en: 'Range', ko: '범위' }),
        columns: {
          total: { agg: 'max', prefix: tr(lang, { en: 'max', ko: '최대' }) },
          country: values => tr(lang, { en: `${new Set(values).size} countries`, ko: `${new Set(values).size}개 국가` }),
        },
      },
    ],
  };
  const grid = createGrid(ctx.host, { columns: demoColumns(lang), data: makeRows(10_000), rowSelection: 'multiple', locale: lang, summary });

  const update = (patch: Partial<SummaryOptions>) => {
    summary = { ...summary, ...patch };
    grid.setSummary(summary);
    ctx.log(`setSummary → position: ${summary.position}, pinned: ${summary.pinned}, scope: ${summary.scope}`);
  };
  select(ctx, tr(lang, { en: 'Position', ko: '위치' }), [['bottom', tr(lang, { en: 'Bottom', ko: '하단' })], ['top', tr(lang, { en: 'Top', ko: '상단' })]], 'bottom',
    v => update({ position: v }));
  select(ctx, tr(lang, { en: 'Mode', ko: '방식' }), [['pinned', tr(lang, { en: 'Pinned', ko: '고정' })], ['scroll', tr(lang, { en: 'Scrolls with rows', ko: '스크롤과 함께' })]], 'pinned',
    v => update({ pinned: v === 'pinned' }));
  select(ctx, tr(lang, { en: 'Rows', ko: '집계 대상' }), [
    ['filtered', tr(lang, { en: 'Filtered rows', ko: '필터된 행' })],
    ['all', tr(lang, { en: 'All rows', ko: '전체 행' })],
    ['selected', tr(lang, { en: 'Selected rows', ko: '선택한 행' })],
  ], 'filtered', v => update({ scope: v }));
  search(ctx, tr(lang, { en: 'Filter, e.g. "japan"', ko: '필터 예: "japan"' }), q => grid.setQuickFilter(q));
  return grid;
}

요약 행에는 합계, 평균 같은 집계를 표시합니다. 위치는 상단 또는 하단이고, 스크롤 영역 밖에 고정하거나 데이터와 함께 스크롤되게 할 수 있습니다. 데이터나 필터가 바뀌면 다시 계산하고, scope: 'selected'일 때는 선택이 바뀔 때도 다시 계산합니다. 셀에 서식을 따로 지정하지 않으면 컬럼 서식을 따릅니다.

createGrid(el, {
  columns,
  data,
  summary: {
    position: 'bottom',   // 'top' | 'bottom'
    pinned: true,         // true: fixed; false: scrolls with the rows
    scope: 'filtered',    // 'filtered' | 'all' | 'selected'
    rows: [
      { label: 'Total', columns: { qty: 'sum', amount: 'sum', id: 'count' } },
      { label: 'Average', columns: { amount: { agg: 'avg', format: '#,##0.0' } } },
      { columns: {
        amount: { agg: 'max', prefix: 'max' },
        country: values => `${new Set(values).size} countries`, // custom
      } },
    ],
  },
});

grid.setSummary({ position: 'top', rows: [...] }); // change at runtime
grid.setSummary(null);                              // remove
grid.getSummaryValues();                            // [{ qty: 1234, amount: 99000, id: 50 }, …]

sum, avg, min, max는 숫자 값만 계산하고 빈 값은 건너뜁니다. min과 max는 날짜도 비교합니다.
count는 집계 대상 행 수입니다.
함수는 컬럼 값 배열과 행 배열을 받습니다. 숫자를 돌려주면 서식이 적용되고, 문자열은 그대로 표시됩니다.
label은 그 행에서 집계가 없는 첫 번째 보이는 컬럼에 표시됩니다.