Skip to main content

HeadertMenu

Description​

HeaderMenu helper

Adds a header menu to columns in the grid area to dynamically hide and show them.

Usage​

<HeaderMenu api={api} columns={columns} />

You can import the component from @svar-ui/react-gantt .

Parameters​

  • api - (required) Gantt API object
  • columns - (optional) allows adding the menu for specific columns; an object with columns IDs where each value is set to true (to show the menu for a column) or false (hide the column menu); true is set by default. If not provided, HeaderMenu options will include all Gantt columns

Example​

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

export default function Example() {
  const data = getData();
  const columns = { start: true, duration: true };

  // api holds the Gantt instance (API) and is passed to HeaderMenu
  const [api, setApi] = useState(null);
  const ganttRef = useRef(null);

  // When the Gantt component mounts, its ref is available; set api to the instance
  useEffect(() => {
    setApi(ganttRef.current);
  }, []);

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

Related articles: