Column definitions

ColDef, ReactColDef, and NgColDef describe the same column model. Framework types widen component slots to accept their native component classes.

Identity and values

Field	Purpose
colId / key / label	Identity, data field, and display name
type	String, number, date, boolean, or currency behavior
valueGetter	Compute the raw value on a leaf row: receives the row node, so the row is node.data
groupValueGetter	The value on a group row when the column has no aggregate: receives { node, data, aggregates } (data server-side only); never runs on a leaf
valueFormatter / formatterOptions	Format display and export
valueParser	Convert committed text; built-in by type when omitted; return REJECT to refuse
aggFunc	The column's aggregate function — a built-in type ("sum", "first", …) or a name from GridOptions.aggFuncs. It is the column's default in the footer and the aggregate menu (instead of sum for numbers, count otherwise), and the column joins the initial aggregate model as if setAggregates had listed it. An unknown name warns once and is ignored; so is aggFunc on an aggregatable: false column. See aggregates

Formatter options

formatterOptions (an object, or a function of { col, row } for per-row options) configures the built-in formatter for the column's type, and the built-in parser reads the same shape back, so copy, paste, fill and typed edits round-trip. Number options go through Intl.NumberFormat.

Option	Applies to	Purpose
locale	all	BCP 47 locale for separators, symbols and month names. Default "en-US"
format	date	Display pattern from YYYY YY MMMM MMM MM M DD D. Default "YYYY-MM-DD"
currency	currency	ISO 4217 code. Default "USD"
style	number	"decimal", "percent" or "unit". Default "decimal" ("unit" when only unit is set)
fractionDigits	number, currency	Sets both minimum and maximum decimals
minimumFractionDigits	number, currency	Decimals always shown. Default 0 (currency 2)
maximumFractionDigits	number, currency	Decimals at most, rounded. Default 3 (currency 2)
useGrouping	number, currency	Locale thousands grouping. Default true
unit	number	An Intl unit identifier: "kilogram", "liter", "kilometer-per-hour"
unitDisplay	number	"short" (12 kg, default), "long" (12 kilograms) or "narrow" (12kg)
notation	number, currency	"standard" (default) or "compact" (1.2K, 3.4M; rounds, display only)

A number column shows String(value) (1234567.891) until it sets one of the number options; locale alone does not switch formatting on, so existing grids keep their display. The smallest opt-in is { style: "decimal" } (locale grouping, up to three decimals).

{ key: "revenue", type: ColumnType.NUMBER, formatterOptions: { fractionDigits: 2 } } // 1,234,567.89
{ key: "margin", type: ColumnType.NUMBER, formatterOptions: { style: "percent" } } // 0.125 → 12.5%
{ key: "weight", type: ColumnType.NUMBER, formatterOptions: { unit: "kilogram" } } // 12 kg

style: "percent" follows Intl: the stored value is a fraction, so 0.125 displays 12.5%. Typing or pasting 12.5% stores 0.125; a bare number is taken as the fraction itself (0.125). A unit column accepts its own unit in any spelling (12 kg, 12 kilograms) or none, and refuses another unit; a compact column reads 1.2K back as 1200. Grouping and decimal separators follow the column's locale (1.234,5 in de-DE). A formatterOptions the platform's Intl rejects (an unknown unit) logs one warning and shows the raw value.

Layout and capability

width, minWidth, maxWidth, pinned, and hidden describe initial layout. A declared width is kept on data load (content autosize applies only to columns without one) and is clamped by the column's minWidth / maxWidth; a user resize or an explicit fit-to-content replaces it. sortable, resizable, movable, hideable, groupable, aggregatable, pivotable, exportable, and editable govern user capabilities. pivotComparator orders a pivoted column's distinct values across the generated header. suppressColumnPanel omits a column only from the management drawer.

Field	Purpose
lockPosition	true / "left" holds the column at the left edge of its section, "right" at the right edge. It cannot be dragged or moved (header, column panel, api.moveColumn), other columns never displace it, and applyColumnState, saved views and setColumnDefs put it back at its edge. Pinning still applies (locked within the pinned section). On a group child it locks within the group; on a group definition it locks the group. See Locking a column's position
wrapHeaderText	The header label wraps onto several lines instead of being truncated; icons and menu keep their place. Without autoHeaderHeight a wrapped label is clipped at the configured height
autoHeaderHeight	The header level holding this column (or group) grows to fit its label: the tallest such label on the level plus padding, never below the configured headerHeight / leafHeaderHeight / parentHeaderHeight. Re-measured on width, column, label, header-height, theme and font changes. See Wrapping header text

Sort and filter

Columns may define sort, sortIndex, sortingOrder, sortIconVisibility, and a custom comparator. filter selects a built-in panel or custom matcher (filter: false removes filtering only; use sortable: false to stop sorting); filterParams configures operators, inputs, values, debounce, and buttons.

Components

Field	Content
cellRenderer / cellEditor	Cell presentation and editing; the renderer runs on group rows too (isGroup: true, value = the group cell value), except on label columns. cellRenderer also takes a built-in name: "link", "image", "progress", "rating" (options in cellRendererParams, see Built-in renderers) or "text" (plain text, opting a boolean column out of its checkbox)
headerComponent	Header content while retaining controls
headerCellComponent	Entire header cell except resize handle
tooltipComponent / headerTooltip	Body and header floating content
actionFrameComponent	Persistent cell-attached form content

Each component slot has a companion params field where applicable.

A header component is as tall as the header level it sits on: leafHeaderHeight for a leaf column, parentHeaderHeight for each group level (both default to headerHeight, 43px), plus any extra levels the cell spans. Taller content is clipped, so a component that needs more room needs a taller option, not CSS on the component — or autoHeaderHeight on the column, which measures the component's own elements (the children of its root) and grows the level to fit.

Conditional presentation

cellClass and cellStyle accept static values or callbacks. colSpan returns the number of adjacent columns occupied for each row. actionFrameIndicator marks cells with attached content. Group rows are evaluated too (a predicate receives isGroup and node), and in groupDisplayType: "groupRows" the full-width row carries the indicator of its nominal column, the first non-leading leaf; frames open on group rows when groupRowsSelectable is on or in pivot mode.

inheritRowPresentation controls whether the column receives cellClass, cellStyle, tooltip, and the row editability gate from getRowPresentation. Set it to false to opt out completely, or use an object such as { tooltip: false }. Column classes compose with row defaults, column inline-style properties override conflicts, and explicit column tooltip fields override the corresponding row defaults.

Typing your rows

Every column type takes the row type as an optional parameter. Without it the row is any, exactly as before; with it, each callback that receives a row is typed. The published types use NoInfer, so they need TypeScript 5.4 or later.

interface Trade {
  id: string;
  symbol: string;
  price: number;
  quantity: number;
}

const columnDefs: ColDef<Trade>[] = [
  { key: "symbol", label: "Symbol" },
  {
    colId: "notional",
    label: "Notional",
    type: ColumnType.NUMBER,
    // The row node: `node.data` is a `Trade`.
    valueGetter: (node) => node.data.price * node.data.quantity,
    cellClass: ({ data }) => (data.price < 0 ? "negative" : undefined),
  },
];

The row type reaches valueGetter (an IRowNode<Trade>), cellClass, cellStyle, colSpan, tooltipValueGetter, valueFormatter / valueParser (their row node), comparator, and the params of cell renderers (node), editors (row), tooltips (data) and ActionFrames (data). A cell renderer's data stays any: on a column cell it is the row node, so read the typed row off node.data. Cell values stay any.

GridOptions<Trade>, IGridAPI<Trade> and the event payloads take the same parameter (api.getSelectedRows() returns Trade[], onCellClicked receives data: Trade). Pass it once where the grid is created and it flows to the rest:

const api = createGrid<Trade>(container, { columnDefs, rowData: trades });

<Grid<Trade> columnDefs={columnDefs} rowData={trades} />

// Angular: the row type is inferred from a [columnDefs] binding typed NgColDef<Trade>[],
// and a component holding the grid can type it as AwbGrid<Trade>.
readonly columnDefs: NgColDef<Trade>[] = [/* … */];
readonly grid = viewChild.required<AwbGrid<Trade>>(AwbGrid);

The row type is taken from typed column definitions or an explicit type argument, never from rowData, so an untyped grid (or one handed an empty array) keeps any. ReactColDef<Trade> and NgColDef<Trade> work the same way. On a client-side group row data is a placeholder object rather than a Trade; check isGroup or node.isGroup first where group rows can reach a callback.

Groups

A definition with children is a column group. openByDefault sets its initial state; child leaves use columnGroupShow to appear only while open or closed. Give a group an explicit colId: api.setColumnGroupState addresses groups by it, and saved views restore their open/closed state by it.