Data Grid Column API

Columns

Full reference of CoreUI Data Grid column definition keys — labels, sorting, filtering, formatting and custom rendering.

Each entry in the columns array describes one column. key is the only required field. See Columns overview for a guided tour.

KeyTypeDescription
keystringProperty name in the item object (also the column id).
labelstringHeader label; falls back to key.
editableboolean | { type?, min?, max?, step?, options? }Opts the column into inline editing with a built-in text, number or select editor.
editor(context) => DataGridEditorCustom editor factory — receives { item, column, value, commit, cancel, labels }, returns { element, getValue?, focus?, contains?, dispose?, popup? }. Its presence opts the column in.
editValidate(value, item) => true | stringGates the commit — a returned message blocks it and marks the editor invalid.
sortablebooleanSet false to disable sorting for this column.
filterablebooleanSet false to remove the column’s filter button.
filter({ column, table, labels }) => { element, update?, dispose? }Custom filter UI rendered in the filter row instead of the filter button (requires columnFilters).
filterFn(value, filterValue, item) => booleanCustom predicate replacing the default case-insensitive contains.
filterType'text' | 'number' | 'date' | 'select'Operator set for the built-in filter menu; select renders the faceted set filter. Defaults to text.
resizablebooleanSet false to drop the resize handle for this column (when columnSizing is on).
movablebooleanSet false to exclude the column from drag-and-drop reordering.
hideablebooleanSet false to prevent hiding the column.
formatter(value, item) => stringFormats the cell value — cheap, stays on the scroll hot path.
render(item, index) => Node | stringFull custom cell content (e.g. action buttons).
widthnumberInitial column width in pixels - seeds columnSizing and drives the layout.
styleobjectInline styles for the header cell (cosmetic; e.g. percentage widths are visual-only).

formatter runs on the scroll hot path and its output is used for CSV export; render is for rich cell content and is never exported. Use one or the other per column.