TypeScript Types

All types are exported from @svar-ui/react-gantt and re-exported from the underlying @svar-ui/gantt-store package.

import type {
  ITask,
  IConfig,
  IApi,
  IGanttColumn,
  IColumnConfig,
  TMethodsConfig,
  GanttActions,
} from "@svar-ui/react-gantt";

ITask

Represents a single row in the Gantt chart. Both tasks and milestones share this interface.

interface ITask {
  id: string | number;
  text: string;
  start?: Date;
  end?: Date;
  duration?: number;
  progress?: number;
  parent?: string | number;
  type?: string;
  open?: boolean;
  lazy?: boolean;
  data?: ITask[];
  [key: string]: any; // custom fields
}

string | number

required

Unique identifier for the task.

text

string

Display label shown in the grid and on the task bar.

start

Date

Start date of the task. Can be computed from duration if omitted for certain task types.

end

Date

End date of the task. Mutually exclusive with duration — provide one or the other.

duration

number

Task length in durationUnit units (default: days). Alternative to providing end.

progress

number

Completion percentage, from 0 to 100.

parent

string | number

ID of the parent task. Use 0 or omit for root-level tasks.

type

string

Task type. Built-in values: "task" (default), "summary", "milestone". Custom types can be registered via taskTypes.

open

boolean

Whether a summary task node is expanded. Defaults to false.

lazy

boolean

When true, child data for this task has not been loaded yet. The Gantt fires the request-data event when the node is expanded.

data

ITask[]

Pre-loaded child tasks. When populated, the task renders as a summary node in the grid.

Example

const tasks: ITask[] = [
  {
    id: 1,
    text: "Project planning",
    progress: 40,
    parent: 0,
    type: "summary",
    open: true,
  },
  {
    id: 10,
    text: "Marketing analysis",
    start: new Date(2026, 3, 2),
    duration: 3,
    progress: 100,
    parent: 1,
    type: "task",
  },
  {
    id: 11,
    text: "Kickoff milestone",
    start: new Date(2026, 3, 9),
    parent: 1,
    type: "milestone",
  },
];

IConfig

Configuration props passed directly to the <Gantt> component (excluding the React-specific and event callback props).

tasks

ITask[]

The array of task objects to display.

links

object[]

Dependency links between tasks. Each link has id, source, target, and type fields.

scales

object[]

Time scale configuration. Each scale entry defines unit, step, and format.

const scales = [
  { unit: "month", step: 1, format: "%F %Y" },
  { unit: "day",   step: 1, format: "%j" },
];

columns

false | IColumnConfig[]

Grid column definitions. Pass false to hide the grid entirely.

start

Date | null

Explicit chart start date. When null, derived automatically from task dates.

end

Date | null

Explicit chart end date. When null, derived automatically from task dates.

cellWidth

number

Width in pixels of a single time unit cell. Default: 100.

cellHeight

number

Row height in pixels. Default: 38.

scaleHeight

number

Height of the header scale row in pixels. Default: 36.

lengthUnit

string

The time unit used to measure cell width ("day", "hour", etc.). Default: "day".

durationUnit

string

The time unit used to interpret the duration field on tasks. Default: "day".

zoom

boolean | object

Enables or configures zoom. true enables the default zoom. An object configures zoom levels and scale sets.

autoScale

boolean

When true, the chart automatically adjusts its visible range to fit all tasks. Default: true.

readonly

boolean

Disables all editing interactions when true. Default: false.

baselines

boolean

Renders baseline bars for tasks that have base_start and base_end fields. Default: false.

unscheduledTasks

boolean

Shows tasks that have no start/end dates in a separate unscheduled panel. Default: false.

splitTasks

boolean

Enables split-task (segmented bar) support. Default: false.

undo

boolean

Enables undo/redo history. Default: false.

selected

Array<string | number>

Array of currently selected task IDs (controlled).

activeTask

string | number | null

The ID of the task currently open in the editor (controlled).

markers

object[]

Timeline marker definitions. Each marker has start, text, and optional css fields.

taskTypes

object[]

Custom task type definitions. Each entry specifies id, label, and rendering options.

criticalPath

object | null

Critical path configuration. When set, highlights the critical path on the chart.

schedule

{ type?: 'forward'; auto?: boolean }

Auto-scheduling configuration. { type: 'forward' } (default) enables basic forward scheduling from projectStart. { auto: true } enables full auto-scheduling where task dates are continuously recalculated from Finish-to-Start dependencies.

projectStart

Date | null

Fixed project start date used by the auto-scheduler.

projectEnd

Date | null

Fixed project end date used by the auto-scheduler.

calendar

Calendar | null

A Calendar instance defining working days and hours. Automatically highlights non-working time.

summary

object | null

Summary task behaviour configuration. E.g. { autoProgress: true } to automatically roll up child progress.

highlightTime

(date: Date, unit: 'day' | 'hour') => string

A function that returns a CSS class name for a given time cell, used to highlight weekends or holidays.

IApi

The programmatic API object returned via the init prop or a React ref. See the Gantt API reference for full method documentation.

interface IApi {
  exec(action: string, data?: object): void;
  on(event: string, handler: (data: any) => void): typeof handler;
  intercept(event: string, handler: (data: any) => boolean | void): void;
  detach(handler: Function): void;
  getState(): object;
  getReactiveState(): object;
  getTask(id: string | number): ITask;
  serialize(): ITask[];
  getTable(waitRender?: boolean): any | Promise<any>;
  getHistory(): { undo: number; redo: number };
  setNext(router: object): object;
}

IGanttColumn

The base column definition used internally by the Gantt store. The public-facing IColumnConfig extends this with additional grid-level options.

string

required

Unique column identifier, also used as the property key on task objects.

header

string

Column header label.

width

number

Column width in pixels.

flex

number

Flex-grow factor. Mutually exclusive with width.

sort

boolean

Enables click-to-sort on this column. Default: true.

align

'left' | 'center' | 'right'

Cell content alignment.

IColumnConfig

Extends IGanttColumn with additional cell, header, and editor configuration provided by the underlying grid component.

interface IColumnConfig extends Omit<IGanttColumn, 'header'> {
  cell?: ITableColumn['cell'];
  header?: ITableColumn['header'];
  editor?: ITableColumn['editor'];
}

cell

ITableColumn['cell']

Custom cell renderer. A component or render function that receives the row data.

header

ITableColumn['header']

Custom header renderer. Overrides the plain string header from IGanttColumn.

editor

ITableColumn['editor']

Inline cell editor configuration. When set, clicking a cell in this column opens an inline editor instead of the task editor panel.

Example

import { defaultColumns } from "@svar-ui/react-gantt";

const columns: IColumnConfig[] = [
  ...defaultColumns,
  {
    id: "assigned",
    header: "Assignee",
    width: 120,
    cell: ({ row }) => <span>{row.assigned ?? "—"}</span>,
  },
];

GanttActions

A utility type that derives on* callback props from the store’s TMethodsConfig. It generates camelCase prop names by removing hyphens from action names.

type GanttActions<TMethodsConfig extends Record<string, any>> = {
  [K in keyof TMethodsConfig as EventName<K & string>]?: (
    ev: TMethodsConfig[K],
  ) => void;
} & {
  [key: `on${string}`]: (ev?: any) => void;
};

This means every action name is also available as an inline prop by prepending on and converting each hyphen-separated segment to PascalCase:

Action name	Prop name
`add-task`	`onAddTask`
`update-task`	`onUpdateTask`
`delete-task`	`onDeleteTask`
`select-task`	`onSelectTask`
`sort-tasks`	`onSortTasks`
`show-editor`	`onShowEditor`
`zoom-scale`	`onZoomScale`
`move-task`	`onMoveTask`
`scroll-chart`	`onScrollChart`
`drag-task`	`onDragTask`
`open-task`	`onOpenTask`
`add-link`	`onAddLink`
`delete-link`	`onDeleteLink`

<Gantt
  tasks={tasks}
  links={links}
  scales={scales}
  onAddTask={({ id }) => console.log("Added:", id)}
  onUpdateTask={({ id }) => console.log("Updated:", id)}
  onDeleteTask={({ id }) => console.log("Deleted:", id)}
/>

TMethodsConfig

A record type mapping each action/event name to its payload shape. Defined in @svar-ui/gantt-store and used to derive both GanttActions props and the IApi event handler signatures.

type TMethodsConfig = Record<string, Record<string, any>>;

Used generically throughout the type system:

export declare const Gantt: FC<
  {
    columns?: false | IColumnConfig[];
    taskTemplate?: FC<{ data: ITask; api: IApi; onaction: Function }>;
    readonly?: boolean;
    cellBorders?: 'column' | 'full';
    highlightTime?: (date: Date, unit: 'day' | 'hour') => string;
    init?: (api: IApi) => void;
  } & IConfig &
    GanttActions<TMethodsConfig>
>;

Components

API & Events

Types

ITask

Example

IConfig

IApi

IGanttColumn

IColumnConfig

Example

GanttActions

TMethodsConfig

Build docs developers (and LLMs) love

Components

API & Events

Types

​ITask

​Example

​IConfig

​IApi

​IGanttColumn

​IColumnConfig

​Example

​GanttActions

​TMethodsConfig

Build docs developers (and LLMs) love

ITask

Example

IConfig

IApi

IGanttColumn

IColumnConfig

Example

GanttActions

TMethodsConfig