React HtmlEditor - tableContextMenu.items

Configures context menu items.

Selector: Item
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.

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>
    );
}

beginGroup

Specifies whether a group separator is displayed over the item.

Type:

Boolean

You can add group separators only between items in submenus.

closeMenuOnClick

Specifies if a menu is closed when a user clicks the item. Does not apply to the root items.

Type:

Boolean

Default Value: true

component

An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

disabled

Specifies whether the menu item responds to user interaction.

Type:

Boolean

Default Value: false

icon

Specifies the menu item's icon.

Type:

String

This property accepts one of the following:

items

Configures nested context menu items.

Selector: Item
Type:

Array<dxHtmlEditorTableContextMenuItem | HtmlEditorPredefinedContextMenuItem>

Use this property to create a hierarchical context menu. The following code demonstrates an example:

jQuery
index.js
$(function() {
    $("#htmlEditorContainer").dxHtmlEditor({
        // ...
        tableContextMenu: {
            enabled: true,
            items: [{
                text: 'Font Style',
                items: [
                    'bold',
                    'italic',
                    'underline',
                    'strike'
                ]
            }]
        }
    });
});
Angular
app.component.html
<dx-html-editor>
    <dxo-table-context-menu
        [enabled]="true">
        <dxi-item text="Font Style">
            <dxi-item name="bold"></dxi-item>
            <dxi-item name="italic"></dxi-item>
            <dxi-item name="underline"></dxi-item>
            <dxi-item name="strike"></dxi-item>
        </dxi-item>
    </dxo-table-context-menu>
</dx-html-editor>
Vue
App.vue
<template>
    <DxHtmlEditor>
        <DxTableContextMenu
            :enabled="true">
            <DxTableContextMenuItem
                text="Font Style">
                <DxTableContextMenuItem name="bold" />
                <DxTableContextMenuItem name="italic" />
                <DxTableContextMenuItem name="underline" />
                <DxTableContextMenuItem name="strike" />
            </DxTableContextMenuItem>
        </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
                    text="Font Style">
                    <TableContextMenuItem name="bold" />
                    <TableContextMenuItem name="italic" />
                    <TableContextMenuItem name="underline" />
                    <TableContextMenuItem name="strike" />
                </TableContextMenuItem>
            </TableContextMenu>
        </HtmlEditor>
    );
}

name

A name used to identify the context menu item.

Type:

HtmlEditorPredefinedContextMenuItem

Default Value: undefined

render

An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

selectable

Specifies whether or not a user can select a menu item.

Type:

Boolean

Default Value: false

selected

Specifies whether or not the item is selected.

Type:

Boolean

Default Value: false

template

Specifies a template that should be used to render this item only.

Type:

template

Template Data:

CollectionWidgetItem

The item object to be rendered.

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a jQuery object of the template's container.
  • Assign a DOM Node of the template's container.
  • Assign a function that returns the jQuery object or a DOM Node of the template's container.

The following example adds a custom item to the component. Note that Angular and Vue use custom templates instead of the template property. In React, specify the render or component properties.

jQuery
index.js
$(function() {
    $("#htmlEditorContainer").dxHtmlEditor({
        // ...
        tableContextMenu: {
            items: [
                {
                    // ...
                    template: '<div>Custom Item</div>'
                }
            ]  
        }           
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-html-editor ... >
    <dxo-table-context-menu>
        <dxi-item ...>
            <div *dxTemplate>
                <div>Custom Item</div>
            </div>
        </dxi-item>
    </dxo-table-context-menu>
</dx-html-editor>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxHtmlEditorModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxHtmlEditorModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxHtmlEditor>
        <DxTableContextMenu>
            <DxItem ...>
                <div>Custom Item</div>
            </DxItem>
        </DxTableContextMenu>
    </DxHtmlEditor>
</template>

<script>

import DxHtmlEditor, {
    DxContextMenu, DxItem
} from 'devextreme-vue/html-editor';

export default {
    components: {
        DxHtmlEditor,
        DxContextMenu,
        DxItem
    },
    // ...
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

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

const renderCustomItem = () => {
    return <div>Custom Item</div>;
}

function App() {
    return (
        <HtmlEditor ... >
            <TableContextMenu>
                <Item ... 
                    render={renderCustomItem}
                >
                </Item>
            </TableContextMenu>
        </HtmlEditor>
    );
}
export default App;
See Also

text

Specifies the text inserted into the item element.

Type:

String

If you use both this property and a template, the template overrides the text.

visible

Specifies whether or not the menu item is visible.

Type:

Boolean

Default Value: true