Overview
Columns define how data is displayed, formatted, and edited in the grid. Each column maps to a field in your data objects.
Column Type
Core Properties
| Property | Type | Required | Description |
|---|---|---|---|
field | string | Yes | Property name in data object to display |
title | string | Yes | Column header text |
headerInfo | string | No | Info tooltip shown next to header (displays info icon) |
Basic Columns
Sizing Properties
| Property | Type | Default | Description |
|---|---|---|---|
width | string | auto | Column width (CSS value: '100px', '10%', 'auto') |
minWidth | string | - | Minimum column width |
maxWidth | string | - | Maximum column width |
Column Sizing
Display Properties
| Property | Type | Default | Description |
|---|---|---|---|
align | 'left' | 'center' | 'right' | 'left' | Text alignment in cells |
textOverflow | 'wrap' | 'ellipsis' | 'ellipsis' | How to handle text overflow |
sortable | boolean | inherits | Per-column sortable override |
filterable | boolean | inherits | Per-column filterable override |
Display Options
Styling Properties
| Property | Type | Description |
|---|---|---|
cellClass | string | CSS class(es) applied to all cells in this column |
cellClassCallback | (value, row) => string | null | Dynamic CSS class based on cell value or row data |
Cell Styling
Formatting Callbacks
| Callback | Type | Description |
|---|---|---|
formatCallback | (value, row) => string | Transform value for display (text output) |
templateCallback | (row) => string | Return HTML string for cell content |
renderCallback | (row, element) => void | Direct DOM manipulation for cell content |
tooltipCallback | (value, row) => string | null | Dynamic tooltip text on hover |
tooltipMember | string | Property name containing tooltip text |
Formatting Examples
Editing Properties
| Property | Type | Description |
|---|---|---|
editable | boolean | Per-column editable override |
editor | EditorType | Editor type: 'text', 'number', 'checkbox', 'select', 'combobox', 'date', 'autocomplete', 'custom' |
editTrigger | EditTrigger | Per-column edit trigger override |
editorOptions | EditorOptions | Editor-specific configuration (see Editors API) |
showEditButton | boolean | Show edit button in cell |
dropdownToggleVisibility | 'always' | 'on-focus' | Per-column dropdown toggle visibility |
openDropdownOnEnter | boolean | Enter opens dropdown vs moves down |
Editor Configuration
Validation Callbacks
| Callback | Type | Description |
|---|---|---|
validateCallback | (value, row) => string | null | Return error message or null if valid (deprecated) |
beforeCommitCallback | (context) => ValidationResult | Validate and optionally transform value before commit |
cellEditCallback | (context) => void | Take over cell editing with custom logic |
Validation
Clipboard Callbacks
| Callback | Type | Description |
|---|---|---|
beforeCopyCallback | (value, row) => string | Transform value before copying to clipboard |
beforePasteCallback | (value, row) => unknown | Process pasted value before applying |
Clipboard Handling
Complete Example
Full Column Configuration
Important Notes
- field & title: Required for every column
- Callback Priority:
renderCallback>templateCallback>formatCallback> raw value - Tooltip Priority:
tooltipCallbacktakes priority overtooltipMember - Validation: Prefer
beforeCommitCallbackover deprecatedvalidateCallback - Type Safety: Use
Column<T>generic for full TypeScript support