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.
| Option | Type | Notes |
|---|---|---|
sideBar.panels | ('columns' | 'filters')[] | order is the tab order |
sideBar.defaultOpen | 'columns' | 'filters' | null | read at mount only |
statusBar.items | ('totalRows' | 'filteredRows' | 'selectedRows' | 'rangeStats')[] | order is the render order |
statusBar.itemsAfter | ReactNode / Node | string | appended after the built-ins |
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
- A side bar containing the
columnspanel silently turns off the toolbar column-chooser button. PasstoolbarColumnChooserexplicitly to get it back. - With a status bar present, the standalone
GridSelectionStatsstrip 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.
SideBarPanelis'columns' | 'filters'and there is no extension point — you cannot add your own panel. The status bar'sitemsAfteris the only slot, and it only appends. - Chips are conditional.
filteredRowsdraws only when a filter actually narrows the set,selectedRowsonly 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: truewithnumeric: null. The limit is a constant, not a prop. - Only real numbers are summed. Numeric strings are coerced first, but
Dateobjects are skipped — the accumulator ignores anything that is nottypeof value === 'number'. With no numbers in the rectangle only the Cells chip remains. cellsandnumeric.countdiffer on purpose. The first counts the whole rectangle, the second only the numeric cells.- Row selection is not cell selection. Ticking checkboxes moves
selectedRowsand nothing else; statistics come from the cell rectangle. - Open state is not persisted.
defaultOpenis read once at mount — changing the prop later does not reopen a closed panel, and the open tab is not written to grid state orlocalStorage. - Neither strip publishes events. There is no
sideBarOpenedinGridEventMap; 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
filterChangedevent 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"andaria-selected, but the panels have norole="tabpanel"and noaria-controlslink. The status bar isrole="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'sGridSelectionStatstakes thelocaleprop correctly. - Chip labels have no per-instance prop. Override the dictionary keys
statusRows/statusFiltered/statusSelectedthroughmessages; alabelsprop exists only on the standaloneGridSelectionStats. - Community cannot use either. Both props exist only on
EnterpriseDataGridandcreateEnterpriseGrid. Without a licence key they still work, watermarked.