Context Menu
Right-click any cell to open a context menu with clipboard operations, undo/redo, and selection actions. Keyboard shortcut labels are displayed alongside each item.
Live Demo
The demo above uses Radix UI for styling. To see this feature with your framework's design system (Fluent UI, Material UI, Vuetify, PrimeNG, etc.), click "Open in online demo" below the demo.
Quick Example
- React
- Angular
- Vue
- Vanilla JS
import { OGrid } from '@alaarab/ogrid-react-radix';
import { useRef } from 'react';
import { useUndoRedo } from '@alaarab/ogrid-react-radix';
function App() {
const undoRedo = useUndoRedo();
return (
<OGrid
columns={columns}
data={data}
getRowId={(r) => r.id}
editable
onCellValueChanged={(e) => {
undoRedo.pushChange(e);
// persist change...
}}
onUndo={undoRedo.undo}
onRedo={undoRedo.redo}
canUndo={undoRedo.canUndo}
canRedo={undoRedo.canRedo}
/>
);
}
The OGrid component has the same props across all React UI packages. To switch, just change the import:
- Radix (lightweight, default):
from '@alaarab/ogrid-react-radix' - Fluent UI (Microsoft 365 / SPFx):
from '@alaarab/ogrid-react-fluent'— wrap in<FluentProvider> - Material UI (MUI v7):
from '@alaarab/ogrid-react-material'— wrap in<ThemeProvider>
import { Component } from '@angular/core';
import { OGridComponent, type IColumnDef } from '@alaarab/ogrid-angular-material';
@Component({
standalone: true,
imports: [OGridComponent],
template: `<ogrid [props]="gridProps" />`
})
export class GridComponent {
gridProps = {
columns: [
{ columnId: 'name', name: 'Name', editable: true },
{ columnId: 'department', name: 'Department' },
{
columnId: 'salary', name: 'Salary', type: 'numeric', editable: true,
valueFormatter: (v: unknown) => `$${Number(v).toLocaleString()}`,
},
] as IColumnDef<Person>[],
data: people,
getRowId: (item: Person) => item.id,
editable: true,
contextMenu: true,
};
}
Same component API across Angular packages. To switch, just change the import:
- Radix (CDK):
from '@alaarab/ogrid-angular-radix'(default, lightweight) - Angular Material:
from '@alaarab/ogrid-angular-material' - PrimeNG:
from '@alaarab/ogrid-angular-primeng'
All components are standalone — no NgModule required.
<script setup lang="ts">
import { OGrid, type IColumnDef } from '@alaarab/ogrid-vue-vuetify';
const columns: IColumnDef<Person>[] = [
{ columnId: 'name', name: 'Name', editable: true },
{ columnId: 'department', name: 'Department' },
{
columnId: 'salary', name: 'Salary', type: 'numeric', editable: true,
valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
},
];
const gridProps = {
columns,
data: people,
getRowId: (item) => item.id,
editable: true,
contextMenu: true,
};
</script>
<template>
<OGrid :gridProps="gridProps" />
</template>
Same component API across Vue packages. To switch, just change the import:
- Radix (Headless UI):
from '@alaarab/ogrid-vue-radix'(default, lightweight) - Vuetify:
from '@alaarab/ogrid-vue-vuetify'— wrap in<v-app>for theming - PrimeVue:
from '@alaarab/ogrid-vue-primevue'
import { OGrid } from '@alaarab/ogrid-js';
import '@alaarab/ogrid-js/styles';
const grid = new OGrid(document.getElementById('grid'), {
columns: columns,
data: data,
getRowId: (r) => r.id,
editable: true,
});
// Right-click any cell to see the context menu
// Undo/redo is handled automatically by the JS package
Right-click a cell to see the context menu with all available actions.
How It Works
The context menu is built in and requires no additional configuration. It appears when the user right-clicks on a data cell. Right-clicking on headers, empty space, or outside the grid does not open the menu.
Built-in Menu Items
| Item | Shortcut | Description |
|---|---|---|
| Undo | Ctrl+Z | Undo the last cell edit |
| Redo | Ctrl+Y | Redo the last undone edit |
| Copy | Ctrl+C | Copy selected cells to clipboard |
| Cut | Ctrl+X | Cut selected cells to clipboard |
| Paste | Ctrl+V | Paste clipboard contents into selected cells |
| Select all | Ctrl+A | Select all cells in the grid (cell selection, not row selection) |
On macOS, "Ctrl" is automatically displayed as the Command symbol.
The "Select all" menu item selects all cells for copy/paste/fill operations. This is different from row selection, where the header checkbox selects all rows for bulk operations. See Row Selection for details on row-level selection.
Undo/Redo State
The Undo and Redo items reflect their availability through the canUndo and canRedo props. When canUndo is false, the Undo item appears disabled (grayed out). Same for Redo.
<OGrid
// ...
onUndo={undoRedo.undo}
onRedo={undoRedo.redo}
canUndo={undoRedo.canUndo}
canRedo={undoRedo.canRedo}
/>
If onUndo and onRedo are not provided, the undo/redo items still appear but do nothing.
Cell-Only Activation
The context menu only opens on cell right-clicks. This is intentional:
- Header right-click: default browser context menu (no grid menu).
- Empty space right-click: default browser context menu.
- Cell right-click: grid context menu with actions scoped to the current selection.
Copy/Cut Disabled State
The Copy and Cut items are disabled when no cells are selected. Once the user clicks a cell or selects a range, these items become active.
Props Reference
| Type | Field | Description |
|---|---|---|
IOGridProps<T> | onUndo | Callback invoked when Undo is clicked |
IOGridProps<T> | onRedo | Callback invoked when Redo is clicked |
IOGridProps<T> | canUndo | boolean -- disables Undo item when false |
IOGridProps<T> | canRedo | boolean -- disables Redo item when false |
IOGridProps<T> | cellSelection | boolean -- context menu requires cell selection (default true) |
Related
- Keyboard Navigation -- same shortcuts work via keyboard
- CSV Export -- export is also available via the
exportToCsvutility - Grid API -- programmatic access to selection and data