Core reference / Column definitions
Column definitions
Columns are described declaratively as an array of ColumnDef objects passed to the grid via the columns option. Each definition controls identity, sizing, alignment, sorting, and rendering.
type ColumnDef<T> = ColumnLeafDef<T> | ColumnGroupDef<T>;Properties
Properties available on ColumnLeafDef<T>.
| Property | Description |
|---|---|
id string | Stable identifier used by the grid and plugins. |
header string | Text displayed in the column header. |
pinned? "left" | "right" | Pins the column to a horizontal edge of the grid. |
lockPosition? "start" | Keeps this column or group at the start of the column order. |
resizable? boolean | Whether this column may be resized by the resize plugin. |
movable? boolean | Whether this column can be moved by a column drag-and-drop plugin. |
headerRenderer? (column: ColumnDef<T>) => unknown | Custom renderer for the primary content of this column's header. Adapter controls and plugin extensions are rendered alongside it. |
searchable? boolean | Whether this column participates in the global quick filter. Defaults to true. Columns with `searchable: false` are completely ignored by the global quick filter. |
headerAlign? CellAlign | Horizontal alignment of header content. Uses the same values as `align`. |
field? keyof T | string | Row property used as the cell value source. |
hidden? boolean | Hides this column without removing it from the column definitions. |
flex? number | Relative width factor used to distribute available space. |
width? number | Fixed column width in pixels. |
minWidth? number | Minimum column width in pixels. |
maxWidth? number | Maximum column width in pixels. |
sortable? boolean | Whether this column can be sorted. |
align? CellAlign | Horizontal alignment of cell content. |
wrapText? boolean | Enables automatic text wrapping instead of ellipsis truncation. |
maxLines? number | Maximum number of visible lines for wrapped cell content. Cells exceeding this limit are truncated and can reveal their full text in the React adapter tooltip. Requires `wrapText: true`. |
aggFunc? AggregationFunc<T> | string | Aggregation function used when this column is inside a group. |
cellLayout? "normal" | "flush" | Controls whether the cell keeps the theme's internal padding or removes it so custom content can fill the cell. - `"normal"` (default): preserves the theme padding. - `"flush"`: removes the cell padding. |
sortState? SortDirection | Initial sort direction used by SortingPlugin. |
sortIndex? number | 1-based sort priority, set only while multiple columns are sorted. |
comparator? (left: unknown, right: unknown, column: ColumnLeafDef<T>) => number | Compares values for this column, overriding the sorting plugin default. |
colSpan? ColSpanDef<T> | Horizontal cell merging declared on the column. A static number merges that many consecutive visible columns starting at this column; a function computes the span per row from `CellSpanningParams`. Normalized to an integer `>= 1` (`1` = no merge). Spans are clipped to the visible leaf layout (pinned groups never merge) and covered cells are skipped during rendering. |
stopRowClick? boolean | Prevents clicks in this column's cells from triggering row-click behavior. |
stopHeaderClick? boolean | Prevents clicks on this column's header from triggering header-click behavior. |
valueGetter? (row: T) => unknown | Computes the cell value from the row; takes precedence over `field`. |
valueFormatter? (value: unknown) => string | Formats the raw cell value for display. |
cellRenderer? (params: CellRenderParams<T>) => unknown | Replaces the default cell content with custom content. |
cellFlash? boolean | Set to `false` to prevent this column from flashing when grid-level `cellFlash` is enabled. |
cellStyle? RowStyle | Static inline styles applied to cells in this column. |
getCellStyle? (params: CellRenderParams<T>) => RowStyle | undefined | Computes inline styles for each rendered cell. |
cellClass? string | ((params: CellRenderParams<T>) => string | undefined) | Static CSS class applied to cells in this column. |
getCellClass? (params: CellRenderParams<T>) => string | undefined | Computes a CSS class for each rendered cell. |
cellClassRules? CellClassRules<T> | Maps CSS class names to predicates evaluated for each rendered cell. |
getColumnStyle? (params: ColumnStyleParams<T>) => ColumnStyle | undefined | Computes inline styles for the entire column body once per column evaluation across dataset. |
getColumnClass? (params: ColumnStyleParams<T>) => string | undefined | Computes a CSS class for the entire column body across dataset. |
columnClassRules? ColumnClassRules<T> | Maps CSS class names to predicates evaluated once for the entire column body across dataset. |
headerStyle? HeaderStyle | Static inline styles applied to the leaf header cell of this column. |
getHeaderStyle? (params: HeaderRenderParams<T>) => HeaderStyle | undefined | Computes inline styles for the leaf header cell of this column. |
headerClass? string | ((params: HeaderRenderParams<T>) => string | undefined) | Static CSS class or resolver applied to the leaf header cell of this column. |
getHeaderClass? (params: HeaderRenderParams<T>) => string | undefined | Computes a CSS class for the leaf header cell of this column. |
headerClassRules? HeaderClassRules<T> | Maps CSS class names to predicates evaluated for the leaf header cell of this column. |
Properties
Properties available on ColumnGroupDef<T>.
| Property | Description |
|---|---|
id string | Stable identifier used by the grid and plugins. |
header string | Text displayed in the column header. |
pinned? "left" | "right" | Pins the column to a horizontal edge of the grid. |
lockPosition? "start" | Keeps this column or group at the start of the column order. |
resizable? boolean | Whether this column may be resized by the resize plugin. |
movable? boolean | Whether this column can be moved by a column drag-and-drop plugin. |
headerRenderer? (column: ColumnDef<T>) => unknown | Custom renderer for the primary content of this column's header. Adapter controls and plugin extensions are rendered alongside it. |
searchable? boolean | Whether this column participates in the global quick filter. Defaults to true. Columns with `searchable: false` are completely ignored by the global quick filter. |
headerAlign? CellAlign | Horizontal alignment of header content. Uses the same values as `align`. |
children ColumnDef<T>[] | Child column definitions nested under this group. |
collapsible? boolean | Allows users to collapse and expand this group. |
defaultExpanded? boolean | Whether this group starts expanded when it is collapsible. |
headerStyle? HeaderStyle | Static inline styles applied to this group header cell. |
getHeaderStyle? (params: HeaderGroupRenderParams<T>) => HeaderStyle | undefined | Computes inline styles for this group header cell. |
headerClass? string | ((params: HeaderGroupRenderParams<T>) => string | undefined) | Static CSS class or resolver applied to this group header cell. |
getHeaderClass? (params: HeaderGroupRenderParams<T>) => string | undefined | Computes a CSS class for this group header cell. |
headerClassRules? HeaderGroupClassRules<T> | Maps CSS class names to predicates evaluated for this group header cell. |