Documentation

Side bar and status bar

Two strips of chrome around the grid. The side bar docks a column chooser and a filter panel to the right edge; the status bar puts row counts and selection statistics along the bottom. Both are Enterprise.

import { EnterpriseDataGrid } from '@kanunilabs/datagrid-react-enterprise';

<EnterpriseDataGrid
  licenseKey={key}
  dataSource={rows}
  rowKey="id"
  columns={columns}
  sideBar={{ panels: ['columns', 'filters'], defaultOpen: 'columns' }}
  statusBar={{ items: ['totalRows', 'filteredRows', 'selectedRows', 'rangeStats'] }}
/>

sideBar and statusBar both accept true as a shorthand for every panel and every built-in item, in that order.

OptionTypeNotes
sideBar.panels('columns' | 'filters')[]order is the tab order
sideBar.defaultOpen'columns' | 'filters' | nullread at mount only
statusBar.items('totalRows' | 'filteredRows' | 'selectedRows' | 'rangeStats')[]order is the render order
statusBar.itemsAfterReactNode / Node | stringappended after the built-ins

See it working →

Selection statistics

rangeStats reports the cell rectangle — count, sum, average, min, max:

statusBar={{ items: ['totalRows', 'rangeStats'] }}
editing={{ mode: 'cell', range: true }}

The second line is not optional. rangeStats reads the editing layer's range source, so editing: { enabled: false } or range: false leaves it permanently null. See range selection for the rectangle itself.

Two side effects worth knowing

  1. A side bar containing the columns panel silently turns off the toolbar column-chooser button. Pass toolbarColumnChooser explicitly to get it back.
  2. With a status bar present, the standalone GridSelectionStats strip is no longer rendered — the numbers move into the bar, so they appear exactly once either way.

What these do not do

  • Two panels, closed set. SideBarPanel is 'columns' | 'filters' and there is no extension point — you cannot add your own panel. The status bar's itemsAfter is the only slot, and it only appends.
  • Chips are conditional. filteredRows draws only when a filter actually narrows the set, selectedRows only when the selection is non-empty. You cannot force "Selected 0" or "Filtered = Total".
  • Totals stop at 100,000 cells. Past that the bar reads "Selection too large to total" and returns truncated: true with numeric: null. The limit is a constant, not a prop.
  • Only real numbers are summed. Numeric strings are coerced first, but Date objects are skipped — the accumulator ignores anything that is not typeof value === 'number'. With no numbers in the rectangle only the Cells chip remains.
  • cells and numeric.count differ on purpose. The first counts the whole rectangle, the second only the numeric cells.
  • Row selection is not cell selection. Ticking checkboxes moves selectedRows and nothing else; statistics come from the cell rectangle.
  • Open state is not persisted. defaultOpen is read once at mount — changing the prop later does not reopen a closed panel, and the open tab is not written to grid state or localStorage.
  • Neither strip publishes events. There is no sideBarOpened in GridEventMap; they are passive observers of the controller. In React the open state is not lifted, so you cannot drive the tab from outside either.
  • A filter set before the panel mounts is invisible in React until a filterChanged event arrives — the inputs start empty and reconcile on the event. Vanilla refreshes on open, so it fills correctly.
  • The Filters panel edits only filter-row conditions. Set filters chosen in the funnel popup, and filters set from code, show as a ● dot and a description line but cannot be edited in the box. "Clear all filters" does clear everything.
  • Hidden and unfilterable columns are skipped, and neither panel ever lists the grid's own chrome columns (the __dg_ prefixed ones).
  • The last visible column cannot be unticked — the panel will not let you hide every column.
  • Layout is fixed: a 28px tab rail and a 232px panel, right edge only. Not resizable, not draggable, no left dock.
  • Accessibility is half-done. The tabs carry role="tab" and aria-selected, but the panels have no role="tabpanel" and no aria-controls link. The status bar is role="status" — a live region, so every counter change is announced.
  • Vanilla statistics ignore config.locale. The stat formatter uses the browser locale while the row counters beside it use yours. React's GridSelectionStats takes the locale prop correctly.
  • Chip labels have no per-instance prop. Override the dictionary keys statusRows / statusFiltered / statusSelected through messages; a labels prop exists only on the standalone GridSelectionStats.
  • Community cannot use either. Both props exist only on EnterpriseDataGrid and createEnterpriseGrid. Without a licence key they still work, watermarked.