Skip to main content

groupBy

PRO

The functionality is available in PRO Edition only

Description​

Optional. Defines the initial task grouping configuration in Gantt

Usage​

groupBy?: string | {
  field: string,
  taskHierarchy?: boolean,
  resourceHierarchy?: boolean,
  multipleResources?: boolean,
  ungrouped?: false | "top" | "bottom",
  resolver?: (task: ITask) => any,
};

Parameters​

  • field - (required) the field to group tasks by; use "resource" to group by assigned resources, or any task field name (e.g., "status", "priority")
  • taskHierarchy - (optional) if true, preserves the task parent/child structure within each group; Default: false
  • resourceHierarchy - (optional) if true, shows the resource hierarchy (teams and people) within resource groups; applies only when field is "resource"; Default: true
  • multipleResources - (optional) if false, tasks assigned to multiple resources appear under each resource separately; if true, such tasks appear once under a combined group label (e.g., "Alice, Bob"); applies only when field is "resource"; Default: false
  • ungrouped - (optional) controls placement of tasks that have no value for the grouping field: false hides them, "top" places them above all groups, "bottom" places them below all groups; Default: "bottom"
  • resolver - (optional) a custom function (task: ITask) => value to extract the group value from a task; overrides task[field]; not applicable when field is "resource"

Example​

<script setup>
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/vue-gantt";

  const data = getData();
</script>

<template>
  <Gantt
    :tasks="data.tasks"
    :links="data.links"
    :scales="data.scales"
    :resources="data.resources"
    :assignments="data.assignments"
    :groupBy="{ field: 'resource' }"
  />
</template>

Related articles: