The left panel of the Gantt chart is a grid of columns that shows task data. You control it with the columns prop.
Default columns
When you omit the columns prop, the component uses defaultColumns, which you can also import and extend:
import { Gantt, defaultColumns } from '@svar-ui/react-gantt';
| id | Header | Description |
|---|
text | Task | Task name with expand/collapse toggle for summary tasks |
start | Start date | Formatted start date |
end | End date | Formatted end date |
duration | Duration | Duration in durationUnit units |
progress | Progress | Numeric progress percentage |
add-task | — | Button to add a new task at this level |
The columns prop
Pass an array of column config objects to replace the default grid.
columns
IColumnConfig[] | false
default:"defaultColumns"
Array of column definitions to display in the grid. Pass false to hide the grid entirely.
Hiding the grid
<Gantt tasks={tasks} links={links} columns={false} />
Column config fields
Field name on the task object to read values from. Use any built-in id ('text', 'start', 'end', 'duration', 'progress') or any custom field name on your task objects.
Column heading text, or a header config object. Pass an object with a cell property to render a custom React component in the header cell (useful for action buttons like “Add task”).// Plain text header
{ id: 'text', header: 'Task name' }
// Custom header component
{ id: 'add-task', header: { cell: AddTaskCell } }
Fixed pixel width for the column. Mutually exclusive with flexgrow.
Flex-grow factor. Columns with flexgrow fill the available grid width proportionally. A column with flexgrow: 2 gets twice the space of one with flexgrow: 1.
align
'left' | 'center' | 'right'
Horizontal alignment of cell content.
When true, clicking the column header sorts the task list by this field.
cell
FC<{ data: ITask; api: IApi }>
Custom React component to render inside each data cell. Receives the full task object as data and the Gantt API as api.
Inline editor configuration. When set, clicking a cell in this column opens an in-place editor. See inline editors below. Sizing: fixed vs. flex columns
Every column has a fixed pixel width. The grid has a fixed total width.const columns = [
{ id: 'text', header: 'Task name', width: 120 },
{ id: 'start', header: 'Start date', width: 120, align: 'center' },
{ id: 'duration', header: 'Duration', width: 90, align: 'center' },
{ id: 'add-task', header: 'Add task', width: 50, align: 'center' },
];
Use flexgrow to distribute available space. The grid stretches responsively.const columns = [
{ id: 'text', header: 'Task name', flexgrow: 2 },
{ id: 'start', header: 'Start date', flexgrow: 1, align: 'center' },
{ id: 'duration', header: 'Duration', flexgrow: 1, align: 'center' },
{ id: 'add-task', header: 'Add task', width: 50, align: 'center' },
];
flexgrow and fixed width columns: fixed columns are laid out first, and flex columns divide the remainder. Custom cell renderers
Provide a cell component to render any content in a column cell.
// A simple custom cell that shows a colored badge based on task progress
function ProgressBadge({ data }) {
const color = data.progress === 100 ? 'green' : data.progress > 50 ? 'blue' : 'gray';
return (
<span style={{ background: color, color: '#fff', borderRadius: 4, padding: '2px 6px' }}>
{data.progress}%
</span>
);
}
const columns = [
{ id: 'text', header: 'Task', width: 220 },
{ id: 'progress', header: 'Progress', width: 100, cell: ProgressBadge },
];
<Gantt tasks={tasks} links={links} columns={columns} />
Custom columns from task fields
Any field present on your task objects can be used as a column id.
// Tasks have a custom 'assigned' field
const tasks = [
{ id: 1, text: 'Design', assigned: 'Laura Turner',
start: new Date(2026, 3, 1), duration: 5, type: 'task', parent: 0 },
];
const columns = [
{ id: 'text', header: 'Task', width: 220 },
{ id: 'assigned', header: 'Assigned', width: 160 },
];
Inline editors
The editor field on a column definition activates in-place editing when a user clicks a cell.
const columns = [
{
id: 'text',
header: 'Task name',
width: 220,
editor: { type: 'text' },
},
{
id: 'start',
header: 'Start date',
width: 120,
editor: { type: 'date' },
},
{
id: 'progress',
header: 'Progress',
width: 90,
editor: { type: 'number' },
},
];
Built-in editor types include 'text', 'date', 'number', and 'combo'. The full task editor dialog (opened from the context menu or toolbar) is a separate <Editor> component.
Sorting columns
Set sort: true on any column to make the header clickable for sorting.
const columns = [
{ id: 'text', header: 'Task name', width: 220, sort: true },
{ id: 'start', header: 'Start date', width: 120, sort: true },
{ id: 'progress', header: 'Progress', width: 90, sort: true },
];
HeaderMenu for toggling column visibility
HeaderMenu is a ready-made right-click menu for column headers that lets users show and hide columns at runtime. Import it from the package and wrap <Gantt>.
import { Gantt, HeaderMenu } from '@svar-ui/react-gantt';
import { useState } from 'react';
function App() {
const [api, setApi] = useState(null);
return (
<HeaderMenu api={api}>
<Gantt
init={setApi}
tasks={tasks}
links={links}
columns={columns}
/>
</HeaderMenu>
);
}
HeaderMenu reads the column list from the Gantt API and automatically builds the show/hide menu — you do not need to configure it manually.
Full example
import { Gantt, defaultColumns } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/all.css';
function StatusCell({ data }) {
return <span>{data.progress === 100 ? 'Done' : 'In progress'}</span>;
}
const columns = [
{ id: 'text', header: 'Task', flexgrow: 2, sort: true },
{ id: 'start', header: 'Start', flexgrow: 1, align: 'center' },
{ id: 'duration', header: 'Days', width: 70, align: 'center' },
{ id: 'status', header: 'Status', width: 100, cell: StatusCell },
{ id: 'add-task', header: '', width: 50, align: 'center' },
];
export default function App() {
return <Gantt tasks={tasks} links={links} columns={columns} />;
}
