Status bar

statusBar adds a bar under the rows with the row count, the filtered count and the number of checked rows, in the grid's language.

Live demoStatus bar

Row counts under the grid that follow filters and checked rows.

Code for this demo

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 adds a bar under the rows that says how many there are: "1,000 rows", or "120 of 1,000 rows" while filters hide some, followed by "· 3 selected" when rows are checked. It follows filters, the quick search, live updates and server data as they change, and the text comes in the grid's language.

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

With cell ranges the right side of the bar also shows the count, sum, average, minimum and maximum of the selected cells.

Options

Name	Type	Description
`statusBar`	`boolean`	A bar under the rows with the row count, "shown of total" while filtered, and the number of checked rows.