Angular HtmlEditor - tableContextMenu

Configures table context menu settings.

Selector: dxo-table-context-menu
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

app.component.html
  • <dx-html-editor>
  • <dxo-table-context-menu
  • [enabled]="true">
  • </dxo-table-context-menu>
  • </dx-html-editor>

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.component.html
  • <dx-html-editor>
  • <dxo-table-context-menu
  • [enabled]="true">
  • <dxi-item name="insertHeaderRow"></dxi-item>
  • <dxi-item name="insertRowAbove"></dxi-item>
  • <dxi-item name="insertRowBelow"></dxi-item>
  • <dxi-item name="insertColumnLeft" [beginGroup]="true"></dxi-item>
  • <dxi-item name="insertColumnRight"></dxi-item>
  • <dxi-item name="deleteColumn" [beginGroup]="true"></dxi-item>
  • <dxi-item name="deleteRow"></dxi-item>
  • <dxi-item name="deleteTable"></dxi-item>
  • <dxi-item name="cellProperties" [beginGroup]="true"></dxi-item>
  • <dxi-item name="tableProperties"></dxi-item>
  • </dxo-table-context-menu>
  • </dx-html-editor>