Column Definition
Configure individual columns
Column Definition
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);
}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>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>