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 HTML Editor: 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

index.js
  • $(function() {
  • $("#htmlEditorContainer").dxHtmlEditor({
  • // ...
  • tableContextMenu: {
  • enabled: true
  • }
  • });
  • });

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.

index.js
  • $(function() {
  • $("#htmlEditorContainer").dxHtmlEditor({
  • // ...
  • tableContextMenu: {
  • enabled: true,
  • items: [
  • 'insertHeaderRow',
  • 'insertRowAbove',
  • 'insertRowBelow',
  • { name: 'insertColumnLeft', beginGroup: true },
  • 'insertColumnRight',
  • { name: 'deleteColumn', beginGroup: true },
  • 'deleteRow',
  • 'deleteTable',
  • { name: 'cellProperties', beginGroup: true },
  • 'tableProperties'
  • ]
  • }
  • });
  • });