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

You can import the component from wx-svelte-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>
    import { getData } from "./common/data";
    import { Grid, HeaderMenu } from "wx-svelte-grid";

    const { data, columns } = getData();

    let table;
    function init(api) {
        table = api;
    }
</script>

<HeaderMenu api={table} columns={{ city: true, firstName: true, id: true }} >
  <Grid  {data} {columns} {init} />
</HeaderMenu>

Related articles: