Svelte Gantt Chart
A Gantt view of the grid - one gantt prop, phases, dependency arrows, drag to reschedule, a critical path - is in progress in @svgrid/enterprise and due on 1 November 2026; it is on the roadmap. Until then, what SvGrid has is a grid with custom cells, and a Gantt row is a task on the left and one wide cell on the right whose bar is positioned by percentage of the project span. That is exactly how the demo below is built, in one file you can copy.
If your plan is really a schedule of bookings across resources rather than a work-breakdown structure, the enterprise scheduler timeline is the better fit today: it draws real bars on a time axis with drag to re-time and resize, one lane per person or asset.
Turn it on: cell: (ctx) => renderSnippet(TimelineCell, …)
Install
npm i @svgrid/gridFree and MIT-licensed in @svgrid/grid: no license key, no row cap, no watermark.
The code
<script lang="ts">
import { SvGrid, renderSnippet, type ColumnDef } from '@svgrid/grid'
</script>
{#snippet TimelineCell({ row })}
<div class="track">
<div
class="bar"
style:left="{((+new Date(row.start) - projectStart) / projectSpan) * 100}%"
style:width="{((+new Date(row.end) - +new Date(row.start)) / projectSpan) * 100}%"
></div>
</div>
{/snippet}
<SvGrid
data={tasks}
columns={[
{ field: 'name', header: 'Task', width: 240 },
{ field: 'end', header: 'Schedule', width: 400,
cell: (ctx) => renderSnippet(TimelineCell, { row: ctx.row.original }) },
]}
/>What you get
- One wide custom cell - The timeline is a snippet cell that positions absolutely-placed bars by date arithmetic. No plugin, no second component, no new mental model.
- Pinned task columns - Pin the name, owner and progress columns so they stay put while months of timeline scroll sideways.
- Phases and progress - Colour bars by phase, fill them by percent done, and draw a today line and an overdue glow with plain CSS.
- A tree of tasks - Combine it with tree data and a work-breakdown structure indents under its parent, expandable and collapsible.
- Or the scheduler timeline - For resource scheduling with real drag to re-time, the enterprise timeline views give you bars on a shared axis per squad or person.
- Free and MIT - The Gantt-style grid is entirely @svgrid/grid. Only the scheduler timeline route needs the commercial package.
Live examples
- Gantt chart - Project plan with a wide custom Schedule cell: bars positioned by start/end %, phase coloring, progress fill, today line, overdue glow.
- Portfolio roadmap - initiatives across squads - A dashboard-forward portfolio planner: a live portfolio-health strip (status mix, capacity by squad, delivery trend, on-track gauge) over a Gantt of squads x initiatives with progress bars and milestones.
- Project management board - Nested, collapsible column groups (Task / Details / Timeline / Progress), status + priority + assignee dropdowns, date cells, a custom progress-bar renderer, drag-to-reorder rows, and client pagination - all from stock props.
- Project tracker (PM workspace) - Linear-style project workspace: KPI strip (Projects / In progress / Ready / Blocked / Budget), bulk-action toolbar (Mark ready, Block, Move to launch, Delete) that enables on selection, phase-grouped rows with per-phase aggregate cards, NEW pill + SVG progress ring on the name column, avatar owner, colour-block Status / Priority / Risk cells, Department chip, multi-skills chips, inline filter row.
- Project WBS tree - Phase → task → subtask with % complete that rolls up via effort-weighted average when you edit any leaf.
- Trash truck timeline - Public-works dispatcher: each truck glides along its day-long route with spinning wheels; stops, fill levels and statuses update on a 2s tick.
Documentation
- Recipes / Cookbook - Quick patterns for the questions that come up over and over. Each recipe is paired with a live demo or a minimal snippet that runs against the shipping library.
- Scheduler / calendar mode - Set one scheduler prop and the grid renders its rows as events on a calendar instead of a table. It is the same <SvGrid>, the same data and columns - only…
- Gantt chart mode - The Gantt view of the grid is in progress and due on 1 November 2026. It is on the roadmap as an in-progress item, and this page becomes its guide on that date.
Related articles
- Building a Project / Task Board with a Svelte Data Grid - How to build a task management grid with grouping by status or assignee, inline edits, subtask tree rows, and saved views - without reaching for a dedicated project management tool.
- Pinned (Frozen) Columns for Wide Svelte Data Grids - How to pin identity and action columns in SvGrid so users never lose their place while scrolling wide tables - declarative config, runtime API, and the tradeoffs that matter.
Frequently asked questions
Does SvGrid have a Gantt chart component?
Not yet. A Gantt view of the grid - one gantt prop, phases that roll up, dependency arrows, drag to reschedule, a critical path - is in progress in @svgrid/enterprise and due on 1 November 2026. Until then a Gantt is built as a grid with one wide custom cell per row that positions task bars by date, which is what the example on this page does.
Can I use the scheduler as a Gantt chart?
For resource and booking timelines, yes. The scheduler's timeline views draw bars on a time axis with drag to re-time and resize. It is not a project planner: no critical path, baselines or work-breakdown structure. Those are what the Gantt view due on 1 November 2026 adds.
Can tasks have dependencies?
The enterprise scheduler has optional dependencies for ordered bookings, where a job moves through stations in sequence. They are opt-in, and without dependency config the timeline draws no arrows and cascades nothing.
Is it free?
The grid-based recipe is MIT-licensed in @svgrid/grid. The scheduler timeline needs the commercial @svgrid/enterprise package, and so will the Gantt view when it ships.