Context Menu

Module Extensions

AdditionalData (Extended from @revolist/revogrid)

interface AdditionalData {
  /**
       * The context menu configuration for row context menus
       *
       * @example
       * ```typescript
       * grid.additionalData = {
       *   rowContextMenu: { items: [{ name: 'Edit', action: () => console.log('Edit action') }] },
       * };
       * ```
       */
      rowContextMenu?: ContextMenuConfig
}

Plugin API

ContextMenuPlugin

The ContextMenuPlugin is a RevoGrid plugin that adds a customizable context menu to the grid, allowing users to interact with grid data through right-click actions. This plugin enhances user experience by providing quick access to common functionalities.

Features:

• Dynamic context menu creation using the ContextMenuConfig type, which specifies menu items and their associated actions.
• Event-driven architecture, reacting to grid events like ROW_MENU_EVENT to display context menus contextually.
• Integration with RevoGrid’s core features through PluginProviders, allowing seamless interaction with the grid’s data and layout.
• Automatic positioning of the context menu, ensuring it remains within the grid’s boundaries and adjusts dynamically to fit available space.
• Subscribes to document click events to automatically close the menu when clicking outside, maintaining a clean user interface.

Usage:

• Integrate ContextMenuPlugin into a RevoGrid instance by adding it to the grid’s plugins array.

Example

import { ContextMenuPlugin } from '@revolist/revogrid-pro'

const grid = document.createElement('revo-grid');
grid.plugins = [ContextMenuPlugin];

This plugin is essential for applications requiring enhanced grid interactivity, providing users with context-specific actions for efficient data manipulation.

class ContextMenuPlugin {
  getConfig(config: Partial<ContextMenuConfig> =;

  close();

  async open(target: EventTarget | null, event?: MouseEvent);

  clearSubscriptions();
}

---

contextPopUp

export function contextPopUp(this:;

---

POP_EL

POP_EL: string;

---

ContextMenuItem

export type ContextMenuItem =  {
  name: string | ((focused?: Cell | null, range?: RangeArea | null) => string);
  class?: string;
  icon?: string;
  rowClass?: string | ((focused?: Cell | null, range?: RangeArea | null) => string);
  hidden?: boolean | ((focused?: Cell | null, range?: RangeArea | null) => boolean);
  action?: (event: MouseEvent, focused?: Cell | null, range?: RangeArea | null) => void;
  keepOpen?: boolean;
};

---

ContextMenuConfig

export type ContextMenuConfig =  {
  items: ContextMenuItem[];
  rightClick?: boolean;
  targetSelectors?: string[];
};