Gantt Chart
Use the KGantt component to visualize tasks and activities against a time or numeric scale.
Gantt Chart with Tree Navigation
select
| Resource | Mar 1 Mar 2 Mar 3 Mar 4 Mar 5 Mar 6 Mar 7 Mar 8 Mar 9 | Actions |
|---|---|---|
| no result | ||
TypeScript
// 1. Setup Tree Data Provider
const ganttProvider = new CTreeClientDataProvider({ idKey: 'id', parentKey: 'parentId' })
ganttProvider.setData([...tasksData])
// 2. Setup Columns for Resource List
const columns = [{ field: 'resource', header: 'Resource' }]
// 3. Component Usage
KGantt(
:dataProvider="ganttProvider"
:columns="columns"
v-model:startingPoint="startingPoint"
v-model:endingPoint="endingPoint"
mode="date"
editable
snapTo="hour"
)Attributes
Configure the KGantt component using these attributes.
| Name | Type | Default | Description |
|---|---|---|---|
| dataProvider | any | - | Required. Tree data provider supplying the resource and task data |
| columns | ITreeViewColumn[] | - | Required. Column configuration for the left-side resource tree |
| treeColumnIndex | number | 0 | Which column should handle the expansion indicator |
| mode | 'date' | 'numeric' | 'date' | Determines if the timeline is date-based or raw numeric-based |
| startingPoint | Date | string | number | null | The active starting view of the timeline (supports v-model:startingPoint) |
| endingPoint | Date | string | number | null | The active ending view of the timeline (supports v-model:endingPoint) |
| startDate | Date | string | number | (auto) | The absolute start limit of the timeline |
| endDate | Date | string | number | (auto) | The absolute end limit of the timeline |
| editable | boolean | false | Enables dragging and resizing tasks |
| snapTo | string | 'day' | Grid snapping interval (e.g., '15m', 'hour', 'day') |
| resourceTypeField | string | 'type' | Resource property used for task placement constraints |
| taskTypeField | string | 'type' | Task property used for type constraints |
| taskMapping | IGanttTaskMapping | (default) | Override property fields (startDate, endDate, title, color, appearance) |
| rowActions | Array<IKDatatableAction> | [] | Per-resource row action buttons |
| bulkActions | Array<IKDatatableAction> | [] | Global bulk actions for selected resource rows |
Slots
Customize task bars and timeline headers.
| Name | Description |
|---|---|
| task | Custom render for task bars (Props: task, resource) |
| timeline-header | Custom render for the timeline ruler/header |
| cell-[fieldName] | Inherited from TreeView. Custom render for resource columns |
| header-[fieldName] | Inherited from TreeView. Custom render for resource headers |
Events
Interactivity and data update hooks.
| Name | Payload | Description |
|---|---|---|
| @update:startingPoint | Date | string | number | Triggered when timeline visibility starting point changes |
| @update:endingPoint | Date | string | number | Triggered when timeline visibility ending point changes |
| @update:task | { task, sourceRow, targetRow } | Triggered after a task finishes dragging or resizing |
| @update:selectedRows | any[] | Triggered when resource selection changes |
| @update:selectAll | boolean | Triggered when 'select all' is toggled |