PinnedRowsPlugin

Pinned Rows (Status Bar) Plugin for tbw-grid

Creates fixed status bars at the top or bottom of the grid for displaying aggregations, row counts, or custom content. Think of it as the “totals row” you’d see in a spreadsheet— always visible regardless of scroll position.

Installation

import { PinnedRowsPlugin } from '@toolbox-web/grid/plugins/pinned-rows';

Built-in Aggregation Functions

Function	Description
sum	Sum of values
avg	Average of values
count	Count of rows
min	Minimum value
max	Maximum value

CSS Custom Properties

Property	Default	Description
--tbw-pinned-rows-bg	var(--tbw-color-panel-bg)	Status bar background
--tbw-pinned-rows-border	var(--tbw-color-border)	Status bar border

Configuration Options

Option	Type	Description
slots?	PinnedRowSlot[]	Unified ordered list of pinned-row slots. When provided, aggregationRows, customPanels, position, showRowCount, showSelectedCount and showFilteredCount are ignored — slots are rendered in declared order within their position (‘top’ or ‘bottom’, default ‘bottom’).
position?	PinnedRowsPosition	Position of the info bar (default: ‘bottom’).
showRowCount?	boolean	Show total row count in info bar (default: true).
showSelectedCount?	boolean	Show selected row count in info bar (default: true).
showFilteredCount?	boolean	Show filtered row count when filter is active (default: true).
customPanels?	PinnedRowsPanel[]	Custom panels to display in the info bar.
aggregationRows?	AggregationRowConfig[]	Aggregation rows (footer/header rows with computed values).
fullWidth?	boolean	Default fullWidth mode for all aggregation rows. When true, each aggregation row renders as a single spanning cell with label and aggregated values inline. When false (default), rows render per-column cells aligned to the grid template. Individual AggregationRowConfig.fullWidth (or AggregationSlot.fullWidth) overrides this.

Example

Status Bar with Aggregation

import '@toolbox-web/grid';
import {
  PinnedRowsPlugin,
  rowCountPanel,
} from '@toolbox-web/grid/plugins/pinned-rows';

grid.gridConfig = {
  columns: [
    { field: 'product', header: 'Product' },
    { field: 'quantity', header: 'Qty', type: 'number' },
    { field: 'price', header: 'Price', type: 'currency' },
  ],
  plugins: [
    new PinnedRowsPlugin({
      slots: [
        {
          id: 'totals',
          position: 'bottom',
          aggregators: { quantity: 'sum', price: 'sum' },
          cells: { product: 'Totals:' },
        },
        { id: 'count', position: 'bottom', render: rowCountPanel() },
      ],
    }),
  ],
};

See Also

• PinnedRowsConfig for all configuration options
• AggregationRowConfig for aggregation row structure

Extends BaseGridPlugin

Inherited methods like attach(), detach(), afterRender(), etc. are documented in the base class.

Methods

refresh()

Refresh the status bar to reflect current grid state.

refresh(): void

---

getContext()

Get the current status bar context.

getContext(): PinnedRowsContext

Returns

PinnedRowsContext - The context with row counts and other info

---

addPanel()

Add a custom panel to the info bar.

addPanel(panel: PinnedRowsPanel): void

Parameters

Name	Type	Description
panel	PinnedRowsPanel	The panel configuration to add

---

removePanel()

Remove a custom panel by ID.

removePanel(id: string): void

Parameters

Name	Type	Description
id	string	The panel ID to remove

---

addAggregationRow()

Add an aggregation row.

addAggregationRow(row: AggregationRowConfig): void

Parameters

Name	Type	Description
row	AggregationRowConfig	The aggregation row configuration

---

removeAggregationRow()

Remove an aggregation row by ID.

removeAggregationRow(id: string): void

Parameters

Name	Type	Description
id	string	The aggregation row ID to remove

---