Column options

A column is a plain object (ColumnDef<T> from @dzgrid/core), the same in TypeScript, in Angular’s [columns] and in the Web Component’s columns property; Angular also takes component classes in ui. Each page gives the key’s facts (its type, its default), what it does, an example and, when it shows something, a live grid. A column’s keys change when you give the columns again: update({ columns }).

One is required: id. The rest are optional. TypeScript flags an unknown key; the grid ignores it.

Name	Type	What it does
id (required)	string	The column's name for the grid: required, unique and stable.
field	string	A path into the row, `a.b.c`, where the column reads its value.
value	(row: Readonly<T>) => V	A function that computes the cell from the whole row.
header	string	The column's title, already translated.
headerShort	string	A shorter title, without unit, where room is short.
type	ColumnType	What the cells hold: text, number, day, instant, boolean, enum or custom.
codec	ValueCodec<V>	Your own way to read, show, sort and export the column’s values.
enumOptions	readonly EnumOption[]	The closed list of an `enum` column: each value, its label, its other names.
assumeZone	string	The time zone in which an `instant` column reads a date and time written without an offset.
numberFormat	NumberFormatSpec	How a `number` column shows its numbers: decimals, percent, currency, grouping.
instantFormat	InstantFormatSpec	What an `instant` column shows of each moment: the date, the time, the seconds.
width	number	The column's width in pixels.
minWidth	number	The narrowest the column may become, in pixels.
maxWidth	number	The widest the column may become, in pixels.
flex	number	A share of the room the fixed columns leave.
resizable	boolean	Whether the user may change the column’s width.
movable	boolean	Whether the column may change place or side.
hideable	false	`false`: the user cannot hide the column.
menu	false	`false`: the column has no column menu.
chooser	false	`false`: the column is left out of the columns chooser.
sortable	boolean	`false`: the column cannot be sorted.
groupable	boolean	`false`: rows are never grouped by this column.
aggFunc	AggFuncName | AggFn<V>	The column’s total on group rows, group footers and the grand total.
total	AggFuncName | AggFn<V>	The column’s total in the totals row of a flat grid.
headerVertical	boolean	The column’s title written upwards.
headerWrap	boolean	A long title on several lines.
collapsePriority	number	On a narrow screen, which columns fold under their rows first.
filter	false | { readonly kind?: string; readonly floating?: boo…	Whether the column can be filtered, and how its filter looks.
pinned	Side | null	Keeps the column at the start or the end, while the others scroll.
hidden	boolean	The column starts hidden.
align	'start' | 'center' | 'end'	Where the text sits in the cells: start, center or end.
headerAlign	'start' | 'center' | 'end'	Where the title sits in the header, when not where the cells’ text sits.
wrap	boolean	The cells’ text wraps on several lines.
ui	{ readonly cell?: string; readonly header?: string; reado…	Your own drawing and classes for the column’s cells and header.
headerTooltip	string	The text shown over the column’s header, already translated.
tooltip	(value: V | null, row: Readonly<T>, context: unknown) => …	The text shown over a cell, from its value and row.
merge	true | ((a: SpanCtx<T>, b: SpanCtx<T>) => boolean) | { re…	Consecutive rows with the same value show one tall cell.
rowSpan	(ctx: SpanCtx<T>) => number	How many rows a cell covers, decided from the data.
colSpan	(ctx: SpanCtx<T>) => number	How many columns a cell covers, decided from the data.
groupShow	'open' | 'closed'	Under a collapsible column group: shown only while it is open, or only while it is closed.
csv	'text'	`'text'`: a digits-only value keeps its leading zeros in Excel.
editable	EditableRule<T>	Whether the column’s cells can be edited: yes, or a rule over the row.
validate	(value: V | null, row: Readonly<T>, context: unknown) => …	Your own check of an edited value: a refusal code, or null.
edit	EditChecks<T, V>	The simple checks of an edited value, and the field that edits it.