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';

Configuration Options

Option	Type	Default	Description
position	'top' | 'bottom'	'bottom'	Status bar position
showRowCount	boolean	true	Show total row count
showSelectedCount	boolean	true	Show selected row count
showFilteredCount	boolean	true	Show filtered row count
fullWidth	boolean	false	Default fullWidth for aggregation rows
aggregationRows	AggregationRowConfig[]	-	Aggregation row configs

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

Example

Status Bar with Aggregation

import '@toolbox-web/grid';
import { PinnedRowsPlugin } 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({
      position: 'bottom',
      showRowCount: true,
      aggregationRows: [
        {
          id: 'totals',
          aggregators: { quantity: 'sum', price: 'sum' },
          cells: { product: 'Totals:' },
        },
      ],
    }),
  ],
};

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

---