API Reference
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;
cellRenderer?: string;
editRenderer?: string;
headerRenderer?: 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
cellRenderer / editRenderer / headerRenderer
Type: string
Key to look up in renderer registry.
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>