@kanunilabs/datagrid

@kanunilabs/datagrid / CreateGridConfig

Interface: CreateGridConfig<TRow>

Defined in: datagrid/src/createGrid.ts:374

Extends

• Omit<DataGridCoreConfig<TRow>, "columns">

Type Parameters

TRow

TRow = GridRowData

Properties

alignedGrids?

optional alignedGrids?: string

Defined in: datagrid/src/createGrid.ts:621

Grids naming the same group keep their column layout and horizontal scroll in step — a scrolling body with a totals strip below it. Sort, filter, selection and vertical scroll deliberately do NOT travel. (Aligns with other VANILLA grids; the React registry is separate.)

announcements?

optional announcements?: boolean

Defined in: datagrid/src/createGrid.ts:445

A polite live region reporting row count, sort and selection to screen readers. Default true.

Sorting and filtering are otherwise visual-only events: the rows change under a screen-reader user with nothing said. The text is built from the resolved dictionary, so it is announced in the grid's language.

asyncTransactionWait?

optional asyncTransactionWait?: number

Defined in: datagrid-core/dist/index.d.ts:1172

Milliseconds applyTransactionAsync waits before applying a batch (gap analysis P3.6). Default 50 — about three frames.

Raise it for a feed that ticks faster than the eye can follow; the grid then repaints less often and each pass carries more. Lower it only if the grid must visibly track something else on screen tick for tick.

Inherited from

Omit.asyncTransactionWait

autoColumns?

optional autoColumns?: boolean | InferColumnsOptions

Defined in: datagrid/src/createGrid.ts:636

Tunes the columns derived from the data when columns is omitted: sampleSize, include, exclude, humanizeHeaders, defaults. false turns the derivation off and leaves the grid with no columns.

autoSizeStrategy?

optional autoSizeStrategy?: "none" | "fitGrid" | "fitCells"

Defined in: datagrid/src/createGrid.ts:548

Column widths on startup. 'none' (default) keeps the declared widths.

'fitGrid' divides the grid's width among the columns and RE-RUNS on every grid resize, taking the current widths as its proportions — so a column the user dragged wider stays proportionally wider.

'fitCells' measures what the first rows actually rendered and runs ONCE: before the first paint there is nothing to measure. It can overflow the grid; that is the point of asking for content-width columns.

cellMenu?

optional cellMenu?: boolean | CellMenuOptions

Defined in: datagrid/src/createGrid.ts:586

Right-click menu with Copy / Copy with headers. Default true.

columns

columns: VanillaColumnDef<TRow>[]

Defined in: datagrid/src/createGrid.ts:376

dark?

optional dark?: boolean

Defined in: datagrid/src/createGrid.ts:380

dataSource

dataSource: TRow[] | DataSource<TRow>

Defined in: datagrid-core/dist/index.d.ts:1107

Inherited from

Omit.dataSource

debugMode?

optional debugMode?: boolean

Defined in: datagrid-core/dist/index.d.ts:1163

Console diagnostics for integration mistakes (duplicate keys, unknown columns…).

Inherited from

Omit.debugMode

defaultColumnDef?

optional defaultColumnDef?: Partial<GridColumnDef<TRow>>

Defined in: datagrid-core/dist/index.d.ts:1111

Inherited from

Omit.defaultColumnDef

density?

optional density?: GridDensity

Defined in: datagrid/src/createGrid.ts:379

emptyText?

optional emptyText?: string

Defined in: datagrid/src/createGrid.ts:386

Text of the empty-state overlay. Defaults to the locale dictionary.

enterpriseEdition?

optional enterpriseEdition?: boolean

Defined in: datagrid/src/createGrid.ts:684

The edition flag, set by the Enterprise wrapper — the React prop of the same name. It gates what the CONTROLLER agrees to do (styled exports, master-detail…); without it the masterDetail config is stripped, the way the React Community renderer strips it.

filterDebounce?

optional filterDebounce?: number

Defined in: datagrid/src/createGrid.ts:469

ms before typed filter text reaches the engine. Same default as React: 0 for local data (the pipeline is the debounce), 200 for remote.

filterIconMode?

optional filterIconMode?: "hover" | "always"

Defined in: datagrid/src/createGrid.ts:477

When the header's funnel icon is visible: 'hover' (default) reveals it on hover or keyboard focus, 'always' pins it. An ACTIVE filter stays visible in both modes — it is the only sign that rows are being withheld.

filterPanel?

optional filterPanel?: boolean | "always"

Defined in: datagrid/src/createGrid.ts:486

The strip under the grid that says, in words, what is being filtered — with an × to drop it and a checkbox to suspend it without losing it.

'always' keeps the strip on screen with no filter applied, so the control does not appear and disappear under the pointer.

filterPanelLabels?

optional filterPanelLabels?: DescribeFilterOptions

Defined in: datagrid/src/createGrid.ts:415

Wording for the filter panel's sentence — operator captions, the list separator, and maxListValues (how long an in list gets before it collapses to "N values").

Defaults come from the grid's LOCALE; what you pass overrides key by key, so an app can rename one operator without restating the other thirteen.

filterRow?

optional filterRow?: boolean

Defined in: datagrid/src/createGrid.ts:466

Per-column text inputs under the header.

focusedRow?

optional focusedRow?: boolean

Defined in: datagrid/src/createGrid.ts:495

Highlight the row that holds focus. Default false — the React default.

focusedRowKey?

optional focusedRowKey?: RowKey | null

Defined in: datagrid/src/createGrid.ts:504

Focus this row when the grid is built — the React focusedRowKey prop.

React re-applies it whenever the prop changes; a vanilla config is read once, so this is the STARTING focus and later moves go through grid.controller.focusRow(key). Said plainly because a silently one-shot prop is exactly the kind of thing that costs an afternoon.

footer?

optional footer?: boolean

Defined in: datagrid/src/createGrid.ts:406

Totals row pinned to the bottom edge. Values come from summaries.

footerMenu?

optional footerMenu?: boolean

Defined in: datagrid/src/createGrid.ts:456

Clicking a footer cell opens the aggregation picker — No total / Count / Sum / Average / Min / Max, filtered to what the column's data type supports, so a text column is never offered a Sum (Number() over names totals 0, and a 0 in a footer is indistinguishable from a real zero). Default true; false makes the footer read-only.

With it on, a cell holding no total shows a faint dot — otherwise the only affordance is an empty rectangle nobody thinks to click.

footerPosition?

optional footerPosition?: "top" | "bottom"

Defined in: datagrid/src/createGrid.ts:516

Where the totals row sits: 'bottom' (default) or 'top', directly under the header — the React footerPosition prop. Community, like the totals themselves.

getCellClassName?

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

Defined in: datagrid/src/createGrid.ts:686

Extra classes for a body cell (pending edit, range, fill preview…).

Parameters

ctx

CellSlotContext<TRow>

Returns

string | undefined

getRowHeight?

optional getRowHeight?: (node, index) => number | undefined

Defined in: datagrid-core/dist/index.d.ts:1128

Per-row height, in px. Return undefined for the standard height.

OPT-IN, and deliberately so: supplying it means the grid asks about every row in the view on every projection, which on a million rows is a million calls per filter keystroke. Leave it off and row geometry stays one multiplication — see RowHeightIndex. Detail panels and the edit form do NOT need this; they carry their own height.

For heights that depend on how text wraps, prefer autoHeight on the column: the adapter measures what it rendered instead of asking the app to predict it.

Parameters

node

RowNode<TRow>

index

number

Returns

number | undefined

Inherited from

Omit.getRowHeight

gridId

gridId: string

Defined in: datagrid-core/dist/index.d.ts:1106

Inherited from

Omit.gridId

grouping?

optional grouping?: GroupingConfig

Defined in: datagrid-core/dist/index.d.ts:1134

Inherited from

Omit.grouping

headerFilter?

optional headerFilter?: boolean

Defined in: datagrid/src/createGrid.ts:471

Funnel buttons opening the distinct-value checkbox popup.

headerMenu?

optional headerMenu?: boolean | ((context, defaults) => GridMenuItem<HeaderMenuContext>[])

Defined in: datagrid/src/createGrid.ts:603

Right-click menu on column headers — the React headerMenu prop, DOM-flavoured. true/omitted shows the default items (sort, group, pin, hide, best fit…); false turns it off; a function receives the context and the defaults and returns the finished list, so an app can reorder, drop or append without rebuilding what the grid provides.

highlightSearch?

optional highlightSearch?: boolean

Defined in: datagrid/src/createGrid.ts:530

Wrap search matches in <mark> inside the cell. Default true — the React highlightSearch prop. Applied to the FINISHED text (after the lookup, the formatter and the date format), because that is what the reader searched.

loadingOverlay?

optional loadingOverlay?: number | boolean

Defined in: datagrid/src/createGrid.ts:402

The busy overlay. true (default) shows it after 300 ms of continuous FOREGROUND work; a number sets that delay; false turns it off entirely.

The delay is not decoration. Every filter keystroke re-runs the pipeline, and a pass that finishes in 20 ms would raise and drop the overlay faster than anyone can read it — a strobe. Background passes (a streamed transaction batch, a block fetch caused by scrolling) never raise it at all: the user did not ask for them and is not waiting on them.

controller.showLoadingOverlay() is an explicit decision rather than a flicker to absorb, so it appears at once, delay skipped.

loadingText?

optional loadingText?: string

Defined in: datagrid/src/createGrid.ts:388

Label of the busy overlay. Defaults to the locale dictionary.

locale?

optional locale?: string

Defined in: datagrid/src/createGrid.ts:404

Dictionary locale (core's twelve). Default 'en'.

Overrides

Omit.locale

masterDetail?

optional masterDetail?: MasterDetailConfig

Defined in: datagrid-core/dist/index.d.ts:1142

Expandable detail panels under rows. Enterprise (P9).

Inherited from

Omit.masterDetail

messages?

optional messages?: Partial<GridDictionary>

Defined in: datagrid-core/dist/index.d.ts:1161

Override individual strings without replacing the language.

Merged over the resolved dictionary, so an app can rename "Actions" to its own wording in every language while leaving the other 250 alone.

Inherited from

Omit.messages

notes?

optional notes?: GridNotesConfig<TRow>

Defined in: datagrid/src/createGrid.ts:523

Cell notes (P3.3): a marker on noted cells, the note as the hover tooltip, and — with onChange — add/edit/delete on the row menu with an anchored textarea. Enterprise: ignored (reported under debugMode) without enterpriseEdition, the React rule.

onCellDoubleClick?

optional onCellDoubleClick?: (ctx) => void

Defined in: datagrid/src/createGrid.ts:689

Parameters

ctx

CellSlotContext<TRow>

Returns

void

onCellPointerDown?

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

Defined in: datagrid/src/createGrid.ts:687

Parameters

ctx

CellSlotContext<TRow>

event

MouseEvent

Returns

void

onCellPointerEnter?

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

Defined in: datagrid/src/createGrid.ts:688

Parameters

ctx

CellSlotContext<TRow>

event

MouseEvent

Returns

void

onFocusedRowChanged?

optional onFocusedRowChanged?: (event) => void

Defined in: datagrid/src/createGrid.ts:506

Fired when the focused ROW changes — not on every cell move within it.

Parameters

event

row?

TRow

rowKey

RowKey | null

Returns

void

onOpenFilterBuilder?

optional onOpenFilterBuilder?: () => void

Defined in: datagrid/src/createGrid.ts:493

Opens the app's filter builder from the panel's chevron. Without it the chevron is not drawn, because a control that opens nothing is worse than no control — React's rule, and the Enterprise wrapper wires it to its own builder.

Returns

void

onRowActivate?

optional onRowActivate?: (node) => void

Defined in: datagrid/src/createGrid.ts:510

Fired on Enter / double-click over the focused row.

Parameters

node

RowNode<TRow>

Returns

void

onRowClick?

optional onRowClick?: (node) => void

Defined in: datagrid/src/createGrid.ts:508

Fired on a click anywhere in a row, before the grid's own row event.

Parameters

node

RowNode<TRow>

Returns

void

pagination?

optional pagination?: PaginationConfig

Defined in: datagrid-core/dist/index.d.ts:1143

Inherited from

Omit.pagination

palette?

optional palette?: GridPalette

Defined in: datagrid/src/createGrid.ts:378

pinnedBottomRows?

optional pinnedBottomRows?: readonly TRow[]

Defined in: datagrid/src/createGrid.ts:460

Rows fixed below the scrolling body.

pinnedTopRows?

optional pinnedTopRows?: readonly TRow[]

Defined in: datagrid/src/createGrid.ts:458

Rows fixed above the scrolling body. Adapter chrome, like React's.

printLayout?

optional printLayout?: boolean | PrintLayoutOptions

Defined in: datagrid/src/createGrid.ts:628

Render EVERY row while the browser prints, so the print engine paginates real content instead of one clipped screenful. true = only while the print dialog is open; an options object can pin it always (report pages) or move the maxRows refusal point.

remote?

optional remote?: RemoteConfig

Defined in: datagrid-core/dist/index.d.ts:1132

Tuning for a remote DataSource (ignored for array data).

Inherited from

Omit.remote

renderCellContent?

optional renderCellContent?: (ctx) => string | Node | undefined

Defined in: datagrid/src/createGrid.ts:665

Replace a body cell's content. undefined = the default painter runs.

Parameters

ctx

CellSlotContext<TRow>

Returns

string | Node | undefined

renderDetail?

optional renderDetail?: (row) => string | Node

Defined in: datagrid/src/createGrid.ts:671

Panel body for a master-detail row. With the engine's masterDetail config present, supplying this turns the leading expander column on — the React renderDetail prop, DOM-typed.

Parameters

row

TRow

Returns

string | Node

renderEditForm?

optional renderEditForm?: (rowKey, row) => string | Node

Defined in: datagrid/src/createGrid.ts:677

Body for an in-grid edit form row (mode: 'form'). row is undefined for a record that does not exist yet — the form still opens, because the alternative is pressing "New row" and seeing nothing happen.

Parameters

rowKey

RowKey

row

TRow | undefined

Returns

string | Node

renderOverlay?

optional renderOverlay?: () => Node | null

Defined in: datagrid/src/createGrid.ts:645

An absolutely-positioned layer over the viewport {M} the React renderOverlay, DOM-typed. Returns the node to show, or null for none.

Called on every repaint like React's is; returning the SAME node twice leaves it mounted, so a layer that owns focus or an animation is not torn down underneath itself.

Returns

Node | null

renderRow?

optional renderRow?: (context) => string | Node | null | undefined

Defined in: datagrid/src/createGrid.ts:436

Replace each DATA row's content. Group headers and detail panels keep their own rendering — a template that had to handle those too would be a template of the whole grid.

The row ELEMENT stays: it carries the height, the aria indices, the zebra and selection classes and the handlers the virtualizer depends on. What the template replaces are the CELLS — including the lead ones, so the row number, the detail expander and the selection checkbox are not drawn while it is on, and in-cell editing and range selection have nothing to attach to. (The drag grip survives: it is not a cell.) React draws exactly the same line.

For per-cell customization that keeps the column layout, use a column's renderCell.

Returning the SAME node you returned last time is how a template says "nothing changed" — the DOM is then left alone, so a focused input inside it keeps its caret.

Parameters

context

RowTemplateContext<TRow>

Returns

string | Node | null | undefined

reorderable?

optional reorderable?: boolean

Defined in: datagrid/src/createGrid.ts:464

Drag a header onto another to reorder. Default true.

resizable?

optional resizable?: boolean

Defined in: datagrid/src/createGrid.ts:462

Drag the trailing edge of a header to resize. Default true.

rowDrag?

optional rowDrag?: RowDragConfig<TRow>

Defined in: datagrid/src/createGrid.ts:614

Drag rows to reorder them, and — with a shared group — between two grids. A grip appears at the start of each row on hover. Reordering the grid's own array only works on an UNSORTED view (the React caveat).

rowHeight?

optional rowHeight?: number

Defined in: datagrid-core/dist/index.d.ts:1114

The STANDARD row height in px. Default 28.

Inherited from

Omit.rowHeight

rowKey

rowKey: RowKeyResolver<TRow>

Defined in: datagrid-core/dist/index.d.ts:1109

REQUIRED: stable row identity — selection, editing and live updates hang off it.

Inherited from

Omit.rowKey

rowMenu?

optional rowMenu?: GridMenuItem<RowMenuContext<TRow>>[] | ((context) => GridMenuItem<RowMenuContext<TRow>>[])

Defined in: datagrid/src/createGrid.ts:593

App-defined right-click menu for data rows — the React rowMenu prop, DOM-flavoured. A function receives the row that was clicked so the items can depend on it. The grid's own entries (Copy…) append BELOW after a separator, so an app's menu keeps the order it wrote.

rowNumbers?

optional rowNumbers?: boolean

Defined in: datagrid/src/createGrid.ts:384

Leading 1-based row-number column. Adapter chrome; core never sees it.

scrolling?

optional scrolling?: ScrollingConfig

Defined in: datagrid-core/dist/index.d.ts:1145

Virtual (default) or infinite scrolling.

Inherited from

Omit.scrolling

searchDebounce?

optional searchDebounce?: number

Defined in: datagrid/src/createGrid.ts:658

Search box debounce, ms. React's default.

selection?

optional selection?: SelectionConfig

Defined in: datagrid-core/dist/index.d.ts:1133

Inherited from

Omit.selection

showRowCount?

optional showRowCount?: boolean

Defined in: datagrid/src/createGrid.ts:564

Deprecated

Retired 2026-08-15 and inert in BOTH renderers; accepted so existing call sites keep working.

It rendered a strip under the grid whose only content was the row count. The per-column totals it once carried moved into the footer ROW, where each number sits under its own column — leaving a whole bar to say one number, printed a second time whenever the Enterprise status bar was on.

The count lives in the status bar (Enterprise: total, filtered, selected) or in the pager, which shows the total when pagination is on.

Unlike React, this renderer says so once in the console when you set it — a vanilla caller has no editor surfacing the @deprecated tag.

sortable?

optional sortable?: boolean

Defined in: datagrid/src/createGrid.ts:536

Sorting for the whole grid. Default true; false turns every header into a plain label. A column can still opt out on its own with sortable: false on its definition — the React prop of the same name.

sorting?

optional sorting?: SortingConfig

Defined in: datagrid-core/dist/index.d.ts:1112

Inherited from

Omit.sorting

stateStoring?

optional stateStoring?: StateStoringConfig

Defined in: datagrid/src/createGrid.ts:630

Persist and restore the view (sort, filters, widths…). Core's service.

striped?

optional striped?: boolean

Defined in: datagrid/src/createGrid.ts:382

Zebra rows. Default TRUE — the React renderer's default.

summaries?

optional summaries?: SummaryDef<TRow>[]

Defined in: datagrid-core/dist/index.d.ts:1147

Footer totals over the filtered rows.

Inherited from

Omit.summaries

theme?

optional theme?: GridTheme

Defined in: datagrid/src/createGrid.ts:377

toolbar?

optional toolbar?: boolean

Defined in: datagrid/src/createGrid.ts:566

Quick-search + CSV export bar above the grid.

toolbarColumnChooser?

optional toolbarColumnChooser?: boolean

Defined in: datagrid/src/createGrid.ts:568

"Columns" button in the toolbar opening the visibility chooser.

toolbarExcel?

optional toolbarExcel?: boolean

Defined in: datagrid/src/createGrid.ts:582

Excel entries (all rows / selected rows) on the toolbar's export menu. Enterprise: shown only under enterpriseEdition, hidden rather than shown-and-failing — the controller would throw, and a menu entry whose only outcome is an error is worse than no entry (the React rule).

toolbarItemsAfter?

optional toolbarItemsAfter?: HTMLElement[]

Defined in: datagrid/src/createGrid.ts:573

Extra toolbar buttons, appended after the grid's own — the React toolbarItemsAfter prop, DOM-flavoured. Ignored without toolbar.

toolbarItemsBefore?

optional toolbarItemsBefore?: HTMLElement[]

Defined in: datagrid/src/createGrid.ts:575

Extra toolbar buttons, BEFORE the grid's own — React's toolbarItemsBefore.

toolbarPdf?

optional toolbarPdf?: boolean

Defined in: datagrid/src/createGrid.ts:584

PDF entry on the export menu — Enterprise, same gate as toolbarExcel.

tooltip?

optional tooltip?: boolean | { delay?: number; enabled?: boolean; showOnTruncation?: boolean; }

Defined in: datagrid/src/createGrid.ts:654

Hover tooltips. false disables everything, the truncation fallback included; the object form is the React GridTooltipConfig.

enabled: false used to be read as "an object, so tooltips are on" and only its delay was honoured {M} the one spelling a developer reaches for to turn the feature off did nothing at all (audit J2, 2026-08-25).

tree?

optional tree?: TreeDataConfig<TRow>

Defined in: datagrid-core/dist/index.d.ts:1140

Hierarchical rows (Enterprise, P1.4): each row points at its parent, the grid renders the tree. Mutually exclusive with grouping — tree wins and grouping is ignored (reported under debugMode). Client row model only.

Inherited from

Omit.tree

virtualization?

optional virtualization?: VirtualizationConfig

Defined in: datagrid-core/dist/index.d.ts:1129

Inherited from

Omit.virtualization

worker?

optional worker?: WorkerConfig

Defined in: datagrid-core/dist/index.d.ts:1130

Inherited from

Omit.worker