Svelte Gantt Chart
SvGrid has no Gantt mode, and it is worth saying that before you read further. What it 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: it draws real bars on a time axis with drag to re-time and resize. It is deliberately not a project planner though, so there is no critical path, no baselines and no percent-complete roll-up, and none are planned.
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…
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?
No. There is no Gantt mode or Gantt component. A Gantt view 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 explicitly not a project planner: no critical path, baselines or work-breakdown structure.
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 Gantt is MIT-licensed in @svgrid/grid. The scheduler timeline alternative needs the commercial @svgrid/enterprise package.