Gantt: config reference

Every option on the gantt prop, with the page that explains it. The base config (GanttConfig) ships in @svgrid/grid; the Enterprise superset (GanttProConfig) and the renderer ship in @svgrid/enterprise.

import { SvGrid, type GanttConfig, type GanttDependency } from '@svgrid/grid'
import { enableGanttView, type GanttProConfig } from '@svgrid/enterprise'

enableGanttView()

const cfg: GanttProConfig<any, Task> = { startField: 'start', endField: 'end' }

Every example on this page runs against one setup:

<script lang="ts">
  import { SvGrid, type GridColumns, type GanttDependency } from '@svgrid/grid'
  import { enableGanttView, type GanttProConfig } from '@svgrid/enterprise'

  enableGanttView()

  type Task = {
    id: string
    name: string
    owner?: string
    start: string
    end?: string
    progress?: number
    parentId?: string | null
    milestone?: boolean
    color?: string
  }

  const pad = (n: number) => String(n).padStart(2, '0')
  const isoDay = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
  const base = new Date()
  base.setHours(0, 0, 0, 0)
  base.setDate(base.getDate() - ((base.getDay() + 6) % 7))
  const at = (dayOffset: number) => {
    const d = new Date(base)
    d.setDate(d.getDate() + dayOffset)
    return isoDay(d)
  }

  let data = $state<Task[]>([
    { id: 'p1', name: 'Discovery', parentId: null, start: at(0), owner: 'Priya' },
    { id: 't1', name: 'Interviews', parentId: 'p1', start: at(0), end: at(4), progress: 100, owner: 'Priya', color: '#7c3aed' },
    { id: 't2', name: 'Synthesis', parentId: 'p1', start: at(5), end: at(11), progress: 40, owner: 'Marco', color: '#7c3aed' },
    { id: 'p2', name: 'Build', parentId: null, start: at(12), owner: 'Sven' },
    { id: 't3', name: 'Implementation', parentId: 'p2', start: at(12), end: at(25), progress: 10, owner: 'Sven', color: '#2563eb' },
    { id: 'm1', name: 'Launch', parentId: null, start: at(26), milestone: true, color: '#f59e0b' },
  ])
  const dependencies: GanttDependency[] = [
    { id: 'd1', from: 't1', to: 't2' },
    { id: 'd2', from: 't2', to: 't3' },
    { id: 'd3', from: 't3', to: 'm1' },
  ]
  const columns: GridColumns<Task> = [
    { field: 'name', header: 'Task', width: 200 },
    { field: 'owner', header: 'Owner', width: 100 },
  ]
  function writeSpan(row: Task, start: Date, end: Date) {
    row.start = isoDay(start)
    const last = new Date(end.getTime() - 86_400_000)
    row.end = isoDay(last < start ? start : last)
  }
  const pro = (c: GanttProConfig<any, Task>) => c
</script>

Fields

<SvGrid {data} {columns} getRowId={(r) => r.id}
  gantt={{
    startField: 'start', endField: 'end', titleField: 'name',
    progressField: 'progress', parentField: 'parentId', milestoneField: 'milestone', colorField: 'color',
  }} />

Dependencies

<SvGrid {data} {columns} getRowId={(r) => r.id}
  gantt={{
    startField: 'start', endField: 'end', parentField: 'parentId',
    dependencies, autoReschedule: false,
  }} />

The axis

<SvGrid {data} {columns} getRowId={(r) => r.id}
  gantt={{
    startField: 'start', endField: 'end', parentField: 'parentId',
    zoom: 'day', zoomLevels: ['day', 'week'], weekStartsOn: 1, rangePaddingDays: 3,
  }} />

Layout and collapse

Editing

<SvGrid {data} {columns} getRowId={(r) => r.id}
  gantt={{
    startField: 'start', endField: 'end', parentField: 'parentId', progressField: 'progress',
    editable: true, history: true, drawer: true,
    onTaskMove: (e) => writeSpan(e.row, e.start, e.end),
    onTaskResize: (e) => writeSpan(e.row, e.start, e.end),
    onProgressChange: (e) => { e.row.progress = e.progress },
    onTaskCommit: (e) => Object.assign(e.row, e.values),
  }} />

Chrome

Gantt Pro

The Enterprise options, on GanttProConfig:

<SvGrid {data} {columns} getRowId={(r) => r.id}
  gantt={pro({
    startField: 'start', endField: 'end', parentField: 'parentId',
    dependencies, criticalPath: true, tableColumns: ['name', '__slack'],
    collapseWeekends: true,
  })} />

Event types

All in @svgrid/grid:

GanttConstraint ('ASAP' \| 'ALAP' \| 'MSO' \| 'MFO' \| 'SNET' \| 'SNLT' \| 'FNET' \| 'FNLT') is in @svgrid/enterprise.

The helpers

@svgrid/enterprise (and its /gantt entry point) also exports the pure functions the renderer is built from, for reports, tests and your own views:

See also

• Gantt chart mode - the hub, with every demo.
• Scheduler / calendar mode - the scheduler prop, whose drawer and resource types the Gantt shares.