Skip to main content

Configuring the grid (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 "@svar-ui/react-gantt";
import { getData } from "../data";

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
];

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

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 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 { Gantt } from "@svar-ui/react-gantt";
import { getData } from "../data";

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: "add-task",
    header: "",
    width: 50,
    align: "center",
  },
];

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

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 { useEffect, useRef } from "react";
import { Gantt } from "@svar-ui/react-gantt";
import { getData } from "./data";

function App() {
  const data = getData();
  const api = useRef(null);

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

  return <Gantt ref={api} columns={data.columns} tasks={data.tasks} />;
}

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

Displaying unscheduled tasks​

The functionality is available in PRO Edition only

PRO

All new tasks created via the UI are unscheduled by default. To show unscheduled tasks in the tasks tree area, set the unscheduledTasks property to true. Columns like Start and Duration will display a hyphen (-) for unscheduled tasks. Unscheduled tasks are not shown in the Chart.

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

const data = getData();

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

Hiding the grid area​

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

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

const data = getData();

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

Related sample: No grid

Adding a header menu​

You can add a header menu to columns in the grid area to dynamically hide and show them via the HeaderMenu. To add a header menu, import HeaderMenu from "@svar-ui/react-gantt" and then place the Gantt component as a child of HeaderMenu. Use a ref for the Gantt API instance:

import { useRef } from "react";
import { Gantt, HeaderMenu } from "@svar-ui/react-gantt";

function App() {
  const api = useRef(null);

  const columns = { start: true, duration: true };

  return (
    <HeaderMenu api={api} columns={columns}>
      <Gantt ref={api} tasks={/* ... */} links={/* ... */} scales={/* ... */} />
    </HeaderMenu>
  );
}

The description of HeaderMenu properties you can see here.

The example below shows how to add a header menu to the grid columns and make it possible to hide the "start" and "duration" columns:

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

function App() {
  const data = getData();
  const columns = { start: true, duration: true };
  const api = useRef(null);

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

Related sample: Header menu: hiding columns

Adding custom HTML content to cells​

Gantt allows adding custom HTML to grid (tasks tree) cells.

Adding components​

Basically, what you need is four simple steps:

  • create a component (using HTML or ready-made components from the @svar-ui/react-core library)
  • in the component, access Gantt grid properties via the component props (for example: { api, row, column }), if needed
  • import the configured component to the application page with Gantt
  • add this component to the needed cell in Gantt grid

Accessing Gantt grid properties in components​

Components in grid cells receive the following props:

  • api - Grid API, using which you can call actions or listen to them
  • row - task data object
  • column - column data (its id, dimensions, etc.)

The example below demonstrates how to customize cells by adding images to them.

// AvatarCell.jsx
import { useMemo } from "react";
// assume `users` is available in scope (import or context)
const url = "https://svar.dev/demos/grid/assets/avatars/";

function AvatarCell({ row }) {
  const user = useMemo(() => users.find((u) => u.id === row.assigned), [row]);
  const avatar = useMemo(
    () => (user ? `${url}${user.label.replace(" ", "_")}.png` : ""),
    [user]
  );

  return (
    <div className="container" style={{ display: "flex", alignItems: "center", padding: "0 4px" }}>
      <div className="avatar" style={{ width: 40 }}>
        {avatar && (
          <div className="user-avatar" style={{ width: 30, height: 30, borderRadius: "50%", backgroundColor: "#dfe2e6", textAlign: "center" }}>
            <img className="user-photo" alt="" src={avatar} style={{ display: "block", width: "100%", height: "100%", borderRadius: "50%", backgroundColor: "#dfe2e6" }} />
          </div>
        )}
      </div>
      <div>{user?.label ?? ""}</div>
    </div>
  );
}

export default AvatarCell;

Now you can import your component and apply it to a cell by adding its component to the cell property of a column:

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

const columns = [
  { id: "text", header: "Task name", width: 220 },
  { id: "assigned", header: "Assigned", width: 160, cell: AvatarCell },
  { id: "start", header: "Start Date", width: 100 },
];

const data = getData();

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

Related sample: Grid custom columns

Applying in-built inline editors​

To apply the inline editor to column cells, set the editor parameter of the columns property to the required value ("text" | "combo" | "datepicker" | "richselect").

Example:

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

const data = getData();

const columns = [
  {
    id: "text",
    header: "Task name",
    width: 170,
    sort: true,
    editor: "text",
  },
  {
    id: "start",
    header: "Start date",
    width: 120,
    align: "center",
    sort: true,
    editor: "datepicker",
  },
];

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

Related sample: Grid inline editors

Customizing built-in editors​

You can apply a template and custom React component to the cell editor (except the "text" type editor). In this case, column "editor" should be an object with "type" and "config". "config" allows to set a custom component in the "cell" property.

Please note that for the "combo" editor, the cell component will be applied to dropdown options only, while for "datepicker" to the input field.

Components used in editor cells receive data via props:

  • data - inline editor data (for example, for combo and richselect it's an item from options, for datepicker - date value)

Let's consider a custom component for values of inline editors in the "start" column. The component will show a formatted date and a calendar icon:

// DateCell.jsx
function DateCell({ data }) {
  const options = { year: "numeric", month: "numeric", day: "numeric" };

  if (!data) return null;

  return (
    <div className="container" style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      <span>{data.toLocaleString("en-US", options)}</span>
      <i className="icon wxi-calendar" style={{ display: "inline-flex", alignItems: "center", fontSize: 20, color: "#b5b5b5" }} />
    </div>
  );
}

export default DateCell;

Apply this component in "cell" property of an inline editor config:

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

const data = getData();

const columns = [
  { id: "text", header: "Task name", flexgrow: 1 },
  {
    id: "start",
    header: "Start date",
    width: 120,
    align: "center",
    editor: {
      type: "datepicker",
      config: {
        cell: DateCell,
      },
    },
  },
];

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

Related samples: