Vue HtmlEditor - tableContextMenu

Configures table context menu settings.

Selector: DxTableContextMenu

Type:

Default Value: null

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

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

Type:

Array<dxHtmlEditorTableContextMenuItem | HtmlEditorPredefinedContextMenuItem>

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>

Was this topic helpful?

Thank you!

Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!