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
 
children - Array of sub-items (submenu)
 
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: 8)
 
contextMenuYOffset - Vertical distance from click (default: 0)
 
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.
 
Header Context Menu
 
Right-click menus for column headers with predefined and custom actions.
 
CM05 Header Context Menu
 
Right-click on column headers for sorting, freezing, and hiding columns
 
Live Demo
 
 
Right-click any column header to see the context menu.
 
 
Code
 
Header Menu Config 
 
 
 
Predefined Actions
 
Predefined Actions
 
  • 'sortAsc' - Sort ascending
    •  
  • 'sortDesc' - Sort descending
    •  
  • 'clearSort' - Clear sort (auto-hidden if not sorted)
    •  
  • 'freezeColumn' - Freeze up to this column
    •  
  • 'unfreezeColumn' - Unfreeze (auto-hidden if not frozen)
    •  
  • 'hideColumn' - Hide this column
    •  
  • 'columnVisibility' - Submenu to show/hide columns
 
Auto-Visibility
 
Some actions auto-hide based on state (clearSort, freeze/unfreeze).
 
CM06 Column Visibility
 
Show/hide columns via submenu with 'Show all' option
 
Live Demo
 
 
Right-click a header → Column Visibility to toggle columns.
 
Code
 
Column Visibility 
 
 
 
Features
 
Submenu Features
 
  • Show all - Unhide all columns at once
    •  
  • Checkboxes - ☑ visible, ☐ hidden
    •  
  • Stays open - Toggle multiple columns
    •  
  • Reactive - Updates after each toggle
 
column.isHidden Property
 
Hidden columns stay in the array but are excluded from rendering. They can be shown again via the submenu.
 
CM07 Custom Header Actions
 
Mix predefined actions with custom menu items
 
Live Demo
 
 
Right-click headers. Note: ID column has isSortable: false.
 
 
Code
 
Custom Actions 
 
 
 
HeaderMenuContext
 
HeaderMenuContext
 
The context object passed to callbacks:
 
  • column - Column definition
    •  
  • field - Column field name
    •  
  • columnIndex - Visual index
    •  
  • sortDirection - 'asc' | 'desc' | null
    •  
  • isFrozen - Is column frozen
    •  
  • allColumns - All columns array
    •  
  • labels - For translations
 
isSortable: false
 
Hides sort options in header context menu.
 
CM08 Multi-Sort via Menu
 
Ctrl+click Sort Ascending/Descending to add to existing sort
 
Live Demo
 
 
Try: Right-click → Sort Asc on Name, then Ctrl+Right-click → Sort Asc on Status.
 
sort: []
 
Code
 
Multi-Sort 
 
 
 
How It Works
 
Requirements
 
sortMode = 'multi' must be set.
 
Behavior
 
  • Normal click - Replaces all existing sorts with single column
    •  
  • Ctrl+click - Adds column to existing sort order
 
Consistency
 
This matches the Ctrl+click behavior when clicking directly on column headers.
 
Submenu Support
 
Header context menu items can have submenus using the children property:
 
Submenu Example 
 
 
 
Behavior Notes
 
  • Header filler: Right-clicking the empty space after the last column header also opens the header context menu
    •  
  • Close on scroll: Context menus automatically close when the grid is scrolled
    •  
  • Viewport awareness: Menus use @floating-ui/dom to stay within viewport bounds
 
Translatable Labels
 
Predefined context menu item labels can be customized via the labels.contextMenu property:
 
Label Customization