Gantt Chart
The new Gantt extension turns a worksheet into a project timeline. Each row keeps its cells and gains a bar on a shared time scale, with dependencies, progress and colours read straight from the data.
Published on October 3, 2026
Introducing
@jspreadsheet/gantt adds a timeline column to a worksheet. You choose which columns hold the task name, the start and end dates, the progress, the colour and the predecessors, and the extension draws a bar on every row, inside the same table, so the bars and the data never drift apart while scrolling, sorting or filtering.
The chart is not a separate view of the data: it is the data. Drag a bar and the date cells change. Draw an arrow between two tasks and the predecessors cell changes. Undo, events and the collaboration server see ordinary cell edits.
What does this extension do?
Most Gantt components want to own the data: you feed them a list of tasks and they render it somewhere else. This extension works the other way round. The worksheet stays the source of truth, and the timeline is a lane appended to each row of the grid, aligned with it by construction.
Bars from columns
The configuration maps task fields to column indexes. Start and end dates can be ISO strings or calendar columns, progress is a number from 0 to 100, the colour is any CSS colour, and predecessors are the row numbers the task depends on.
gantt({
columns: { label: 0, start: 1, end: 2, progress: 3, color: 4, predecessors: 5 },
width: 480,
daywidth: 16,
});
jspreadsheet.setExtensions({ gantt });
A row without a valid start date simply has an empty lane, so a plan can hold headings and notes between the tasks.
Editing in both directions
Change a date in a cell and the bar follows. On the chart, drag a bar to move it, drag one of its edges to resize it, with snapping in whole days. The new dates are written back through setValue, so onchange fires, the history records the change, and a connected server broadcasts it to the other users like any other edit.
Dependencies
A dot at the end of every bar starts a link: drag it onto another task's row and the row number is appended to that task's predecessors cell. The extension draws finish to start arrows between the bars, routed around the rows so they never cross a bar. Click an arrow to remove the dependency, which again is an edit of the cell.
Scale, zoom and today
The header shows the weeks and the days, with the current day marked and a line running through the rows. The timeline keeps a fixed width per day, so bars do not shift when tasks are added. Drag the header to pan, hold Shift and use the mouse wheel to zoom the day width around the cursor, or drag the right border of the timeline to show more days.
Self-contained
The extension ships as a single file with its own copy of the rendering runtime and no runtime dependencies. It runs next to every other Jspreadsheet extension, and it is registered like any of them, with one line.
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/gantt/dist/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/gantt/dist/style.css" />