To add a header context menu that allows users to show or hide columns, you can use the HeaderMenu component from the wx-svelte-grid package. Here’s how to set it up:
Import the HeaderMenu component and wrap your Grid component with it.
Initialize the Grid API to access its functions for toggling columns.
Optionally, specify which columns should be available in the menu.
Example:
<script>
import { Grid, HeaderMenu } from "wx-svelte-grid";
import { getData } from "./common/data";
const { data, columns } = getData();
let table;
function init(api) {
table = api;
}
</script>
<HeaderMenu api={table}>
<Grid {data} {columns} {init} />
</HeaderMenu>
To restrict the menu to specific columns, pass a columns object to HeaderMenu, with the column IDs you want to include set to true:
<HeaderMenu api={table} columns={{ taskName: true, startDate: true, priority: true }}>
<Grid {data} {columns} {init} />
</HeaderMenu>
This setup will allow users to right-click on the header and show or hide specific columns, giving them control over which columns they see.
