Skip to main content

ContextMenu

Description​

ContextMenu component

Usage​

<ContextMenu :api="api" :at="at" :resolver="resolver" :options="options" :filter="filter" :datakey="datakey" :css="css" />

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

To add a custom menu, import and apply ContextMenu from @svar-ui/vue-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 setup>
  import { getData } from "../data";
  import { Grid, ContextMenu } from "@svar-ui/vue-grid";
  import { ref } from "vue";
  
  const table = ref();
  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>

<template>
  <ContextMenu :api="table" :options="options">
    <Grid :data="data" :columns="columns" ref="table" />
  </ContextMenu>
</template>

Related articles: