React HtmlEditor - tableContextMenu

Configures table context menu settings.

Selector: TableContextMenu
Default Value: null

Table cells include a context menu with common table operation commands. To activate it, set the enabled property to true.

DevExtreme HTML5 JavaScript HtmlEditor: Table Context Menu

You can also use the items array to rearrange or hide menu commands.

enabled

Specifies whether to enable the table context menu.

Type:

Boolean

Default Value: false

App.js
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import HtmlEditor, {
  • TableContextMenu
  • } from 'devextreme-react/html-editor';
  •  
  • export default function App() {
  • return (
  • <HtmlEditor>
  • <TableContextMenu
  • enabled={true}
  • />
  • </HtmlEditor>
  • );
  • }

items[]

Configures context menu items.

Use this property to customize the context menu. For example, the following code creates a flat menu of table commands instead of the default hierarchical menu. The beginGroup property is used to divide command groups.

App.js
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import HtmlEditor, {
  • TableContextMenu,
  • TableContextMenuItem
  • } from 'devextreme-react/html-editor';
  •  
  • export default function App() {
  • return (
  • <HtmlEditor>
  • <TableContextMenu
  • enabled={true}
  • <TableContextMenuItem name="insertHeaderRow" />
  • <TableContextMenuItem name="insertRowAbove" />
  • <TableContextMenuItem name="insertRowBelow" />
  • <TableContextMenuItem name="insertColumnLeft" beginGroup={true} />
  • <TableContextMenuItem name="insertColumnRight" />
  • <TableContextMenuItem name="deleteColumn" beginGroup={true} />
  • <TableContextMenuItem name="deleteRow" />
  • <TableContextMenuItem name="deleteTable" />
  • <TableContextMenuItem name="cellProperties" beginGroup={true} />
  • <TableContextMenuItem name="tableProperties" />
  • </TableContextMenu>
  • </HtmlEditor>
  • );
  • }