React HtmlEditor - tableContextMenu.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>
  • );
  • }

beginGroup

Specifies whether a group separator is displayed over the item.

Type:

Boolean

You can add group separators only between items in submenus.

closeMenuOnClick

Specifies if a menu is closed when a user clicks the item. Does not apply to the root items.

Type:

Boolean

Default Value: true

component

An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

disabled

Specifies whether the menu item responds to user interaction.

Type:

Boolean

Default Value: false

icon

Specifies the menu item's icon.

Type:

String

This property accepts one of the following:

items

Configures nested context menu items.

Use this property to create a hierarchical context menu. The following code demonstrates an example:

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
  • text="Font Style">
  • <TableContextMenuItem name="bold" />
  • <TableContextMenuItem name="italic" />
  • <TableContextMenuItem name="underline" />
  • <TableContextMenuItem name="strike" />
  • </TableContextMenuItem>
  • </TableContextMenu>
  • </HtmlEditor>
  • );
  • }

name

A name used to identify the context menu item.

Default Value: undefined

render

An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

selectable

Specifies whether or not a user can select a menu item.

Type:

Boolean

Default Value: false

selected

Specifies whether or not the item is selected.

Type:

Boolean

Default Value: false

template

Specifies a template that should be used to render this item only.

Type:

template

Template Data:

CollectionWidgetItem

The item object to be rendered.

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a jQuery object of the template's container.
  • Assign a DOM Node of the template's container.
  • Assign a function that returns the jQuery object or a DOM Node of the template's container.

The following example adds a custom item to the component. Note that Angular and Vue use custom templates instead of the template property. In React, specify the render or component properties.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import HtmlEditor, {
  • ContextMenu, Item
  • } from 'devextreme-react/html-editor';
  •  
  • const renderCustomItem = () => {
  • return <div>Custom Item</div>;
  • }
  •  
  • function App() {
  • return (
  • <HtmlEditor ... >
  • <TableContextMenu>
  • <Item ...
  • render={renderCustomItem}
  • >
  • </Item>
  • </TableContextMenu>
  • </HtmlEditor>
  • );
  • }
  • export default App;
See Also

text

Specifies the text inserted into the item element.

Type:

String

If you use both this property and a template, the template overrides the text.

visible

Specifies whether or not the menu item is visible.

Type:

Boolean

Default Value: true