Adding a context menu

Adding the default context menu

To add the default context menu to the Grid, you need to import the ContextMenu component to the page (from the @wx/svelte-grid package), wrap the Grid tag inside the ContextMenu tag and use init to get access to the Grid api.

Example:

<script>
  import { Grid, ContextMenu } from "@wx/svelte-grid"; 
  import { getData } from "./common/data";

  let table;
  function init(api) {
    table = api;
  }

</script>

<ContextMenu api={table}>
  <Grid {data} {columns} {init} />
</ContextMenu>

Adding a custom context menu

To add a custom menu, in the example below we do the following:

• import the ContextMenu component from @wx/svelte-menu
• add the options array
• import the getContext helper function
• add the function to handle clicks on the menu items
• use init to get access to the Grid API

<script>
    import { getData } from "./common/data";
    import { getContext } from ""svelte"; // import the **getContext** helper function
    import { Grid } from "wx/svelte-grid";
    import { ContextMenu } from "wx/svelte-menu"; // import the component
    const { data, columns } = getData();

    let table;

    function init(api) {
        table = api;
    }
    //add menu options
    const options = [
           {
             id: "add",
             text: "Add before",
             icon: "wxi-table-row-plus-before",
           },
           { id: "copy", text: "Copy", icon: "wxi-content-copy" },
           { id: "delete", text: "Delete", icon: "wxi-delete-outline" },
           { type: "separator" },
           { id: "info", text: "Info", icon: "wxi-alert" },
           { id: "view", text: "View", icon: "wxi-external" },
       ];

       const helpers = getContext("wx-helpers");
       const handleClicks = ev => {
           const option = ev.detail.action;
           if (option) {
               const id = table.getState().selected;
               switch (option.id) {
                   case "add":
                       table.exec("add-row", { row: {}, before: id });
                       break;
                   case "copy":
                       table.exec("add-row", {
                           row: { ...table.getRow(id), id: null },
                           after: id,
                       });
                       break;
                   case "delete":
                       table.exec("delete-row", { id });
                       break;
                   default:
                       helpers.showNotice({ text: `You clicked ${option.text}` });
               }
           }
       };
       // select item and open menu for it
       function getItem(id) {
           if (id) table.exec("select-row", { id });
           return id;
       }
</script>

<ContextMenu 
  {options}
  on:click={handleClicks}
  at="point"
  resolver={getItem}>
  <Grid {data} {columns} {init} />
</ContextMenu>

Adding a header menu

The header context menu allows hiding/showing the columns by clicking their names in this menu.

To add the default context menu for all column headers, you need to import the HeaderMenu component to the page (from the @wx/svelte-grid package), wrap the Grid tag inside the HeaderMenu tag and use init to get access to the table api.

Example:

<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}>
    <Grid {data} {columns} {init} />
</HeaderMenu>

To add the header context menu for specific columns, import the HeaderMenu component to the page (from the @wx/svelte-grid package), wrap the Grid tag inside the HeaderMenu tag and use init to get access to the table api, and add the columns object with the required columns names to the HeaderMenu tag.

<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: How to access Grid API