Configuring the tasks tree area

The grid with tasks tree can be used for quick navigation.

By default, the tasks tree area contains 4 columns:

• Task name
• Start date
• Duration
• '+' column. A special column with the '+' button which allows users to add tasks

Configuring columns

Columns with default parameters are applied by default and you don't need to specify the columns objects.

Default columns array you can see here: columns.

Adding a column

If you want to add a new column, add the columns object to the array and specify its id parameter in the task object. id is the mandatory parameter which defines the content of cells and the cell will take the value of the matching property from a task by default.

import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import React, { useRef } from "react";

const GanttComponent = () => {
  const columns = [
    { id: "holder", header: "Holder", width: 90, align: "center" },
    //other columns
  ];

  const tasks = [
    {
      id: 1,
      start: new Date(2022, 2, 4),
      end: new Date(2023, 2, 4),
      progress: 20,
      parent: 1,
      type: "task",
      holder: "Nick",
    },
    //other tasks
  ];

  return <Gantt tasks={tasks} columns={columns} />;
};

export default GanttComponent;

Configuring columns width

To add columns with the fixed width, set the width value, the default value is 120. To make the width of columns flexible, apply the flexgrow parameter of the columns property. It specifies specifies how much space (width) relative to the grid width the column will take (it will take no effect on columns with the set width); the property is specified as a number and if flexgrow is set to 1 in one column only, the column will take the full available width.

Example:

import { getData } from "../data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { useRef } from "react";

const GanttComponent = () => {
  const data = getData();

  const columns = [
    { id: "text", header: "Task name", flexgrow: 2 },
    {
      id: "start",
      header: "Start date",
      flexgrow: 1,
      align: "center",
    },
    {
      id: "duration",
      header: "Duration",
      align: "center",
      flexgrow: 1,
    },
    {
      id: "action",
      header: "",
      width: 50,
      align: "center",
    },
  ];

  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
      columns={columns}
    />
  );
};

export default GanttComponent;

Disabling the tasks reordering

By default, a user can reorder tasks in the grid area with drag&drop. To disable the tasks ordering feature, you can apply the api.intercept() method to handle the drag-task action.

import { getData } from "./data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { useRef } from "react";

const MyComponent = () => {
  const data = getData();
  const apiRef = useRef();

  if (apiRef.current) {
    apiRef.current.intercept("drag-task", ev => {
      if (typeof ev.top !== "undefined")
        return false;
    });
  }

  return (
    <Gantt
      columns={data.columns}
      tasks={data.tasks}
      ref={apiRef}
    />
  );
};

export default MyComponent;

Another way to disable the feature is to switch to the read-only mode.

Hiding the tasks tree area

To hide the area with tasks tree, set the columns property to false:

import { getData } from "./data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const data = getData();

function App() {
  return (
    <Gantt
      columns={false}
      tasks={data.tasks}
    />
  );
}

export default App;