Documentation

@kanunilabs/datagrid-react / GridRowProps

Interface: GridRowProps<TRow>

Type Parameters

TRow

TRow = GridRowData

Properties

centerColumns

centerColumns: ReactColumnRuntime<TRow>[]

Center columns inside the horizontal window.

centerIndices?

optional centerIndices?: readonly number[]

True index in layout.center for each rendered center column.

A column's position in centerColumns is NOT its position in the grid — the block is a window slice with scrolled-past sticky columns spliced onto the front. Deriving the index from the loop counter made every center column report a smaller aria-colindex the further right the grid was scrolled, and put the range anchor and fill handle on the wrong column.

checkboxColumn

checkboxColumn: boolean

Renders the leading checkbox cell.

columnModel

columnModel: ColumnModel<TRow>

detailColumn?

optional detailColumn?: boolean

Render a leading expander cell for master-detail (Enterprise).

detailExpanded?

optional detailExpanded?: boolean

Whether THIS row's detail panel is open.

dropSide?

optional dropSide?: "before" | "after" | null

Which edge to draw the drop line on, or null.

focusedColumnId

focusedColumnId: string | null

Column id holding keyboard focus in this row, or null.

getCellClassName?

optional getCellClassName?: (ctx) => string | undefined

Parameters

ctx

CellSlotContext<TRow>

Returns

string | undefined

getNote?

optional getNote?: (rowKey, columnId, row) => string | null | undefined

This cell's note, or null (gap analysis P3.3). Only the MARKER is decided here — the text itself is revealed by the tooltip layer, which reads the same source at hover time.

Called once per rendered cell, so the config's get has to be a lookup.

Parameters

rowKey

RowKey

columnId

string

row

TRow

Returns

string | null | undefined

getSpan?

optional getSpan?: (rowIndex, columnId) => { height: number; kind: "draw"; offset: number; } | { kind: "covered"; } | null

How this row takes part in a merged block for a column (gap analysis P3.1), or null when the column does not merge here.

Resolved by the caller: deciding it needs the run list AND the window's bounds, and the row knows neither. height is already in pixels because only the caller can ask the engine what the covered rows really measure — an autoHeight row in the middle of a block is not rowHeight tall.

Takes the row index rather than arriving pre-bound to it. A closure per row defeats this component's memo, and with an autoHeight column that turns into a measure/re-render loop React ends with "Maximum update depth exceeded".

Parameters

rowIndex

number

columnId

string

Returns

{ height: number; kind: "draw"; offset: number; } | { kind: "covered"; } | null

gridId

gridId: string

Used to build stable cell ids for aria-activedescendant.

headerRowCount

headerRowCount: number

Number of non-data rows above (header, and the filter row when shown).

height?

optional height?: number

This row's own height, when it is NOT the standard one — a measured autoHeight row, or one getRowHeight sized.

Undefined means standard, and undefined is the case worth optimizing: the element gets no inline style at all and inherits --dg-row-height, so a grid with uniform rows renders exactly the markup it did before any of this existed. Panels do not use this — they carry their height on the node.

index

index: number

Row's ordinal in the view (drives striping).

layout

layout: ColumnLayout<TRow>

leadingSpacer

leadingSpacer: number

Width of the center columns skipped to the left of the window.

node

node: RowNode<TRow>

onCellDoubleClick?

optional onCellDoubleClick?: (ctx) => void

Parameters

ctx

CellSlotContext<TRow>

Returns

void

onCellMouseDown?

optional onCellMouseDown?: (node, columnId) => void

Parameters

node

RowNode<TRow>

columnId

string

Returns

void

onCellPointerDown?

optional onCellPointerDown?: (ctx, event) => void

Parameters

ctx

CellSlotContext<TRow>

event

MouseEvent

Returns

void

onCellPointerEnter?

optional onCellPointerEnter?: (ctx, event) => void

Parameters

ctx

CellSlotContext<TRow>

event

MouseEvent

Returns

void

onRowClick?

optional onRowClick?: (node, rowIndex?, event?) => void

The extra arguments are OPTIONAL on purpose, and ordered to match onRowContextMenu below. The grid passes them so the adapter can resolve WHICH CELL was hit (closest('[data-column-id]')) and publish cellClicked / rowClicked; a caller that only wants the row keeps passing a one-argument function, which stays assignable.

Parameters

node

RowNode<TRow>

rowIndex?

number

event?

MouseEvent<Element, MouseEvent>

Returns

void

onRowContextMenu?

optional onRowContextMenu?: (node, rowIndex, event) => void

Right-click on a data row (row menu).

Parameters

node

RowNode<TRow>

rowIndex

number

event

MouseEvent

Returns

void

onRowDoubleClick?

optional onRowDoubleClick?: (node, rowIndex?, event?) => void

Parameters

node

RowNode<TRow>

rowIndex?

number

event?

MouseEvent<Element, MouseEvent>

Returns

void

onRowMouseDown?

optional onRowMouseDown?: (node, event) => void

Parameters

node

RowNode<TRow>

event

MouseEvent

Returns

void

onToggleDetail?

optional onToggleDetail?: (rowKey) => void

Parameters

rowKey

RowKey

Returns

void

onToggleGroup?

optional onToggleGroup?: (groupKey) => void

Parameters

groupKey

string

Returns

void

onToggleSelect?

optional onToggleSelect?: (node) => void

Parameters

node

RowNode<TRow>

Returns

void

onToggleTreeRow?

optional onToggleTreeRow?: (rowKey) => void

Tree data (P1.4): expand/collapse from the first column's toggle.

Parameters

rowKey

RowKey

Returns

void

renderCellContent?

optional renderCellContent?: (ctx) => ReactNode

Parameters

ctx

CellSlotContext<TRow>

Returns

ReactNode

renderDetail?

optional renderDetail?: (row) => ReactNode

Panel body for a detail row (Enterprise slot).

Parameters

row

TRow

Returns

ReactNode

renderEditForm?

optional renderEditForm?: (rowKey, row) => ReactNode

Body for an in-grid edit form (Enterprise slot, mode: 'form').

row is undefined for a record that does not exist yet — the form is still opened, because the alternative is pressing "New row" and seeing nothing happen.

Parameters

rowKey

RowKey

row

TRow | undefined

Returns

ReactNode

renderRow?

optional renderRow?: (ctx) => ReactNode

Replace the row's CONTENT with arbitrary markup. The row element itself stays — it carries the height, the aria indices and the click handlers the virtualizer and selection depend on, so a template that owned the whole element would have to reproduce all of it correctly to work at all.

Parameters

ctx

RowTemplateContext<TRow>

Returns

ReactNode

revision?

optional revision?: number

Bumped by controller.refreshCells() (P1.7). Read by nothing — its only job is to differ, so the row memo lets a re-render through when the DATA behind a valueGetter changed without the node identity changing.

rowDrag?

optional rowDrag?: RowDragHandlers

Row drag & drop (gap G7). A sticky GRIP is rendered at the row's inline start rather than a lead column: a third lead column would have to be threaded through leadColumnWidth, every sticky offset and every aria-colindex in six components, and this file already warns that those drifting apart is what desynchronizes header and body.

rowFocused?

optional rowFocused?: boolean

Highlight this row as the focused one (focusedRow is on).

rowNumber?

optional rowNumber?: number | null

The number to show, already resolved (see rowNumberAt in geometry).

Resolved by the caller rather than derived from index here, because the ordinal is NOT the number: group banners occupy view positions, and pagination offsets the count. A row that computed it itself would have to know about both.

null means this row is not part of the numbering and gets an empty cell. Pinned rows are the case: they sit outside the result rather than at a position in it, and numbering them from their own index made a pinned row and the first data row both claim to be row 1.

rowNumberColumn?

optional rowNumberColumn?: boolean

Renders the leading row-number cell (gap analysis P3.5).

searchNeedle?

optional searchNeedle?: string

Lower-cased search term to mark up inside cell text (gap analysis P2.4).

A PROP rather than a read of the controller, so it takes part in the row memo: when the search changes, the rows that need new markup re-render, and when it does not, they do not.

selected

selected: boolean

stickyInsets?

optional stickyInsets?: ReadonlyMap<string, number>

Inset per STICKY center column, by id. See RenderGeometry.stickyInsets.

striped

striped: boolean

summaryDefs?

optional summaryDefs?: readonly SummaryDef<TRow>[]

Aggregate definitions rendered inside group headers (Enterprise).

trailingSpacer

trailingSpacer: number

Width of the center columns skipped to the right of the window.