@kanunilabs/datagrid-react / ReactGridColumnDef
Interface: ReactGridColumnDef<TRow>
Defined in: datagrid-react/src/types.ts:54
Extends
GridColumnDef<TRow>
Type Parameters
TRow
TRow = GridRowData
Properties
align?
optionalalign?:ColumnAlign
Defined in: datagrid-core/dist/index.d.ts:562
Inherited from
autoHeight?
optionalautoHeight?:boolean
Defined in: datagrid-react/src/types.ts:89
Let this column's text WRAP, and let the row grow to fit it.
The row is measured after it renders and the measurement is fed back to the window engine, so the scrollbar and every row offset account for the real height. Two consequences worth knowing before turning it on:
• only RENDERED rows can be measured. Rows below the viewport are assumed to be the standard height until they scroll into it, so the scrollbar firms up as the user travels. Every virtualized grid that measures has this property; the alternative is laying out every row up front, which at a million rows is not an alternative. • measurements are dropped when a column is resized, because the width is what decided where the text wrapped.
When the height is known WITHOUT measuring, getRowHeight on the config is
both cheaper and exact.
band?
optionalband?:string|string[]
Defined in: datagrid-core/dist/index.d.ts:518
Caption(s) of the band row(s) above this column's header — 'Sales' for
one level, ['Contact', 'Address'] for two.
A PATH on the column rather than a nested column tree: the flat list is what carries width, order, pinning, visibility, persistence and virtualization, so keeping the model flat means banding costs nothing in the pipeline. Adjacent columns with the same path merge into one band cell.
Inherited from
bandShow?
optionalbandShow?:"open"|"closed"
Defined in: datagrid-core/dist/index.d.ts:530
Whether this column survives its band being collapsed (gap analysis P2.6).
- omitted — always shown; collapsing the band does not affect it
'open'— only while the band is OPEN (the detail columns)'closed'— only while the band is COLLAPSED (the summary that stands in for them)
A band with no column declaring either is not collapsible: there would be nothing to hide, and a toggle that does nothing is worse than no toggle.
Inherited from
calculateSortValue?
optionalcalculateSortValue?: (row) =>unknown
Defined in: datagrid-core/dist/index.d.ts:583
Sort on a derived value (e.g. custom ordering) instead of the cell value.
Parameters
row
TRow
Returns
unknown
Inherited from
GridColumnDef.calculateSortValue
cellClassName?
optionalcellClassName?:string| ((ctx) =>string|undefined)
Defined in: datagrid-react/src/types.ts:70
Extra class(es) on every cell of this column — a monospace SKU column, a
status tint. A function form allows per-VALUE classes without paying for a
full renderCell, which would replace the cell's content and lose the
built-in truncation and alignment.
comparator?
optionalcomparator?: (valueA,valueB,rowA,rowB,descending) =>number
Defined in: datagrid-core/dist/index.d.ts:606
Order this column by an arbitrary rule (gap analysis P1.8) — the escape
hatch for orderings no data type describes: a T-shirt size scale, a
domain-specific priority, a locale rule Intl.Collator gets wrong.
Prefer calculateSortValue when the rule can be expressed as a value to
sort BY. That keeps the fast paths; this one closes them for this column:
• the radix/typed-array sort cannot run — a byte order cannot be derived from a function, so the column falls back to a comparator sort; • the WORKER cannot run the query at all — functions are unclonable, so a sort touching this column stays on the main thread whatever the row count. Correctness is preserved; the speed is what is spent.
The values arrive exactly as the column produces them, null/undefined
INCLUDED: a custom order usually wants to place its own blanks, and the
built-in "nils last" rule would pre-empt that decision.
descending is informational — the grid already inverts the result for a
descending sort. It exists for rules that must NOT flip (keeping a
"Total" row last in both directions).
Parameters
valueA
unknown
valueB
unknown
rowA
TRow
rowB
TRow
descending
boolean
Returns
number
Inherited from
dataType?
optionaldataType?:GridDataType
Defined in: datagrid-core/dist/index.d.ts:558
Inherited from
dateFormat?
optionaldateFormat?:string
Defined in: datagrid-core/dist/index.d.ts:617
How a date column is written and typed — 'dd.MM.yyyy', 'MM/dd/yyyy',
'dd/MM/yy', any separator. Defaults to 'yyyy-MM-dd'.
Governs BOTH directions: the cell renders through it, and the editor masks keystrokes into it, so what the user types back is the shape they were shown. Ignored on any other data type.
Inherited from
editable?
optionaleditable?:boolean
Defined in: datagrid-core/dist/index.d.ts:574
Editable in an Enterprise grid with editing on. Defaults to true; set false for a computed or server-owned column so the editor never opens on it.
Inherited from
excelFormat?
optionalexcelFormat?:string
Defined in: datagrid-core/dist/index.d.ts:624
Excel number format for the styled export (e.g. '#,##0.00', '"$"#,##0',
'0.0%'). Without it a number column gets a plain thousands separator —
currency and percent are never guessed, because guessing changes what the
number means.
Inherited from
field?
optionalfield?:string
Defined in: datagrid-core/dist/index.d.ts:507
Property read from the row object (dot paths NOT expanded — use valueGetter).
Inherited from
filterable?
optionalfilterable?:boolean
Defined in: datagrid-core/dist/index.d.ts:566
Inherited from
groupable?
optionalgroupable?:boolean
Defined in: datagrid-core/dist/index.d.ts:569
Inherited from
headerName?
optionalheaderName?:string
Defined in: datagrid-core/dist/index.d.ts:508
Inherited from
headerTooltip?
optionalheaderTooltip?:string
Defined in: datagrid-react/src/types.ts:111
Tooltip for this column's HEADER cell.
id?
optionalid?:string
Defined in: datagrid-core/dist/index.d.ts:505
Stable identity; defaults to field. Required when two columns share a field.
Inherited from
lookup?
optionallookup?:ColumnLookup<TRow>
Defined in: datagrid-core/dist/index.d.ts:579
Value list for a code→label column. Drives the select editor, and (for a static list) the displayed text.
Inherited from
maxWidth?
optionalmaxWidth?:number
Defined in: datagrid-core/dist/index.d.ts:561
Inherited from
minWidth?
optionalminWidth?:number
Defined in: datagrid-core/dist/index.d.ts:560
Inherited from
pin?
optionalpin?:ColumnPin
Defined in: datagrid-core/dist/index.d.ts:563
Inherited from
renderCell?
optionalrenderCell?: (ctx) =>ReactNode
Defined in: datagrid-react/src/types.ts:56
Expensive escape hatch — renders arbitrary React per cell.
Parameters
ctx
CellRenderContext<TRow>
Returns
ReactNode
renderEditor?
optionalrenderEditor?: (ctx) =>ReactNode
Defined in: datagrid-react/src/types.ts:63
Replace the built-in editor for this column (Enterprise). Use for controls the grid does not ship — a colour picker, a masked input, an autocomplete against your own API.
Parameters
ctx
EditorRenderContext<TRow>
Returns
ReactNode
renderHeader?
optionalrenderHeader?: (ctx) =>ReactNode
Defined in: datagrid-react/src/types.ts:57
Parameters
ctx
HeaderRenderContext<TRow>
Returns
ReactNode
reorderable?
optionalreorderable?:boolean
Defined in: datagrid-core/dist/index.d.ts:568
Inherited from
resizable?
optionalresizable?:boolean
Defined in: datagrid-core/dist/index.d.ts:567
Inherited from
sortable?
optionalsortable?:boolean
Defined in: datagrid-core/dist/index.d.ts:565
Inherited from
spanRows?
optionalspanRows?:boolean|SpanComparator<TRow>
Defined in: datagrid-core/dist/index.d.ts:557
Merge this column's cell down over consecutive rows holding the same value (gap analysis P3.1).
Computed over the CURRENT view, which is the point: sorting a column into
A A A B B is what makes the merge meaningful, and the same rows unsorted
merge nothing. Blanks never merge, a group banner interrupts a run, and a
run of one is left as an ordinary cell.
true compares with Object.is. Pass a function for values that need
their own notion of equality — a column of objects, or a case-insensitive
code.
The merged block is still N cells to everything else: selection, editing, the clipboard and export see the rows the data has. Only the DRAWING is merged, which is what a reader means by it.
Inherited from
sparkline?
optionalsparkline?:ColumnSparkline
Defined in: datagrid-core/dist/index.d.ts:539
Draw this column's value as an in-cell chart (gap analysis P2.2).
The cell's value must be an ARRAY of numbers — a series per row. Config
lives here, next to band and lookup, because it is data description
rather than rendering: which numbers, and against what scale. The drawing
belongs to the adapter, and the packaged renderer is Enterprise.
Inherited from
tooltip?
optionaltooltip?:string| ((ctx) =>string|null|undefined)
Defined in: datagrid-react/src/types.ts:102
Tooltip text for this column's cells (P2.1).
Without it, a cell whose text does not fit still gets one — the grid falls back to showing the clipped text in full. Set this when the tooltip should say something the cell does NOT: a code's description, an abbreviation spelled out, why a value is flagged.
The function form runs only for the cell under the pointer, so it may be as expensive as it needs to be. Return null (or an empty string) to suppress the tooltip for that cell — including the truncation fallback.
tooltipField?
optionaltooltipField?:string
Defined in: datagrid-react/src/types.ts:109
Read the tooltip from another FIELD of the row — the common case where the
long form already travels with the data (status / statusDetail).
tooltip wins if both are given.
valueFormatter?
optionalvalueFormatter?: (value,row) =>string
Defined in: datagrid-core/dist/index.d.ts:608
Display formatting hook (adapters render the returned string).
Parameters
value
unknown
row
TRow
Returns
string
Inherited from
valueGetter?
optionalvalueGetter?: (row) =>unknown
Defined in: datagrid-core/dist/index.d.ts:581
Derive the cell value; overrides field access.
Parameters
row
TRow
Returns
unknown
Inherited from
visible?
optionalvisible?:boolean
Defined in: datagrid-core/dist/index.d.ts:564
Inherited from
width?
optionalwidth?:number
Defined in: datagrid-core/dist/index.d.ts:559