All docs
V24.1
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

JavaScript/jQuery HtmlEditor - tableContextMenu

Configures table context menu settings.

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

jQuery
index.js
$(function() {
    $("#htmlEditorContainer").dxHtmlEditor({
        // ...
        tableContextMenu: {
            enabled: true
        }
    });
});
Angular
app.component.html
<dx-html-editor>
    <dxo-table-context-menu
        [enabled]="true">
    </dxo-table-context-menu>
</dx-html-editor>
Vue
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>
React
App.js
import 'devextreme/dist/css/dx.light.css';

import HtmlEditor, {
    TableContextMenu
} from 'devextreme-react/html-editor';

export default function App() {
    return (
        <HtmlEditor>
            <TableContextMenu
                enabled={true}
            />
        </HtmlEditor>
    );
}

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.

jQuery
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'
            ]
        }
    });
});
Angular
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>
Vue
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>
React
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>
    );
}