bo-grid v3.1.0

Rows

.md

Row styles

Style rows and cells from their data with classes, react to a row being opened, and give rows a right-click menu.

Rows and cells take classes chosen from their data: rowClass for a whole row, a column’s cellClass for its cells. The same page covers what a row does when used: onRowClick when it is opened, and rowMenu for its right-click menu.

Falling stocks are dimmed by rowClass, and big gains are bold through cellClass. Click a row, or right-click it for its menu:

row-styles.svelte GitHub ↗

Classes from the data

rowClass(row) returns a class for a data row, or nothing. Rows render inside the grid, so target the class with :global(...):

<Grid {rows} {columns} rowClass={(r) => (Number(r.change) < 0 ? 'falling' : undefined)} height={480} />

<style>
  :global(.bo-grid .row.falling) {
    opacity: 0.6;
  }
</style>

For one column, cellClass is a class string, or a function of the cell’s value and row; headerClass styles the column’s header:

{ type: 'number', key: 'pnl', header: 'P&L', cellClass: (v) => (Number(v) < 0 ? 'loss' : 'gain'), headerClass: 'num-head' }
:global(.bo-grid .c.loss) { color: var(--bo-down); }

For colour cues that scale with the value, such as bars and heat tints, see Conditional formatting.

Opening a row

onRowClick(row, event) fires when a row is clicked, or when Enter is pressed on its focused cell. Clicks in an edit input or a checkbox don’t count. Use it to open a detail view or navigate; to keep the opened row highlighted, pass its id as selectedRowId (see Row selection).

A row menu

rowMenu(row) returns the items of a right-click menu for that row; return an empty array for no menu. Each item has a label and an onSelect, and the menu closes after an item runs, on a click outside, or on Esc. From the keyboard, the ContextMenu key or Shift+F10 opens it at the focused cell.

<Grid {rows} {columns} rowMenu={(r) => [{ label: 'Delete', onSelect: () => remove(r.id) }]} height={480} />

Reference

Grid props from the types
rowClass (row: GridRow) => string | undefined

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 
<Grid {rows} {columns} height={480} rowClass={(row) => (row.status === 'Rejected' ? 'rejected' : undefined)} />
onRowClick (row: GridRow, event: MouseEvent | KeyboardEvent) => void

Called when a data row is activated by click or Enter (open a detail view, navigate, …). Edit-input and checkbox clicks are excluded.

Example 
<Grid {rows} {columns} height={480} {selectedRowId} onRowClick={(row) => (selectedRowId = row.id)} />
selectedRowId string | number | null Default null

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.

rowMenu (row: GridRow) => Array<{ label: string; onSelect: () => void }>

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 
<Grid {rows} {columns} height={480}
  rowMenu={(row) => [{ label: 'Cancel order', onSelect: () => cancel(row) }, { label: 'Copy id', onSelect: () => copy(String(row.id)) }]} />
Column options from the types
cellClass string | ((value: unknown, row: GridRow) => string | undefined) Default undefined

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).

Example 
{ type: 'price', key: 'last', header: 'Last', cellClass: (v, row) => (Number(v) >= Number(row.ceiling) ? 'at-ceiling' : undefined) }
headerClass string Default undefined

Extra class(es) for this column's header. Target via :global.