CM01 Right-Click Menu

Custom context menu with icons, keyboard shortcuts, and dividers

Live Demo

Right-click any cell or use keyboard shortcuts.

Code
Basic Menu 
 
 
Configuration
 
Menu Item Properties
 
id - Unique identifier
 
label - Display text (string or callback)
 
icon - Icon (string or callback)
 
shortcut - Keyboard shortcut (e.g., "C", "Delete")
 
danger - Red styling
 
dividerBefore - Add separator
 
disabled - Boolean or callback
 
visible - Boolean or callback
 
CM02 Dynamic Menu Items
 
Dynamic labels, icons, disabled state, and visibility based on row data
 
Context Object
 
The onclick callback receives a context object with:
 
  • row - The row data object
    •  
  • rowIndex - Index of the row
    •  
  • colIndex - Index of the column
    •  
  • column - Column definition
    •  
  • cellValue - Value of the clicked cell
 
Code
 
Dynamic Items 
 
 
 
Dynamic Properties
 
Callback Properties
 
These accept callbacks for dynamic behavior:
 
  • label: (ctx) => string
    •  
  • icon: (ctx) => string
    •  
  • disabled: (ctx) => boolean
    •  
  • visible: (ctx) => boolean
 
CM03 Cell-Aware Actions
 
Show different menu items based on clicked column and cell value
 
Live Demo
 
 
Right-click different columns to see different menu items.
 
 
Code
 
Cell-Aware Menu 
 
 
 
Context Properties
 
Context Object
 
ctx.column.field - Column field name
 
ctx.cellValue - Cell's current value
 
ctx.colIndex - Column index
 
ctx.row - Full row data
 
ctx.rowIndex - Row index
 
Use Cases
 
  • Email actions only on email column
    •  
  • Status toggles only on status column
    •  
  • Disable "Clear" for required fields
    •  
  • Dynamic labels with cell values
 
CM04 Menu Positioning
 
Adjust horizontal and vertical offset of the context menu from click position
 
Live Demo
 
 
Right-click any cell to see the menu position.
 
 
 
 
 
Code
 
Offset Config 
 
 
 
Configuration
 
Offset Properties
 
contextMenuXOffset - Horizontal distance from click (default: 0)
 
contextMenuYOffset - Vertical distance from click (default: 4)
 
Values
 
  • Positive X = menu appears right of cursor
    •  
  • Negative X = menu appears left of cursor
    •  
  • Positive Y = menu appears below cursor
    •  
  • Negative Y = menu appears above cursor
 
Edge Handling
 
The menu automatically flips or shifts to stay within viewport bounds.