Skip to main content

Work Breakdown Structure (WBS)

PRO

The functionality is available in PRO Edition only

WBS numbering assigns each task a hierarchical, dot-separated code reflecting its position in the task tree. Enable it with the wbs prop:

<Gantt {tasks} {links} {scales} wbs />

WBS codes​

Codes are auto-computed based on tree position:

  • Top-level tasks: 1, 2, 3
  • Children: 1.1, 1.2
  • Grandchildren: 1.2.1

Codes are read-only and cannot be set manually. They recalculate automatically whenever the task tree changes (add, delete, move, reorder, indent/outdent) and on data load. The computed value is exposed on each task as the $wbs field (string).

WBS column​

When wbs is enabled, a WBS column is automatically prepended to the grid with these defaults:

{ id: "wbs", header: "WBS", width: 80, align: "left", sort: false, resize: true,
  template: (_, row) => row.$wbs ?? "" }

Using getDefaultColumns with WBS​

When building a column array with getDefaultColumns, pass wbs: true to include the WBS column:

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

const columns = getDefaultColumns({ wbs: true });

To customize the WBS column (width, header, etc.), edit the returned array entry with id: "wbs":

const columns = getDefaultColumns({ wbs: true });
const wbsCol = columns.find(c => c.id === "wbs");
wbsCol.width = 120;
wbsCol.header = "WBS Code";

You can also define a WBS column from scratch using row.$wbs in a template:

const columns = [
  { id: "wbs", header: "WBS", width: 80, template: (_, row) => row.$wbs ?? "" },
  // other columns
];

Related articles: