Context menu
Customise Context Menu
You can use ContextMenu
prop to inject a custom menu
import React from "react";
import {
CanvasGrid,
SpreadsheetProvider,
ContextMenuProps
} from "@rowsncolumns/spreadsheet";
import { DropdownMenuContent, DropdownMenuItem } from "@rowsncolumns/ui"
// Only radix context menu is supported
const ContextMenu = (props: ContextMenuProps) => {
return (
<DropdownMenuContent
align="start"
sideOffset={0}
onFocusOutside={(event) => {
event.preventDefault();
}}
onCloseAutoFocus={(event) => {
event.preventDefault();
}}
>
<DropdownMenuItem>Hello world</DropdownMenuItem>
</DropdownMenuContent>
}
const MySpreadsheet = () => {
return (
<CanvasGrid
sheetId={1}
rowCount={100}
columnCount={100}
ContextMenu={ContextMenu}
/>
);
};
const App = () => (
<SpreadsheetProvider>
<App />
</SpreadsheetProvider>
);
Last updated