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/react-grid to add or customize default context menu.

To add a custom menu, import and apply ContextMenu from @svar-ui/react-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:

import { useRef } from "react";
import { getData } from "../data";
import { Grid, ContextMenu } from "@svar-ui/react-grid";

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" },
];

export default function Example() {
  // `tableRef` will be attached to the Grid instance. Pass the instance (or ref) as `api`.
  const tableRef = useRef(null);

  // `columns` should be defined elsewhere in your code
  const columns = [/* ... */];

  return (
    <ContextMenu api={tableRef.current} options={options}>
      <Grid data={data} columns={columns} ref={tableRef} />
    </ContextMenu>
  );
}

Related articles: