Settings

What createGrid takes, what Angular’s <dz-grid> takes as inputs and the Web Component as attributes or properties: the same settings everywhere. Each page gives the setting’s facts (its type, its default, whether update() changes it), what it does, an example in the three flavours and, when it shows something, a live grid.

Three are required: getRowId, columns and messages. The rest are optional.

Name	Type	What it does
rows	Iterable<T>	The rows the grid shows, when the browser holds them all.
getRowId (required)	(row: T) => RowIdInput	How the grid tells one row from another: required.
columns (required)	readonly ColumnOrGroup<T>[]	The columns, or groups of them: required.
messages (required)	GridMessages	Every text the grid shows or says, in one language: required, the grid bundles none.
locale	string	How numbers and dates are written and how text sorts, apart from the texts' language.
timeZone	string	The time zone instants are shown, filtered and edited in.
numerals	'latn' | 'locale'	Latin digits everywhere, or the language's own.
direction	'auto' | 'ltr' | 'rtl'	Left to right, right to left, or the page's direction and its changes.
density	'compact' | 'comfortable' | 'spacious'	How tall the rows are and how much room the cells' sides take.
headers	'shown' | 'hidden'	The column headers on screen, or hidden from the eyes and kept for screen readers.
multiSort	boolean	Let the user sort by several columns, or by one only.
sameRow	(a: T, b: T) => boolean	On a full reload, keep a row that did not really change as it was.
rowHeight	number	The rows' height in pixels, over the density's.
headerHeight	number | HeaderHeights	The header rows' height in pixels: the column headers, and the column-group rows above them.
selection	{ readonly mode: 'none' | 'single' | 'multi'; readonly ch…	Let the user select rows: one or several, with boxes or clicks, under your rules.
context	unknown	The application's own context, handed to every callback and part.
rowClass	(c: RowClassContext<T>) => string | null | undefined	CSS classes for a data row, from its data.
overlay	'loading' | 'error' | null	Cover the rows with « Loading… » or the error message, or leave the grid to decide.
busy	boolean	Say that the rows on screen are being reloaded, without covering them.
label	string	The grid's accessible name, already translated.
tooltips	{ readonly delayMs?: number }	How long the pointer rests before a tooltip shows.
onEvent	(e: GridEvent<T>) => void	One function that hears every grid event.
injectStyles	boolean	Whether the grid writes its own layout CSS into the page, or your page loads it.
nonce	string	The nonce the grid puts on the <style> elements it writes, for a strict Content Security Policy.
overscan	{ readonly rows?: number; readonly cols?: number }	How many rows and columns the grid draws beyond the view.
searchWarmup	'idle' | 'off'	Prepare the quick search in idle time, so the first keystroke is instant.
parts	Readonly<Record<string, SlotPart>>	Your own drawing for a cell, a header, a tooltip, the overlay: parts by name.
source	SourceBinding<T>	Rows that live on a server: the grid asks for what it shows.
operations	OperationsInput	Where filtering, search, sorting and paging run: the browser or the server.
pagination	PageOptions	Show the rows one page at a time: the page size and the sizes offered.
filterKinds	readonly AnyFilterKind[]	Your own kinds of column filter, for the browser and for a server.
clock	() => number	The « now » the date shortcuts and « today » count from.
fullWidth	(row: Readonly<T>) => boolean | { readonly part?: string }	Rows drawn as one cell across the whole width: a title, a note.
motion	boolean	Switch every movement of the grid off, whatever the reader's system asks.
theme	GridTheme	The theme's CSS variables, set from code for one grid, by typed keys.
icons	GridIcons	Your own icons for the grid's marks: sort, filter, menu, toggle, submenu, grip.
features	readonly GridFeature[]	The optional features the grid is made with: filters, pages, editing, export…