Skip to main content

groupBy

The functionality is available in PRO Edition only

PRO

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​

import { getData } from "./common/data";
import { Gantt } from "@svar-ui/react-gantt";

const data = getData();

function App() {
  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
      resources={data.resources}
      assignments={data.assignments}
      groupBy={{ field: "resource" }}
    />
  );
}

export default App;

Related articles: