Skip to main content

HeaderMenu

Description​

HeaderMenu component that allows managing visibility of columns

The component allows users to hide/show columns by clicking their names in this menu.

Usage​

<HeaderMenu :api="api" :columns="columns" />

You can import the component from @svar-ui/vue-grid.

Parameters​

  • api - the api gateway object to bind the component to the DataGrid
  • columns - 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

Example​

The example below shows how to add the header menu for specific columns:

<script setup>
    import { getData } from "./common/data";
    import { Grid, HeaderMenu } from "@svar-ui/vue-grid";
    import { ref } from "vue";

    const { data, columns } = getData();

    const api = ref();
</script>

<template>
  <HeaderMenu :api="api" :columns="{ city: true, firstName: true, id: true }">
    <Grid :data="data" :columns="columns" v-model:this="api" />
  </HeaderMenu>
</template>

Related articles: