Skip to main content

Assign resources

PRO

The functionality is available in PRO Edition only

Resource management lets end users see who is responsible for each task directly in the grid and assign or unassign team members to distribute work. You can also query assignments at runtime and serialize resource and assignment data for backend integration.

Assignment rules​

These rules apply to all assignment operations. Gantt silently ignores any operation that violates them.

  • Only leaf resources (those with no children) support assignment. You can't assign parent or group resources directly.
  • You can only assign resources to leaf tasks. Summary tasks don't support assignments.
  • You can't assign the same resource to the same task twice.
  • Deleting a task removes all its assignments automatically.
  • When you change resource via update-assignment, make sure the new resource has no existing assignment on that task.

Assign resources​

Resources represent people or other entities you assign to tasks. You can configure them through two separate arrays: resources and assignments.

Define resources​

To define your resources, pass an array of resource objects to the resources property. Use optional parent field to build a hierarchy:

<script>
  import { Gantt } from "@svar-ui/svelte-gantt";

  const resources = [
    { id: "team1", name: "Frontend Team" },
    { id: "r1", name: "Alice", role: "Developer", color: "#4CAF50", parent: "team1" },
    { id: "r2", name: "Bob",   role: "Designer",  color: "#2196F3", parent: "team1" },
  ];
</script>

<Gantt tasks={...} {resources} />

Pass the assignments array to define which resources connect to which tasks. Each assignment links one resource to one task:

<script>
  import { Gantt } from "@svar-ui/svelte-gantt";

  const assignments = [
    { id: 1, task: 1, resource: "r1" },            // Alice at 100%
    { id: 2, task: 1, resource: "r2", units: 50 }, // Bob at 50%
    { id: 3, task: 2, resource: "r1" },
  ];
</script>

<Gantt tasks={...} {resources} {assignments} />

The units field sets the allocation percentage (0–100). It defaults to 100 when omitted.

See Assignment rules for constraints on which resources and tasks support assignments.

Add and remove assignments at runtime​

Call api.exec() with the relevant action to manage assignments after initialization:

// Assign a resource to a task
api.exec("add-assignment", {
  assignment: { task: 1, resource: "r1", units: 100 },
});

// Update the allocation of an existing assignment
api.exec("update-assignment", {
  id: 1,
  assignment: { units: 50 },
});

// Remove an assignment by its id
api.exec("delete-assignment", { id: 1 });

Query assignments​

Call api.getTaskResources(id) to get all resources assigned to a task:

const resources = api.getTaskResources(1);
// [{ id: "r1", name: "Alice", ... }, { id: "r2", name: "Bob", ... }]

api.getResourceTasks(id) works in reverse, it returns all tasks for a given resource:

const tasks = api.getResourceTasks("r1");
// [{ id: 1, text: "Design mockups", ... }, ...] or [] if no assignments exist

Lazy loading assignments​

When tasks use lazy: true (see Dynamic data loading), the assignments that belong to the child tasks must be delivered together with those tasks. The handler for request-data should fetch them and forward them through provide-data:

api.on("request-data", ev => {
    restProvider
        .getData(ev.id, { assignments: true })
        .then(({ tasks, links, assignments }) => {
            api.exec("provide-data", {
                id: ev.id,
                data: { tasks, links, assignments },
            });
        });
});

Without this, child-task assignments are never loaded — the resource column for the opened branch stays empty and resource-load won't include those tasks.

Serialize resource data​

To read the current resources or assignments out of Gantt as plain arrays (for saving to a server or local state), call api.serialize() with data parameter:

const resources   = api.serialize({ data: "resources" });
const assignments = api.serialize({ data: "assignments" });

Display resources in the grid​

When you pass the resources array to <Gantt>, the resource column is added to the grid automatically. It shows each task's assigned members as avatar badges, but is read-only by default.

To make the column editable with an inline multiselect picker, get the default columns via getDefaultColumns and attach the multiselect editor to the resources column:

<script>
  import { Gantt, getDefaultColumns } from "@svar-ui/svelte-gantt";

  const columns = getDefaultColumns({ resources: true });
  columns.find(c => c.id === "resources").editor = "multiselect";
</script>

<Gantt {tasks} {resources} {assignments} {columns} />

Edit assignments in the Editor​

The Editor component adds the Resources tab automatically when resources are passed to <Gantt>. No extra configuration is needed, just place <Editor {api} /> next to the Gantt:

<script>
  import { Gantt, Editor, getDefaultColumns } from "@svar-ui/svelte-gantt";
</script>

<Gantt
  bind:this={api}
  {tasks}
  {links}
  {scales}
  {resources}
  {assignments}
  columns={getDefaultColumns({ resources: true })}
/>
<Editor {api} />

The Resources tab lets users assign resources, adjust allocation (units), and remove assignments. It is hidden automatically for summary tasks.

Resource load​

The ResourceLoad component visualizes how much work is allocated per resource per day. See Resource load for the full guide.

Sort resources​

To sort the resource grid programmatically, call api.exec() with the sort-resources action:

api.exec("sort-resources", { key: "name", order: "asc" });

For multi-level sorting, call the action again with add: true:

api.exec("sort-resources", { key: "role", order: "asc", add: true });

Group by resource​

You can reorganize the task grid by assigned resource or any other task field. See Grouping tasks for the full guide.

Related articles: