type

The kind of value in the column: how it is read, shown, sorted, filtered and edited.

Type	ColumnType — "number" | "boolean" | "text" | "day" | "instant" | "enum" | "custom"
Default	'text'
Live update (update())	Yes — give the columns again (update({ columns }))
Declared in	packages/core/src/columns/defs.ts

What it does

• 'text': any text.
• 'number': a number, shown in the grid’s locale (numberFormat), at the end of the cell.
• 'day': a calendar day, the string 'YYYY-MM-DD'.
• 'instant': a moment, epoch milliseconds or ISO text with an offset (Z, +02:00), shown in the grid’s timeZone (instantFormat, assumeZone). A JavaScript Date is not read: give date.getTime().
• 'boolean': yes or no.
• 'enum': one value of a closed list, which enumOptions gives.
• 'custom': your own codec, which it needs.

A value the type cannot read leaves the cell empty, never guessed; sorting the column tells it with an invalid-cell-value warning (ten per column at most). An unknown type, an enum without enumOptions or a custom without codec is refused with an invalid-column error, and the column is left out. The type also picks the column’s filter.

Example

import { createGrid } from '@dzgrid/dom';
import { EN } from '@dzgrid/dom/locales/en';

type Parcel = { id: string; code: string; weight: number; sentOn: string; arrivedAt: number | null; insured: boolean };

createGrid<Parcel>(document.getElementById('parcels')!, {
  rows: [{ id: 'p1', code: 'px-104', weight: 2.4, sentOn: '2026-03-02', arrivedAt: 1772442000000, insured: true }],
  columns: [
    { id: 'code', header: 'Code' },
    { id: 'weight', header: 'Weight', type: 'number' },
    { id: 'sentOn', header: 'Sent on', type: 'day' },
    { id: 'arrivedAt', header: 'Arrived', type: 'instant' },
    { id: 'insured', header: 'Insured', type: 'boolean' },
  ],
  getRowId: (r) => r.id,
  messages: EN,
});

Live demo

See also

• codec, filter.
• Columns.