Skip to main content

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/vue-gantt" and then place the Gantt tag inside the HeaderMenu tag.

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

<template>
  <HeaderMenu :api="api" ...>
    <Gantt ref="api" ... />
  </HeaderMenu>
</template>

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 setup>
  import { getData } from "../data";
  import { Gantt, HeaderMenu } from "@svar-ui/vue-gantt";
  import { ref } from "vue";

  const data = getData();
  const columns = { start: true, duration: true };

  const api = ref();
</script>

<template>
  <HeaderMenu :api="api" :columns="columns">
    <Gantt
        ref="api"
        :tasks="data.tasks"
        :links="data.links"
        :scales="data.scales"
    />
  </HeaderMenu>
</template>

Related sample: Header menu: hiding columns

Related article: HeaderMenu helper