Rows

Pinned rows

Keep rows above the scroll, always in view, whether they are rows of your own or rows readers pin from the board.

A pinned row stays above the scroll while the rest of the grid moves under it. Use it for a row that should never leave the screen: a benchmark, a summary, your position, or the symbols a reader is watching on a long board.

The INDEX row is passed in pinnedRows; pin others yourself with a right-click, or with the button, which calls the grid API.

pinned-rows.svelte GitHub ↗

Rows of your own

pinnedRows takes rows that are not in rows: they sit above the scroll, use the grid’s columns and rowClass, and are display-only. Their ids must not clash with ids in rows.

<Grid {rows} {columns} height={480} pinnedRows={[benchmark]} />

Rows readers pin

rowPinning lets readers pin rows themselves. Right-clicking a row offers Pin to top, and Unpin on a pinned row, ahead of any rowMenu items.

A pinned row shows above the scroll and also stays in its place in the body. It keeps updating, api.patchRows included.
Pins are remembered with persistKey, and carried by getState() and applyState().
onRowPinChange(ids) reports every change.
Pinning works on rows in rows; with a server source, pin rows of your own with pinnedRows.

<Grid {rows} {columns} height={480} rowPinning persistKey="watchlist" onRowPinChange={(ids) => save(ids)} />

From code

api.pinRow(id) pins a row and api.pinRow(id, false) unpins it; it returns false when no row has that id. api.getPinnedRowIds() returns the pinned ids in the order they were pinned.

api.pinRow(2);           // pin the row with id 2
api.pinRow(2, false);    // unpin it
api.getPinnedRowIds();   // [] again

Reference

Grid props from the types

pinnedRows GridRow[] Default []

Rows pinned to the top, always visible above the scroll (a benchmark, a summary, "your position"). Display-only — not virtualized or selectable. Their getRowId must not collide with a row in rows/source — with a derived-flash column (flash: 'auto'), a shared id means the pinned cell and the data-row cell share one flash-tracker entry, so updating one can suppress or trigger a flash on the other. To let users pin rows of rows themselves, use rowPinning.

Example

<Grid {rows} {columns} height={480} pinnedRows={[{ id: -1, sym: 'VN30', last: index }]} />

rowPinning boolean Default false

Let users pin rows above the scroll from the row menu (right-click): "Pin to top" / "Unpin". A pinned row stays in the body too, keeps updating, and is remembered with persistKey and in getState().

onRowPinChange (ids: (string | number)[]) => void

Called with the pinned row ids (in pin order) whenever they change.

Example

<Grid {rows} {columns} height={480} rowPinning onRowPinChange={(ids) => save('pinned', ids)} />

persistKey string Default undefined

Remember the user's layout (column order, widths, hidden and pinned columns, pinned rows) in localStorage under this key.

Grid API from the types

pinRow (key: string | number, pinned?: boolean): boolean

Pin a row above the scroll (or unpin it with pinned: false), as the row menu does under rowPinning; pinned is true unless given. The row stays in the body too. Returns false when no row has that id.

Example

api.pinRow(row.id);

getPinnedRowIds (): (string | number)[]

Ids of the rows pinned at runtime, in pin order.

Example

for (const id of api.getPinnedRowIds()) api.pinRow(id, false);