Column definitions

Inferring columns from row data with defineColumnsFromRows.

defineColumnsFromRows inspects your row data and infers a type and alignment per field, one level into nested objects. Use it as a starting point, then override or extend individual columns.

Column definition shape

Prop	Type	Default	Description
`field`	`FieldPath<Row> \| string`	`—`	Path to this column's value, e.g. "Application.Id".
`id`	`string`	`—`	Stable identity for sizing/order state. Defaults to field.
`headerTemplate`	`Node \| (() => Node)`	`—`	Header content, or a function returning it at render time.
`cellTemplate`	`(context: CellTemplateContext<Row>) => Node`	`—`	Renders this column's cells in place of the raw value.
`type`	`ColumnType`	`—`	The value type of this column's cells, e.g. "currency".
`alignment`	`"left" \| "center" \| "right"`	`—`	Alignment of this column's cells. Falls back to type.
`width`	`number`	`—`	Width in px this column starts at.
`minWidth`	`number`	`—`	Lower bound a resize may not drag below.
`maxWidth`	`number`	`—`	Upper bound a resize may not drag above.
`resizable`	`boolean`	`—`	Whether this column can be resized, overriding the grid-level default.
`reorderable`	`boolean`	`—`	Whether this column can be dragged to a new position, overriding the grid-level default.
`wrap`	`{ header?, cells? }`	`—`	Lets this column's header and/or cell text wrap onto multiple lines instead of truncating.
`headerClassName`	`string`	`—`	Extra class names appended to this column's th.
`cellClassName`	`string`	`—`	Extra class names appended to this column's td, on every row.

Inferred columns

defineColumnsFromRows

Live example

Id	Service	Environment Name	Environment Region	Status	Cost
1	checkout-api	production	us-east-1	healthy	1240.5
2	billing-worker	production	eu-west-1	degraded	860.2
3	search-index	staging	us-east-1	healthy	92.75
4	notifications	production	us-west-2	down	305.4
5	analytics-pipeline	staging	eu-west-1	healthy	145

import { defineColumnsFromRows } from "@gridkitjs/core";
import { DataGridComponent } from "@gridkitjs/react";

const columns = defineColumnsFromRows(rows);

<DataGridComponent columns={columns} dataSource={rows} borders="horizontal" />;

Prop	Type	Default	Description
`defineColumnsFromRows(rows)`	`readonly ColumnDefinition<Row>[]`	`—`	Infers a type and alignment per field, one level into nested objects.
`accessDotted(obj, path)`	`unknown`	`—`	Reads a value at a dotted path, e.g. "Application.Id".
`alignmentForType(type)`	`ColumnAlignment`	`—`	Alignment a column type defaults to — "right" for numbers.
`resolveColumnLabel(column)`	`string`	`—`	The label a column's header falls back to when it sets no headerTemplate.