Header menu

The section describes how to add a header menu to columns in the grid area. It will allow you to dynamically hide and show them via the HeaderMenu. To add a header menu, you should import HeaderMenu from "@svar-ui/svelte-gantt" and then place the Gantt tag inside the HeaderMenu tag.

<script>
import { Gantt, HeaderMenu } from "@svar-ui/svelte-gantt";
</script>

<HeaderMenu {api} ...>
  <Gantt bind:this={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:

<script>
  import { getData } from "../data";
  import { Gantt, HeaderMenu } from "@svar-ui/svelte-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 sample: Header menu: hiding columns

Related article: HeaderMenu helper