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>
);