Column Definition
Configure each Vue 3 grid column individually with type, width, sorting, filtering, rendering, and editing options through the column definition object.
The ColumnDefinition interface is shared with the React package.
interface ColumnDefinition {
field: string;
colId?: string;
cellDataType: CellDataType;
width: number;
headerName?: string;
editable?: boolean;
sortable?: boolean;
filterable?: boolean;
hidden?: boolean;
resizable?: boolean;
minWidth?: number;
maxWidth?: number;
movable?: boolean;
rowDrag?: boolean;
cellRenderer?: string | ((params: CellRendererParams) => unknown);
editRenderer?: string | ((params: EditRendererParams) => unknown);
headerRenderer?: string | ((params: HeaderRendererParams) => unknown);
valueFormatter?: (value: CellValue) => string;
computeColumnClasses?: (context: HighlightContext) => string[];
computeCellClasses?: (context: HighlightContext) => string[];
}Required Properties
field
Type: string
Property name in row data.
cellDataType
Type: CellDataType
| Value | Description |
|---|---|
"text" | String values |
"number" | Numeric values |
"boolean" | Boolean values |
"date" | Date objects |
"dateString" | ISO date strings |
"dateTime" | DateTime objects |
"dateTimeString" | ISO DateTime strings |
"object" | Complex objects |
width
Type: number
Column width in pixels.
Optional Properties
colId
Type: string
Default: Same as field
headerName
Type: string
Default: Same as field
editable
Type: boolean
Default: false
sortable
Type: boolean
Default: true
filterable
Type: boolean
Default: true
hidden
Type: boolean
Default: false
Whether the column is hidden.
resizable
Type: boolean
Default: true
Whether the column can be resized by dragging the header edge.
minWidth / maxWidth
Type: number
Default: 50 / undefined
Minimum and maximum width constraints when resizing.
movable
Type: boolean
Default: true
Whether the column can be reordered by dragging its header.
rowDrag
Type: boolean
Default: false
Whether this column acts as a drag handle for row dragging.
cellRenderer / editRenderer / headerRenderer
Type: string | ((params) => unknown)
Pass a render function directly or a string key to look up in the renderer registry.
<script setup lang="ts">
const columns: ColumnDefinition[] = [
{
field: "status",
cellDataType: "text",
width: 100,
// Inline function — no registry needed
cellRenderer: (params) => {
const status = params.value as string;
return status === "Active" ? `✓ ${status}` : status;
},
},
{
field: "priority",
cellDataType: "text",
width: 100,
cellRenderer: "priority", // String key — looks up from registry
},
];
</script>valueFormatter
Type: (value: CellValue) => string
Converts a raw cell value into the string the grid treats as the cell's display value. The formatter runs before the default cell renderer paints the cell, so the output is what the user sees on screen.
Crucially, valueFormatter is also what powers filtering, sort comparisons, copy-paste, and CSV export. Those features all read the formatted string rather than the raw value, which keeps the filter input and the visible text in sync.
<script setup lang="ts">
const columns: ColumnDefinition[] = [
{
field: "salary",
cellDataType: "number",
width: 140,
headerName: "Salary",
valueFormatter: (value) => `$${(value as number).toLocaleString()}`,
},
];
</script>The signature takes the raw value directly ((value) => ...), not a params object. Inside a cellRenderer the params.value you receive is already the formatted string when a valueFormatter is set — read params.rowData[column.field] if the renderer needs the raw value.
Pairing with cellRenderer
A cellRenderer only changes how a cell is painted; it does not change the value used by filters or sort. Pair custom renderers with a matching valueFormatter so both stay in sync:
<script setup lang="ts">
const columns: ColumnDefinition[] = [
{
field: "salary",
cellDataType: "number",
width: 140,
cellRenderer: SalaryRenderer,
valueFormatter: (value) => `$${(value as number).toLocaleString()}`,
},
];
</script>Without the formatter, a user filtering on "$82,000" would match nothing because the filter sees the raw 82000.
Common use cases
Formatting "object"-type columns where the default JSON.stringify is unhelpful:
{
field: "address",
cellDataType: "object",
width: 250,
valueFormatter: (value) => {
const addr = value as { city: string; country: string };
return `${addr.city}, ${addr.country}`;
},
}Date display with a library-free format:
{
field: "createdAt",
cellDataType: "dateString",
width: 140,
valueFormatter: (value) => new Date(value as string).toLocaleDateString(),
}Null-safe formatting:
valueFormatter: (value) => value == null ? "—" : String(value),computeColumnClasses
Type: (context: HighlightContext) => string[]
Per-column override for column-level highlighting. Overrides the grid-level computeColumnClasses for this column. The context has colIndex set and rowIndex is null.
{
field: "status",
cellDataType: "text",
width: 120,
computeColumnClasses: (context) =>
context.colIndex === 0 ? ["first-column"] : [],
}computeCellClasses
Type: (context: HighlightContext) => string[]
Per-column override for cell-level highlighting. Overrides the grid-level computeCellClasses for cells in this column. The context has both rowIndex and colIndex set.
{
field: "score",
cellDataType: "number",
width: 100,
computeCellClasses: (context) => {
const value = context.rowData?.score as number;
if (value != null && value < 60) return ["bg-red-50"];
if (value != null && value >= 90) return ["bg-green-50"];
return [];
},
}For full context shape, see the Styling guide.
Example
<script setup lang="ts">
const columns: ColumnDefinition[] = [
{
field: "id",
cellDataType: "number",
width: 80,
headerName: "ID",
sortable: true,
filterable: false,
},
{
field: "name",
cellDataType: "text",
width: 200,
headerName: "Full Name",
editable: true,
},
{
field: "status",
cellDataType: "text",
width: 100,
cellRenderer: "status",
editRenderer: "statusDropdown",
},
];
</script>