{ "$comment": "Generated by scripts/api-manifest.mjs from the TypeScript sources. Do not edit.", "package": "bo-grid", "version": "3.1.0", "grid": { "description": "Props of (GridProps).", "props": [ { "name": "rows", "type": "GridRow[]", "required": true, "doc": "The data: one plain object per row, each with a unique `id`, a number or a string (or name another key with `getRowId`).", "example": "let rows: GridRow[] = $state([\n { id: 1, sym: 'VNM', last: 68.5 },\n { id: 2, sym: 'FPT', last: 121.3 },\n]);" }, { "name": "columns", "type": "ColumnDef[]", "required": true, "doc": "The columns, in display order. A column's `type` picks how its values show, sort and filter.", "example": "const columns: ColumnDef[] = [\n { type: 'text', key: 'sym', header: 'Symbol', width: 90 },\n { type: 'price', key: 'last', header: 'Last', flash: 'auto' },\n];" }, { "name": "height", "type": "number | string", "required": true, "doc": "Viewport height. A **number** is the scroll viewport's pixel height (the grid's total height is that plus header/toolbar/footer chrome). A **CSS string** (e.g. `'100%'`, `'80vh'`, `'480px'`) sizes the whole grid element and the viewport auto-fits the space left after the chrome — give the grid a sized parent (or use `'100%'` inside a flex/grid cell).", "example": "" }, { "name": "rowHeight", "type": "number | ((row: GridRow, index: number) => number)", "required": false, "doc": "Row height in px (uniform), or a function for variable heights (in-memory mode only).", "default": "36", "example": " (row.note ? 56 : 36)} />" }, { "name": "theme", "type": "'dark' | 'light' | GridTheme", "required": false, "doc": "Built-in theme name, or a token map (a preset such as `midnightTheme`, or your own, spread over one).", "default": "'dark'", "example": "" }, { "name": "resizable", "type": "boolean", "required": false, "doc": "Allow drag-to-resize column widths. A drag (or an autosize) changes that column only: the others keep the width they have on screen, flex columns included, so the ones after it move along. Double-click a grip to give that column back its own width; Reset widths in the column menu gives every column back its own. Opt out per column with `resizable: false`.", "default": "true" }, { "name": "cellSelection", "type": "boolean", "required": false, "doc": "Highlight cells/ranges on click-drag (the blue selection fill + focus ring + fill handle). Set false for a read-only/display grid where clicks should pass straight through to `onRowClick`/`onCellClick` without a selection highlight.", "default": "true" }, { "name": "rowSelection", "type": "boolean", "required": false, "doc": "Show a leading checkbox column for whole-row selection (keyed by row id, stable across sort/filter).", "default": "false" }, { "name": "onRowSelectionChange", "type": "(selectedIds: Array) => void", "required": false, "doc": "Called with the selected row ids whenever the row-selection set changes.", "example": " (selected = ids)} />" }, { "name": "hiddenColumns", "type": "string[]", "required": false, "doc": "Column keys to hide (controlled). Build your own column-picker UI and drive this prop — the grid stays presentation-only. Composed (union) with columns the user hides at runtime via the column menu.", "default": "[]", "example": "" }, { "name": "onColumnVisibilityChange", "type": "(hidden: string[]) => void", "required": false, "doc": "Called with all currently-hidden column keys whenever the runtime set changes (column menu hide/show).", "example": " save('hidden', hidden)} />" }, { "name": "columnMenu", "type": "boolean", "required": false, "doc": "Enable a per-column header menu (a ⋮ trigger) with sort, hide and (with `filterMenu`) filter actions.", "default": "false" }, { "name": "columnsPanel", "type": "boolean", "required": false, "doc": "Show a \"Columns\" button that opens a panel to toggle column visibility (the place to restore columns hidden via the menu). Lazy-loaded.", "default": "false" }, { "name": "virtualizeColumns", "type": "boolean", "required": false, "doc": "Render only the columns within the horizontal scroll window (+ overscan) for very wide grids (100+ columns). Forces fixed-width horizontal scroll; pinned columns always render. Off, the columns fit the grid's width.", "default": "false" }, { "name": "rowClass", "type": "(row: GridRow) => string | undefined", "required": false, "doc": "Return extra CSS class(es) for a data row (e.g. to colour by value). Style them via `:global(.your-class)` since rows live inside the grid.", "example": " (row.status === 'Rejected' ? 'rejected' : undefined)} />" }, { "name": "getRowId", "type": "(row: GridRow) => string | number", "required": false, "doc": "Identity key for rows: selection, focus, pins and flashes follow it. Override for string/UUID/composite keys.", "default": "(row) => row.id", "example": " `${row.account}:${row.sym}`} />" }, { "name": "selectedRowId", "type": "string | number | null", "required": false, "doc": "Controlled \"active row\" highlight (keyed by `getRowId`) — for master-detail / list-detail where one row is selected. Independent of the checkbox `rowSelection` and the cell range selection. `null` = none.", "default": "null" }, { "name": "onRowClick", "type": "(row: GridRow, event: MouseEvent | KeyboardEvent) => void", "required": false, "doc": "Called when a data row is activated by click or Enter (open a detail view, navigate, …). Edit-input and checkbox clicks are excluded.", "example": " (selectedRowId = row.id)} />" }, { "name": "hotkeys", "type": "Hotkeys", "required": false, "doc": "Keys for the app, run before the grid's own. A binding is a key (`'b'`, `'Delete'`, `'Space'`; a symbol by the character it types: `'?'`, not `'Shift+/'`), after any of `Shift+`, `Alt+`, `Ctrl+`, `Meta+` and `Mod+` (Ctrl or ⌘, either). Case does not matter. The handler is given the focused row and column (null when there is none) and the event; return false to leave the key to the grid. Keys go to the grid, not to a binding, while a cell is edited or an input, button or menu inside the grid has them, and a key a binding took runs it once when held down. A binding that cannot be read, or binds a key twice, throws (BG1001–BG1004).", "default": "undefined", "example": " { if (row) buy(row); }, 'Shift+C': cancelAll, Delete: ({ row }) => { if (row) cancel(row); } }} />" }, { "name": "sort", "type": "SortState[]", "required": false, "doc": "Controlled sort order (multi-key, primary first). When set, the grid reflects this and reports changes via `onSortChange` instead of holding its own state. Omit for uncontrolled sorting.", "default": "undefined", "example": " (sort = next)} />" }, { "name": "onSortChange", "type": "(sort: SortState[]) => void", "required": false, "doc": "Called with the new sort order whenever a header is clicked.", "example": " save('sort', sort)} />" }, { "name": "columnFilters", "type": "Record", "required": false, "doc": "Controlled column filters (keyed by column key). When set, the grid reflects these and reports changes via `onFilterChange` instead of holding its own. Omit for uncontrolled filtering.", "default": "undefined", "example": "" }, { "name": "onFilterChange", "type": "(filters: Record) => void", "required": false, "doc": "Called with the full column-filter map whenever a header filter changes.", "example": " (columnFilters = next)} />" }, { "name": "footer", "type": "boolean", "required": false, "doc": "Show a pinned totals row: each column with a `groupAgg` shows that aggregate over all (filtered) rows. In-memory mode only.", "default": "false" }, { "name": "onCellClick", "type": "( info: { row: GridRow; column: ColumnDef; value: unknown }, event: MouseEvent, ) => void", "required": false, "doc": "Called when a cell is clicked, with its row, column and value. Fires in addition to `onRowClick`; excluded for the edit input.", "example": " column.key === 'sym' && openChart(row.sym)} />" }, { "name": "pinnedRows", "type": "GridRow[]", "required": false, "doc": "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`.", "default": "[]", "example": "" }, { "name": "filterRow", "type": "boolean", "required": false, "doc": "Show a per-column filter input row under the header. Rows must match every non-empty column filter (AND). In-memory mode only.", "default": "false" }, { "name": "filterMenu", "type": "boolean", "required": false, "doc": "Enable a per-column header filter menu (lazy-loaded on first open). Each filterable column shows a funnel; the menu's control matches the column type (text/number/date). Override or disable per column with `col.filter`. Works in source mode too (filters are delegated to the `RowSource`); set filters need in-memory data.", "default": "false" }, { "name": "quickFilter", "type": "boolean", "required": false, "doc": "Show a built-in quick-filter search box above the grid that matches across all column values (ANDed with the `filter` prop). With a `source`, its text is sent to `getRows` as `quickFilter`.", "default": "false" }, { "name": "fillHandle", "type": "boolean", "required": false, "doc": "Show an Excel-style fill handle at the selection's bottom-right corner; drag it to copy the selected value(s) across the extended range (editable columns only). In-memory mode only.", "default": "false" }, { "name": "emptyMessage", "type": "string", "required": false, "doc": "Message shown when there are no rows.", "default": "labels.noRows" }, { "name": "labels", "type": "Partial", "required": false, "doc": "Override any string the grid renders itself (menus, filter editor, pager, aria labels). Merged over English defaults — pass only what changes. Interpolated entries are functions so translations can reorder the parts. Resolved per grid.", "default": "{}", "example": "" }, { "name": "defaultColumn", "type": "DefaultColumn", "required": false, "doc": "Settings applied under every column — its own fields (and a registered `cellType`) win.", "default": "undefined", "example": "" }, { "name": "cellTypes", "type": "Record", "required": false, "doc": "Reusable column types, by name. A column with `cellType: 'name'` gets that entry's defaults (format, compare, align, filter, width, a `component` renderer…) under its own fields, and the built-in type named by `extends` for sorting, filtering and export.", "default": "undefined", "example": " Number(v).toLocaleString() } }} />" }, { "name": "filterTypes", "type": "FilterTypes", "required": false, "doc": "Custom filter kinds, by name. A column selects one with `filter: 'name'`; the header filter menu draws its `component` and the view keeps rows for which `test` passes. An unregistered kind filters nothing.", "default": "undefined", "example": " Number(v) >= f.min && Number(v) <= f.max } }} />" }, { "name": "locale", "type": "string", "required": false, "doc": "BCP 47 locale for the grid's own number formatting (aggregation bar, pager row count), and the default for each column's `locale`. Unset, the runtime's locale.", "default": "undefined" }, { "name": "onReady", "type": "(api: GridApi) => void", "required": false, "doc": "Called once, when the grid mounts, with a handle for imperative actions: `scrollToRow`, `focusCell`, `patchRows`, `getSelectedRows`, `autosizeColumns`, `exportCSV`, `getState` / `applyState` and more.", "example": " (api = a)} />" }, { "name": "onViewportChange", "type": "(view: ViewportRange) => void", "required": false, "doc": "Called with the data rows on screen — the rows in view plus the small buffer rendered around them — whenever that set changes (scroll, sort, filter, new data), never for a tick that only changes values. Pass it `createViewportSubscriptions(...).update` from `bo-grid/realtime` to stream just the symbols in view.", "example": "" }, { "name": "flashMotion", "type": "'fade' | 'hold' | 'auto'", "required": false, "doc": "How a flash plays. `'fade'`: the tint fades out. `'hold'`: the tint holds for the flash window, then drops — no CSS animation, so a busy board restyles and repaints a flashing cell twice instead of every frame. `'auto'`: fade while few cells flash at once, hold when many do. A flash that lights whole rows (`flashNewRows`, `api.flashCells`) counts each cell it lights.", "default": "'fade'" }, { "name": "liveSort", "type": "boolean | number", "required": false, "doc": "Keep the sort and filters current while `api.patchRows` changes values in place. When a patch changes a field the grid sorts or filters by, the rows it changed are merged back into place at most every `liveSort` ms (`true`: 500), instead of the whole view being re-sorted. The selection stays on the same rows; nothing moves while a cell is being edited. Off, rows hold their place until `api.refresh()`. It follows `patchRows`; values written into rows any other way still need `api.refresh()`.", "default": "false", "example": "" }, { "name": "pauseOnHover", "type": "boolean", "required": false, "doc": "While the pointer is over the rows, `liveSort` waits, so a row does not move just as it is clicked; the rows re-sort once the pointer leaves (or the window loses focus, or the tab is hidden). Mouse and pen only. Set false for a screen nobody points at.", "default": "true" }, { "name": "staleAfter", "type": "number", "required": false, "doc": "Dim a row when nothing new has come for it for this many ms: a quote whose feed went quiet. News is a patch (`api.patchRows`) that changed the row, or a new object for it in `rows` (the row arrived, or a copy replaced it); a patch that re-sends the values the row already has is not. The row comes back the moment it ticks. Rows already there count from mount, or from when `staleAfter` is turned on. Dimmed with `opacity: var(--bo-stale-opacity, 0.5)`. `0` turns it off.", "default": "0" }, { "name": "flashNewRows", "type": "boolean | number", "required": false, "doc": "Flash a row once when it arrives in `rows` (a new order, a new fill): every cell, in the neutral flash colour, for this many ms (`true`: 600). A row arrives when its id is new; a copy of a row already there does not flash, nor do the rows an empty grid gets (a load or a reload), nor a wholesale replacement (more than 64 rows, and more than an eighth of them, at once). Rows on screen only, as with every flash.", "default": "false", "example": "" }, { "name": "columnHover", "type": "boolean", "required": false, "doc": "Highlight the column under the pointer (body and header) — handy on a wide board. One overlay for the whole column, not a class per cell.", "default": "false" }, { "name": "rowNumbers", "type": "boolean", "required": false, "doc": "A leading row-number column (1, 2, 3… in view order; data rows only), as in a spreadsheet. Its cells are row headers, so screen readers announce the number with each row.", "default": "false" }, { "name": "rowPinning", "type": "boolean", "required": false, "doc": "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()`.", "default": "false" }, { "name": "findBar", "type": "boolean", "required": false, "doc": "Ctrl/⌘+F in the grid opens a find bar: it matches the cells' displayed text (case-insensitive) and steps through matches with Enter / Shift+Enter, focusing and scrolling to each. Escape closes it. Off by default, as it takes Ctrl+F from the browser while the grid has focus. In-memory rows only.", "default": "false" }, { "name": "fitColumns", "type": "boolean", "required": false, "doc": "Scale every column with the grid, in proportion to its `width`, instead of only `flex` columns taking up the change: the grid stays responsive without hand-tuned flex weights. A column never gets narrower than its `minWidth` (64 px, or its own width if smaller, without one) nor wider than its `maxWidth`; when the floors no longer fit, the grid scrolls sideways. It fits until the user sets a width (a drag, an autosize): from then on the columns keep the widths they were given, until Reset widths in the column menu.", "default": "false" }, { "name": "onRowPinChange", "type": "(ids: (string | number)[]) => void", "required": false, "doc": "Called with the pinned row ids (in pin order) whenever they change.", "example": " save('pinned', ids)} />" }, { "name": "loading", "type": "boolean", "required": false, "doc": "Show a loading overlay over the grid (for consumer-driven async work in in-memory mode; source mode shows skeleton rows automatically).", "default": "false" }, { "name": "rowMenu", "type": "(row: GridRow) => Array<{ label: string; onSelect: () => void }>", "required": false, "doc": "Right-click row menu. Return the items for a row; an empty array shows no menu. Each item runs `onSelect` and closes the menu.", "example": " [{ label: 'Cancel order', onSelect: () => cancel(row) }, { label: 'Copy id', onSelect: () => copy(String(row.id)) }]} />" }, { "name": "detail", "type": "Snippet<[{ row: GridRow }]>", "required": false, "doc": "Master-detail: render an expandable detail panel under a row. Adds a leading expand-toggle column. In-memory mode only (overrides rowHeight).", "example": "\n {#snippet detail({ row })}

{row.sym}: {row.note}

{/snippet}\n" }, { "name": "detailHeight", "type": "number", "required": false, "doc": "Height (px) of the expanded detail panel.", "default": "160" }, { "name": "getChildren", "type": "(row: GridRow) => GridRow[] | undefined", "required": false, "doc": "Tree data: return a row's children (undefined/empty = leaf). When set, `rows` are the roots; the grid renders an indented, expandable tree. In-memory mode; filter/sort/group/paginate are not applied to the tree.", "example": " row.children as GridRow[] | undefined} />" }, { "name": "loadChildren", "type": "(row: GridRow) => Promise", "required": false, "doc": "Async tree data: load a row's children on expand (server-backed trees). Returns a promise; the grid shows a loading row, then caches the result. Pair with `hasChildren` (a cheap predicate) so chevrons show without loading. Use instead of `getChildren`. In-memory roots.", "example": " fetch(`/api/accounts/${row.id}/children`).then((r) => r.json())}\n hasChildren={(row) => Number(row.childCount) > 0} />" }, { "name": "hasChildren", "type": "(row: GridRow) => boolean", "required": false, "doc": "Cheap predicate for whether a row has children (drives the expand chevron without loading). Required with `loadChildren`; optional with `getChildren`.", "example": " row.kind === 'folder'} />" }, { "name": "lazyGroups", "type": "LazyGroup[]", "required": false, "doc": "Server-side grouping: top-level group summaries (header data, no leaf rows). Each group's rows load on expand via `loadGroup`. In-memory mode.", "default": "undefined", "example": " fetch(`/api/board/${key}`).then((r) => r.json())} />" }, { "name": "loadGroup", "type": "(key: string) => Promise", "required": false, "doc": "Load a lazy group's leaf rows on expand (returns a promise; shows a loading row, then caches). Required with `lazyGroups`.", "example": " loadExchange(key)} />" }, { "name": "onRowReorder", "type": "(fromIndex: number, toIndex: number) => void", "required": false, "doc": "Enable drag-to-reorder rows via a handle in the first column. Called with the from/to indices on drop — reorder your own `rows` in here. The indices are positions in the rows as shown, so they match `rows` while the list is neither sorted nor filtered. Off for grouped, paged, tree and `source` grids.", "example": " { const next = [...rows]; next.splice(to, 0, ...next.splice(from, 1)); rows = next; }} />" }, { "name": "pageSize", "type": "number", "required": false, "doc": "Rows per page. When > 0 (in-memory mode), shows a pager instead of one long scroll; rows still virtualize within a page. `0` turns paging off.", "default": "0" }, { "name": "pageSizeOptions", "type": "number[]", "required": false, "doc": "Page-size choices for a dropdown in the pager. Picking one re-pages from page 0. Uncontrolled unless you also drive `pageSize` and update it from `onPageSizeChange`.", "default": "undefined", "example": "" }, { "name": "onPageSizeChange", "type": "(size: number) => void", "required": false, "doc": "Called with the new page size when the pager's size dropdown changes.", "example": " (pageSize = n)} />" }, { "name": "page", "type": "number", "required": false, "doc": "Controlled current page (0-based). Omit for uncontrolled paging.", "default": "undefined" }, { "name": "onPageChange", "type": "(page: number) => void", "required": false, "doc": "Called with the new page index when the pager is used.", "example": " (page = p)} />" }, { "name": "onColumnReorder", "type": "(keys: string[]) => void", "required": false, "doc": "Called with the new column-key order after a header drag-reorder.", "example": " save('order', keys)} />" }, { "name": "onColumnResize", "type": "(key: string, width: number) => void", "required": false, "doc": "Called with a column key + new width after a drag-resize. Only the dragged column is reported; `getState()` has every width.", "example": " save(`width:${key}`, width)} />" }, { "name": "ariaLabel", "type": "string", "required": false, "doc": "Accessible name for the grid (`aria-label` on the `role=\"grid\"` root).", "default": "undefined" }, { "name": "filter", "type": "string", "required": false, "doc": "Quick-search text: a row is kept when any column's value, as text, contains it (case-insensitive). Bind it to your own search input.", "default": "''" }, { "name": "groupBy", "type": "string[]", "required": false, "doc": "Column keys to group rows by, outermost first (nested groups with subtotals). In-memory mode only.", "default": "[]", "example": "" }, { "name": "aggregations", "type": "AggKind[]", "required": false, "doc": "Which stats the selection footer shows over a multi-cell range.", "default": "['sum', 'avg', 'count', 'min', 'max']", "example": "" }, { "name": "persistKey", "type": "string", "required": false, "doc": "Remember the user's layout (column order, widths, hidden and pinned columns, pinned rows) in localStorage under this key.", "default": "undefined" }, { "name": "source", "type": "RowSource", "required": false, "doc": "Back the grid with a windowed/server data source instead of `rows`. In source mode, sort + filter are delegated to the source; grouping is not applied.", "default": "undefined", "example": " fetchPage(range.start, range.end, sorts, filter) }} />" }, { "name": "onCellEdit", "type": "(e: CellEditEvent) => void", "required": false, "doc": "Called when an editable cell is committed. Update your row data in here.", "example": " (row[column.key] = value)} />" }, { "name": "cell", "type": "Snippet<[{ row: GridRow; column: ColumnDef; value: unknown }]>", "required": false, "doc": "Render content for `type: 'custom'` columns.", "example": "\n {#snippet cell({ row, column })}{#if column.key === 'chart'}{/if}{/snippet}\n" } ] }, "column": { "description": "Options of a column definition (ColumnDef), shared by every type.", "props": [ { "name": "key", "type": "string", "required": true, "doc": "Field on the row to read for this column's value. Also the column's id: sort, filter, width and hidden state are keyed by it." }, { "name": "header", "type": "string", "required": true, "doc": "The column's title in the header row." }, { "name": "locale", "type": "string", "required": false, "doc": "BCP 47 locale for this column's built-in formatting (`price`, `date`, `currency`, `relative`). Unset, the grid's `locale`, then `en-US`.", "default": "undefined" }, { "name": "value", "type": "(row: GridRow) => unknown", "required": false, "doc": "Computed value: derive this cell's value from the whole row instead of reading `row[key]` (KPIs, ratios, deltas). Flows through display, sort, filter, aggregation, export and conditional formatting. `key` still names the column (and is the sort/filter key) but need not be a real row field. Keep it cheap and pure — it's called during sort/filter. Computed columns aren't editable. In-memory mode (a server source owns its own derivations).", "example": "{ type: 'percent', key: 'chg', header: 'Chg %', value: (row) => ((Number(row.last) - Number(row.ref)) / Number(row.ref)) * 100 }" }, { "name": "spanRows", "type": "boolean | ((a: GridRow, b: GridRow) => boolean)", "required": false, "doc": "Merge this column's cell down over adjacent rows. `true` joins rows with equal (non-blank) values; a function decides for each adjacent pair. Hierarchical: a run also breaks wherever a spanning column to its left breaks, and at group headers. A drawing rule only — sort, filter, copy and export still see every row's own value. In-memory mode only.", "default": "false", "example": "{ type: 'text', key: 'account', header: 'Account', spanRows: true }" }, { "name": "colSpan", "type": "(row: GridRow) => number", "required": false, "doc": "How many columns this cell covers for a given row (1 when unset). Covered cells are not drawn. Clamped at a pinned/scrolling boundary and the last column; the leftmost claim wins. Ignored under `virtualizeColumns`.", "example": "{ type: 'text', key: 'sym', header: 'Symbol', colSpan: (row) => (row.kind === 'note' ? 4 : 1) }" }, { "name": "width", "type": "number", "required": false, "doc": "Width in px. A `flex` column starts from it where columns have fixed widths (pinned columns, `virtualizeColumns`), and `fitColumns` scales columns in proportion to it.", "default": "96" }, { "name": "minWidth", "type": "number", "required": false, "doc": "Smallest width (px) a drag-resize or autosize can give this column; never less than 48. Under `fitColumns`, also the narrowest the column gets before the grid scrolls sideways (64 px without one, or the column's `width` if smaller).", "default": "48" }, { "name": "maxWidth", "type": "number", "required": false, "doc": "Largest width (px) a drag-resize, an autosize, `autoWidth` or `fitColumns` can give this column.", "default": "Infinity" }, { "name": "flex", "type": "number", "required": false, "doc": "flex-grow weight: the column stretches to fill the space the fixed-width columns leave, shared by weight. When the columns no longer fit, the grid scrolls sideways, counting a flex column as its `width`, else its `minWidth`, else 64 px. Unset, the column keeps its `width`.", "default": "undefined" }, { "name": "align", "type": "Align", "required": false, "doc": "Which side the header, cells and footer sit on. Set it to line a custom column's values up under its title.", "default": "'right' for number types, 'left' for the rest", "example": "{ type: 'custom', key: 'pnl', header: 'P&L', align: 'right' }" }, { "name": "cellClass", "type": "string | ((value: unknown, row: GridRow) => string | undefined)", "required": false, "doc": "Extra class(es) for this column's data cells — a static string, or a function of the cell value/row for conditional styling. Target via `:global(.bo-grid .c.your-class)`.", "default": "undefined", "example": "{ type: 'price', key: 'last', header: 'Last', cellClass: (v, row) => (Number(v) >= Number(row.ceiling) ? 'at-ceiling' : undefined) }" }, { "name": "headerClass", "type": "string", "required": false, "doc": "Extra class(es) for this column's header. Target via `:global`.", "default": "undefined" }, { "name": "headerTooltip", "type": "string", "required": false, "doc": "Show a styled tooltip on the column header (the same themed bubble as cell `tooltip`) — describe what the column means, units, caveats. Hovering anywhere on the header reveals it.", "default": "undefined" }, { "name": "headerInfo", "type": "boolean", "required": false, "doc": "Render a small ⓘ info icon in the header as a visible cue that a `headerTooltip` is available. Ignored without `headerTooltip`.", "default": "false" }, { "name": "flash", "type": "boolean | 'auto' | 'up-down' | 'change'", "required": false, "doc": "Flash the cell when its value changes. - `'auto'` (alias `'up-down'`) — the grid derives it: green on a rise, red on a fall, per cell. Nothing to maintain in app code; just stream new values in. This is what you want for a live price board. - `'change'` — a neutral flash on any change, numeric or not (status, qty). - `true` — legacy row-driven mode: the flash follows the row's own `flashSeq`/`flashDir`, so every `flash: true` column in a row flashes together, in one direction, and you bump the counter yourself. Derived modes never flash on first paint or when a row scrolls into view.", "default": "false" }, { "name": "flashMs", "type": "number", "required": false, "doc": "Flash duration in ms — **derived modes only** (`'auto'`/`'up-down'`/ `'change'`); has no effect on legacy `flash: true`, which flashes for the CSS animation's fixed duration regardless. Raise it for a slow feed, lower it for a fast one so flashes don't smear together.", "default": "300" }, { "name": "flashColor", "type": "boolean", "required": false, "doc": "Tint the text in the tick's direction while flashing. Set false when the column colours its own text — e.g. price-limit tones on a VN board (ceiling / floor / reference) — so the flash only lights the background.", "default": "true" }, { "name": "showChange", "type": "boolean | ShowChangeOptions", "required": false, "doc": "Show the size of each change beside the value for a moment — `▲0.15` in the up colour, `▼` down — held, then faded. The delta is the last change, written in the column's own format. Numeric values only; first paint and rows scrolling into view show nothing. `{ format, ms }` sets the text (`format(delta, row)` gets the signed change) and how long it shows (1000 ms unless set). In a narrow column the delta gives way first: the value itself is never cut for it. Meant for one or two key columns (the match price): each change runs a short animation, so a busy board with it on every column pays real frame time.", "default": "false", "example": "{ type: 'price', key: 'last', header: 'Last', flash: 'auto', showChange: { ms: 1500, format: (d) => `${d > 0 ? '+' : ''}${d.toFixed(2)}` } }" }, { "name": "updateMs", "type": "number", "required": false, "doc": "Repaint this column at most every this many ms under `api.patchRows`. Each tick is still written into the row at once (sort, filters, totals and other columns see it), but the cell shows the latest value on its next beat: a value that changes on every tick and is read at a glance (total volume, foreign buy and sell) stops repainting every frame. The first change after a quiet spell shows at once. A flash or `showChange` plays on the repaint, against the value shown before. For the field the column shows (`key`), not a `value` column; when several columns show a field, it waits only if they all set this. Unset, the cell repaints on every tick.", "default": "undefined" }, { "name": "sortable", "type": "boolean", "required": false, "doc": "Set false to disable header-click sorting on this column.", "default": "true" }, { "name": "compare", "type": "(a: unknown, b: unknown) => number", "required": false, "doc": "Custom ascending comparator for this column's values (e.g. enum priority or natural sort). Direction is applied by the grid. In-memory mode only.", "example": "{ type: 'badge', key: 'status', header: 'Status', compare: (a, b) => RANK[String(a)] - RANK[String(b)] }" }, { "name": "groupAgg", "type": "AggKind", "required": false, "doc": "When grouping is active (or with `footer`), show this aggregate of the column on group headers and the totals row.", "default": "undefined", "example": "{ type: 'volume', key: 'qty', header: 'Qty', groupAgg: 'sum' }" }, { "name": "pinned", "type": "boolean | 'left' | 'right'", "required": false, "doc": "Pin this column so it stays visible during horizontal scroll. `true` / `'left'` pins to the left edge, `'right'` to the right.", "default": "false" }, { "name": "editable", "type": "boolean", "required": false, "doc": "Allow inline editing (double-click, Enter or F2 on the focused cell, or type to replace). Number types edit as numbers, `date` as a date. Display types (`badge`, `boolean`, `rating`, `progress`, `tags`, `link`, `avatar`, `relative`, `sparkline`, `custom`) edit only with an `editor`; a computed (`value`) column never does.", "default": "false" }, { "name": "validate", "type": "(value: unknown, row: GridRow) => boolean", "required": false, "doc": "Validate an edited value before it commits (inline edit, custom editor, paste, fill). Return false to reject and keep the old value. Receives the parsed value.", "example": "{ type: 'number', key: 'qty', header: 'Qty', editable: true, decimals: 0, validate: (v) => Number(v) > 0 && Number(v) % 100 === 0 }" }, { "name": "parse", "type": "(raw: string, row: GridRow) => unknown", "required": false, "doc": "Turn typed or pasted text into the stored value (runs before the built-in number/date coercion, which it replaces). Return `undefined` or a non-finite number to reject the input.", "example": "{ type: 'number', key: 'qty', header: 'Qty', editable: true, parse: (raw) => Number(raw.replace(/[,\\s]/g, '')) }" }, { "name": "editor", "type": "Component", "required": false, "doc": "Svelte component that edits this cell in place of the built-in input. Makes any column type editable (with `editable: true`), including display widgets like `rating` or `tags`. It calls `commit(value)` to save — any value, no parsing — or `cancel()`; Escape cancels.", "example": "{ type: 'rating', key: 'score', header: 'Score', editable: true, editor: StarPicker }" }, { "name": "options", "type": "string[]", "required": false, "doc": "Editable choices: when set, editing renders a `