상태 표시줄

statusBar를 켜면 행 아래에 전체 행 수, 필터 후 행 수, 체크한 행 수가 그리드 언어로 나옵니다.

실행 예제상태 표시줄

필터와 체크한 행을 따라 바뀌는 행 수 표시줄.

이 데모의 코드

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(1000),
    locale: lang,
    rowSelection: 'multiple',
    statusBar: true,
  });

  text(ctx, h('The bar under the rows counts them. Filter, or check a few rows, and it follows.',
    '행 아래 막대에 행 수가 나옵니다. 필터를 걸거나 몇 행을 체크하면 바로 따라 바뀝니다.'));
  separator(ctx);
  button(ctx, h('Only Japan', '일본만'), () => grid.setFilter('country', { type: 'set', values: ['Japan'] }));
  button(ctx, h('Clear filter', '필터 해제'), () => grid.setFilter('country', null));
  button(ctx, h('Check all', '모두 체크'), () => grid.selectAll());
  button(ctx, h('Uncheck all', '모두 해제'), () => grid.deselectAll());
  return grid;
}

statusBar: true를 켜면 행 아래에 행 수를 알려 주는 막대가 생깁니다. "1,000행", 필터로 일부가 숨겨지면 "1,000행 중 120행", 체크한 행이 있으면 뒤에 "· 3개 선택"이 붙습니다. 필터, 빠른 검색, 실시간 업데이트, 서버 데이터가 바뀌면 바로 따라 바뀌고, 글은 그리드 언어로 나옵니다.

const grid = createGrid(el, {
  columns,
  data,
  rowSelection: 'multiple',
  statusBar: true,   // "1,000 rows" · "120 of 1,000 rows" when filtered · "· 3 selected"
});

셀 범위 선택을 쓰면 막대 오른쪽에 선택한 셀의 개수, 합계, 평균, 최소, 최대도 나옵니다.

옵션

이름	타입	설명
`statusBar`	`boolean`	행 아래에 행 수, 필터 중에는 "전체 중 표시 행 수", 체크한 행 수를 보여 주는 막대.