Column definitions

Columns are plain objects. The column id is id if you set one, otherwise field; sorting, filters and column state all refer to columns by that id.

Columns are plain objects. The column id is id if you set one, otherwise field; sorting, filters and column state all refer to columns by that id.

const columns = [
  { field: 'id', header: 'ID', type: 'number', format: '0', width: 80, pinned: 'left' },
  { field: 'name', header: 'Name', flex: 1, minWidth: 160 },
  { field: 'price', header: 'Price', type: 'number', format: 'currency:KRW' },
  { field: 'qty', header: 'Qty', type: 'number' },
  // computed column
  { id: 'amount', header: 'Amount', type: 'number', format: '#,##0', valueGetter: row => row.price * row.qty },
  { field: 'status', header: 'Status', filter: 'set', cellClass: p => `status-${p.value}` },
];

Name	Type	Description
`field`	`string`	Property of the row object shown in this column.
`id`	`string`	Column id. Defaults to field; required when there is no field.
`header`	`string`	Header text. Defaults to field.
`type`	`'text' \| 'number' \| 'date' \| 'boolean'`	Drives alignment, formatting, sorting and the default filter.
`format`	`string \| Intl options`	Number: '#,##0.00', '0.0%', 'currency:KRW', 'integer'. Date: 'date', 'datetime', 'time', 'short', 'medium', 'long'.
`width / minWidth / maxWidth`	`number`	Pixel widths. Default width 120, min 40.
`flex`	`number`	Share of the leftover width. Resizing turns it into a fixed width.
`pinned`	`'left' \| 'right'`	Keep the column visible while scrolling horizontally.
`hide`	`boolean`	Start hidden. Users can show it from the column chooser.
`align`	`'left' \| 'center' \| 'right'`	Cell alignment. Numbers default to right.
`sortable`	`boolean`	Default true.
`resizable`	`boolean`	Default true.
`filter`	`'text' \| 'number' \| 'date' \| 'set' \| false`	Filter UI in the column menu. Default depends on type.
`comparator`	`(a, b, rowA, rowB) => number`	Custom sort order.
`valueGetter`	`(row) => unknown`	Computed value, e.g. quantity × price. Used for display, sort, filter and summaries.
`renderer`	`(params) => string \| HTMLElement`	Custom cell content. Strings are inserted as HTML — escape untrusted data.
`cellClass`	`string \| (params) => string`	Extra CSS class on cells. Its text color, background and bold also go into Excel exports.
`wrapText`	`boolean`	Wrap long text onto more lines; with autoRowHeight the row grows to fit.
`rowSpan / colSpan`	`({ value, row, rowIndex }) => number`	Cells covering several rows or columns, decided per cell. rowSpan takes precedence over merge.
`headerRenderer`	`({ header, column }) => string \| HTMLElement`	Header content (icons, buttons, links); sorting and the menu button stay.
`headerClass`	`string \| (column) => string`	Extra class names on the header cell (also for column groups).
`copyable`	`boolean \| ({ value, row, column }) => boolean`	false keeps values out of copies: blocked cells copy as empty text.
`tooltip / headerTooltip`	`boolean \| (params) => string / string`	Hover text: true shows the value, a function returns the text; headerTooltip explains the header. Cut-off text shows in full anyway (overflowTooltip).
`columnGroupShow / openByDefault`	`'open' \| 'closed' / boolean`	Collapsible column groups: show a child only while its group is open or closed; the group header gets a toggle.
`sparkline`	`true \| { type?: 'line' \| 'bar' \| 'area', color? }`	The value is an array of numbers drawn as a small chart in the cell.
`children`	`ColumnDef[]`	Makes this a column group header.
`merge`	`boolean \| (a, b, rowA, rowB) => boolean`	Merge consecutive rows with the same value into one tall cell.
`wrapHeaderText`	`boolean`	Let a long header label wrap.
`aggFunc`	`'sum' \| 'avg' \| 'min' \| 'max' \| 'count' \| (values, rows) => value`	Aggregate shown in group rows.
`chooser`	`boolean`	false keeps the column out of the column chooser.
`lockVisible`	`boolean`	Users cannot hide this column.
`editable`	`boolean \| ({ value, row, rowIndex, column }) => boolean`	Allow editing and pasting (needs field); a function decides per cell.
`editor`	`{ type: 'select', options } \| { type: 'textarea' \| 'time' \| 'datetime' } \| (params) => editor`	Editor for this column. options can be a function of the row (dependent selects); an option with disabled: true cannot be chosen or pasted. 'datetime' is the default for date columns with format 'datetime'.
`required`	`boolean`	Reject blank values.
`validate`	`(value, row) => true \| string`	Return a message to reject a value.
`unique`	`boolean`	Reject a value another row already has in this column (blank values are allowed).
`formulas`	`boolean`	Cells may hold formulas like '=qtyprice' (same-row fields, + - / % ^ &, ROUND, ABS, MIN, MAX, SUM, AVG, IF). The result is shown, sorted and exported; the editor keeps the formula.