Column definition
The full ColumnDefinition<Row> field reference — field, id, type, and the rest, with links to where each has more to say.
Last updated August 24, 2026
Every entry in columns is a ColumnDefinition<Row>, the same shape defineColumnsFromRows produces automatically for a column left undeclared. This page lists every field; several have a whole page of their own, linked from the description below.
Fields#
| Field | Type | Default | Description |
|---|---|---|---|
field | FieldPath<Row> | string | Path to this cell's value: a key of Row, or "Parent.Child" for a leaf one level inside a nested object. | |
id | string | field | Stable identity for state keyed by this column. Needed when two columns render the same field differently. |
type | "dateTime" | "date" | "time" | "number" | "string" | "boolean" | "decimal" | "currency" | "percent" | "string" | The value type of this column's cells. |
alignment | "left" | "center" | "right" | "left" ("right" for numbers) | Alignment of this column's cells. |
headerTemplate | Node | (() => Node) | Header content, or a function returning it at render time. See column templates. | |
cellTemplate | (context: CellTemplateContext<Row>) => Node | Renders this column's cells in place of the raw value. See column templates. | |
footerTemplate | (context: FooterTemplateContext<Row>) => Node | Renders this column's own aggregate result in a group header or the grand-total footer. See aggregate functions. | |
width | number | Width in px this column starts at. See column resizing. | |
minWidth / maxWidth | number | Bounds a resize may not drag past. See column resizing. | |
resizable | boolean | resizableColumns | Whether this column can be resized, overriding the grid-level default. See column resizing. |
reorderable | boolean | reorderableColumns | Whether this column can be dragged to a new position. See column reordering. |
sortable | boolean | sortableColumns | Whether this column can be sorted. See column sorting. |
groupable | boolean | groupableColumns | Whether this column can be grouped by. See row grouping. |
groupToggleIcon | boolean | groupToggleIconColumns | Whether a groupable header shows its group-toggle icon. Purely a rendering choice. See row grouping. |
groupByDraggable | boolean | groupByDraggableColumns | Whether this column's header may be dragged into the group-by bar. See row grouping. |
wrap | { header?, cells? } | all off | Lets this column's header and/or cell text wrap onto multiple lines instead of eliding to one. |
headerClassName | string | Extra class names appended to this column's th. | |
cellClassName | string | Extra class names appended to this column's td, on every row. |
See also#
- DataGridComponent for the
columnsprop itself, and the grid-level defaults (resizableColumns,reorderableColumns,sortableColumns,groupableColumns,groupToggleIconColumns,groupByDraggableColumns) each per-column override falls back to. - Column templates, resizing, reordering, sorting, and filtering, each in depth.
- Row grouping for
groupable,groupToggleIcon, andgroupByDraggable, in depth. - Aggregate functions for
footerTemplate, in depth.