Skip to main content

ContextMenu

Description​

ContextMenu component

Usage​

<ContextMenu {api} {at} {resolver} {options} {filter} {datakey} {css} />

This page describes the properties of the DataGrid ContextMenu component which you can import from @svar-ui/svelte-grid to add or customize default context menu.

To add a custom menu, import and apply ContextMenu from @svar-ui/svelte-menu. Please, also refer to the description of ContextMenu API.

Parameters​

  • api - the api gateway object to bind the component to the DataGrid All ContextMenu properties description see here: ContextMenu.

Example​

More examples see here: Adding context menu.

The example below shows how to apply the "button" type to all menu items and display the dimmed text next to buttons:

<script>
  import { getData } from "../data";
  import { Grid, ContextMenu } from "@svar-ui/svelte-grid";
  
  let table = $state();
  const data = getData();

  const options = [
    {
      id: "add:before",
      subtext: "Add before",
      icon: "wxi-table-row-plus-before",
      type: "button",
      },
      {
      id: "add:after",
      subtext: "Add after",
      icon: "wxi-table-row-plus-after",
          type: "button",
    },
    { type: "separator" },
    { id: "copy", subtext: "Copy", type: "button", icon: "wxi-content-copy" },
    { type: "separator" },
    { id: "delete", type: "button", subtext: "Delete", icon: "wxi-delete-outline" },
];
</script>

<ContextMenu api={table} {options}>
  <Grid {data} {columns} bind:this={table} />
</ContextMenu>

Related articles: