Module Extensions
AdditionalData
(Extended from @revolist/revogrid
)
ts
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
typescript
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.
ts
class ContextMenuPlugin {
getConfig(config: Partial<ContextMenuConfig> =;
close();
async open(target: EventTarget | null, event?: MouseEvent);
clearSubscriptions();
}
contextPopUp
ts
export function contextPopUp(this:;
POP_EL
ts
POP_EL: string;
ContextMenuItem
ts
export type ContextMenuItem = {
name: string | ((focused?: Cell | null, range?: RangeArea | null) => string);
class?: string;
icon?: string;
rowClass?: string | ((item: ContextMenuItem, focused?: Cell | null, range?: RangeArea | null) => string);
hidden?: boolean | ((item: ContextMenuItem, focused?: Cell | null, range?: RangeArea | null) => boolean);
action?: (event: MouseEvent, focused?: Cell | null, range?: RangeArea | null, close?: () => void) => void;
keepOpen?: boolean;
template?: (h: HyperFunc<VNode>, item: ContextMenuItem, focused?: Cell | null, range?: RangeArea | null, close?: () => void) => any;
};
ContextMenuConfig
ts
export type ContextMenuConfig = {
items: ContextMenuItem[];
rightClick?: boolean;
leftClick?: boolean;
targetSelectors?: string[];
anchorToTarget?: boolean;
};