Skip to main content

Columns

Default columns​

The grid contains 4 columns by default:

  • Task name — displays the task title
  • Start date — shows the task start date
  • Duration — shows the task duration
  • + — a special column with the Add button for creating new tasks

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

The default column configuration is available via the defaultColumns helper or can be generated with getDefaultColumns.

Custom columns​

Adding a column​

To add a new column, include a column object in the array and set its id to the matching task property. The id is mandatory as cells display the value of the property with that name from the task object by default.

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

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 set a fixed column width, use the width parameter. The default value is 120.

To make a column flexible, use the flexgrow parameter from the columns property. It takes a number and specifies how much of the available grid width the column takes relative to other flexible columns. It has no effect on columns with a fixed width set. If only one column has flexgrow: 1, it takes all available width.

Example:

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

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: 37,
    align: "center",
  },
];

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

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, you should import HeaderMenu from "@svar-ui/react-gantt" and then place the Gantt component inside the HeaderMenu component.

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

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

  return (
    <HeaderMenu api={api} ...>
      <Gantt ref={api} ... />
    </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 possible to hide the "start" and "duration" columns:

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

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

Column content​

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 props, 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 have access to the following data via 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
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">
      <div className="avatar">
        {avatar && (
          <div className="user-avatar">
            <img className="user-photo" alt="" src={avatar} />
          </div>
        )}
      </div>
      <div>{user?.label ?? ""}</div>
    </div>
  );
}

export default AvatarCell;
/* AvatarCell.css */
.container {
  display: flex;
  align-items: center;
  padding: 0 4px;
}

.avatar {
  width: 40px;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #dfe2e6;
  text-align: center;
}

.user-photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #dfe2e6;
}

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

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

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.

First, you need to prepare a custom component file. Components in editor cells have access to the data property via props:

  • data - inline editors 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 "start" column. The component will show formatted date and calendar icon:

DataCell component
function DateCell({ data }) {
  const options = { year: "numeric", month: "numeric", day: "numeric" };

  if (!data) return null;

  return (
    <div className="container">
      <span>{data.toLocaleString("en-US", options)}</span>
      <i className="icon wxi-calendar"></i>
    </div>
  );
}

export default DateCell;
/* DateCell.css */
.container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icon {
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  color: #b5b5b5;
}

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

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

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}
    />
  );
}

Displaying resources in the grid​

To add a resource column that shows assigned team members as avatar badges with an inline multiselect editor, see Displaying resources in the grid.

No columns​

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

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

const data = getData();

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

Related sample: No grid

To show only the chart area without removing columns entirely, use displayMode="chart".

Related articles:

Related samples: