Vue HtmlEditor - tableContextMenu

Configures table context menu settings.

Selector: DxTableContextMenu
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.vue
  • <template>
  • <DxHtmlEditor>
  • <DxTableContextMenu
  • :enabled="true"
  • />
  • </DxHtmlEditor>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxHtmlEditor, {
  • DxTableContextMenu
  • } from 'devextreme-vue/html-editor';
  •  
  • export default {
  • components: {
  • DxHtmlEditor,
  • DxTableContextMenu
  • },
  • // ...
  • }
  • </script>

items[]

Configures context menu items.

Selector: DxItem
Accepted Values: 'background' | 'bold' | 'color' | 'font' | 'italic' | 'link' | 'image' | 'strike' | 'subscript' | 'superscript' | 'underline' | 'blockquote' | 'increaseIndent' | 'decreaseIndent' | 'orderedList' | 'bulletList' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'codeBlock' | 'variable' | 'undo' | 'redo' | 'clear' | 'insertTable' | 'insertHeaderRow' | 'insertRowAbove' | 'insertRowBelow' | 'insertColumnLeft' | 'insertColumnRight' | 'deleteColumn' | 'deleteRow' | 'deleteTable' | 'cellProperties' | 'tableProperties'

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.vue
  • <template>
  • <DxHtmlEditor>
  • <DxTableContextMenu
  • :enabled="true">
  • <DxTableContextMenuItem name="insertHeaderRow" />
  • <DxTableContextMenuItem name="insertRowAbove" />
  • <DxTableContextMenuItem name="insertRowBelow" />
  • <DxTableContextMenuItem name="insertColumnLeft" :begin-group="true" />
  • <DxTableContextMenuItem name="insertColumnRight" />
  • <DxTableContextMenuItem name="deleteColumn" :begin-group="true" />
  • <DxTableContextMenuItem name="deleteRow" />
  • <DxTableContextMenuItem name="deleteTable" />
  • <DxTableContextMenuItem name="cellProperties" :begin-group="true" />
  • <DxTableContextMenuItem name="tableProperties" />
  • </DxTableContextMenu>
  • </DxHtmlEditor>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxHtmlEditor, {
  • DxTableContextMenu,
  • DxTableContextMenuItem
  • } from 'devextreme-vue/html-editor';
  •  
  • export default {
  • components: {
  • DxHtmlEditor,
  • DxTableContextMenu,
  • DxTableContextMenuItem
  • },
  • // ...
  • }
  • </script>