IGanttColumn

The IGanttColumn type defines a column in the Gantt’s left-side grid. Pass an array of column definitions to the columns prop on the <Gantt> component.

TypeScript definition

export type IGanttColumn = {
  id?: string;
  header?: IColumn["header"];
  width?: number;
  flexgrow?: number;
  align?: "left" | "right" | "center";
  resize?: boolean;
  sort?: boolean;
  template?: IColumn["template"];
  cell?: any;
  editor?: IColumn["editor"];
  options?: IColumn["options"];
  getter?: (obj: IDataHash) => any;
};

Fields

string

The field name from the task object to display in this column. For example, "text" renders the task’s text property. Built-in special IDs include "add-task" (renders the add-task button column).

header

string | object | Array

Column header configuration. Accepts:

A plain string label
An object { text: string, css?: string } for styled headers
An array for multi-row headers (one entry per header row)

When using the filter header menu, each header row can include filter controls.

width

number

Fixed column width in pixels. Use flexgrow instead for proportional sizing.

flexgrow

number

Flex-grow factor for proportional width distribution among columns that have flexgrow set. Works similarly to CSS flex-grow.

align

'left' | 'right' | 'center'

default:"left"

Horizontal alignment of cell content.

resize

boolean

default:"false"

When true, the user can drag the column border to resize it.

sort

boolean

default:"false"

When true, clicking the column header sorts tasks by this column.

template

(task: ITask) => string

A function returning an HTML string to render in the cell body. Use this to customize the cell content beyond the raw field value.

{
  id: "progress",
  header: "Progress",
  width: 80,
  template: (task) => `${task.progress ?? 0}%`
}

cell

Component

A Svelte component rendered as the cell body. Receives the task object as a prop. Use when you need reactive Svelte markup inside a cell.

editor

object

Inline cell editor configuration. Defines the input type and options used when a user clicks to edit the cell. Mirrors the editor config from @svar-ui/svelte-grid.

options

Array

Options array for editor fields of type select, combo, or multiselect. Each option is { id: any, label: string }.

getter

(obj: IDataHash) => any

Custom accessor function that derives the display value from the task object. Use when the field to display is not a direct property (e.g., formatted dates, combined fields).

{
  id: "duration",
  header: "Duration",
  width: 80,
  getter: (task) => `${task.duration} day${task.duration !== 1 ? "s" : ""}`
}

Examples

Basic columns
With inline editor
Using defaultColumns

import { Gantt } from "@svar-ui/svelte-gantt";

const columns: IGanttColumn[] = [
  {
    id: "text",
    header: "Task name",
    flexgrow: 1,
    resize: true,
    sort: true
  },
  {
    id: "start",
    header: "Start",
    width: 120,
    getter: (task) => task.start?.toLocaleDateString()
  },
  {
    id: "duration",
    header: "Duration",
    width: 80,
    align: "right",
    getter: (task) => `${task.duration}d`
  }
];

const columns: IGanttColumn[] = [
  {
    id: "text",
    header: "Task name",
    flexgrow: 1,
    editor: { type: "text" }
  },
  {
    id: "progress",
    header: "Progress",
    width: 100,
    editor: { type: "number", config: { min: 0, max: 100 } },
    template: (task) => `${task.progress ?? 0}%`
  }
];

<script>
  import { Gantt, defaultColumns } from "@svar-ui/svelte-gantt";
</script>

<!-- Uses the built-in column set (Name + Add button) -->
<Gantt {tasks} {links} columns={defaultColumns} />

Pass columns={false} to the <Gantt> component to hide the grid entirely and show only the chart.

Components

Data Types

API Object

Data Provider

TypeScript definition

Fields

Examples

Build docs developers (and LLMs) love

Components

Data Types

API Object

Data Provider

​TypeScript definition

​Fields

​Examples

Build docs developers (and LLMs) love

TypeScript definition

Fields

Examples