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} {columns} />

You can import the component from @svar-ui/svelte-velte-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:

<script>
  import { getData } from "../data";
  import { Gantt, HeaderMenu } from "@svar-ui/svelte-velte-gantt";
  
  const data = getData();
  const columns = { start: true, duration: true };

  let api = $state();
</script>
<HeaderMenu {api} {columns}>
  <Gantt
      bind:this={api}
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
  />
</HeaderMenu>

Related articles: