Gantt Chart

// 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. Define Bulk and Row Actions
const bulkActions = [
  { label: 'Export Selected', icon: 'download', type: 'primary', action: (rows) => console.log('Export:', rows) },
  { label: 'Delete Selected', icon: 'trash', type: 'danger', action: (rows) => console.log('Delete:', rows) }
]

// 4. Component Usage
KGantt(
  :dataProvider="ganttProvider"
  :columns="columns"
  v-model:startingPoint="startingPoint"
  v-model:endingPoint="endingPoint"
  mode="date"
  editable
  snapTo="hour"
  :bulkActions="bulkActions"
  :rowActions="rowActions"
)

// 1. Setup Tree Data Provider with high-density dataset
const virtualGanttProvider = new CTreeClientDataProvider({
  idKey: 'id',
  parentKey: 'parentId',
  expandedByDefault: true
})
virtualGanttProvider.setData(massiveResourceData) // 500+ resources

// 2. Setup Columns for Resource List
const columns = [{ field: 'resource', header: 'Resource' }]

// 3. Define Virtual Bulk Actions
const bulkActions = [
  { label: 'Export Selected', icon: 'download', type: 'primary', action: (rows) => console.log('Export:', rows) },
  { label: 'Delete Selected', icon: 'trash', type: 'danger', action: (rows) => console.log('Delete:', rows) }
]

// 4. Component Usage with Virtual Scrolling
KGantt(
  :dataProvider="virtualGanttProvider"
  :columns="columns"
  :treeColumnIndex="0"
  v-model:startingPoint="startingPoint"
  v-model:endingPoint="endingPoint"
  mode="date"
  :rowActions="rowActions"
  :bulkActions="bulkActions"
  :virtualScroll="true"
  :itemHeight="40"
  :viewportHeight="450"
  :buffer="5"
)