-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Box
- Responsive Box
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
-
Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
- Overview
-
Action Sheet
-
Button
- Floating Action Button
- Drop Down Button
-
Context Menu
-
List
-
Lookup
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
React Html Editor - Tables
DevExtreme HTML Editor allows users to create and manage tables. This demo illustrates table resize support and table management with the toolbar, context menu, and in code.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React, { useCallback, useState } from 'react';
import HtmlEditor, {
TableContextMenu,
TableResizing,
Toolbar,
Item,
} from 'devextreme-react/html-editor';
import { CheckBox, CheckBoxTypes } from 'devextreme-react/check-box';
import { markup } from './data.ts';
export default function App() {
const [allowResizing, setAllowResizing] = useState(true);
const [contextMenuEnabled, setContextMenuEnabled] = useState(true);
const tableResizingChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
setAllowResizing(e.value);
}, [setAllowResizing]);
const tableContextMenuChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
setContextMenuEnabled(e.value);
}, [setContextMenuEnabled]);
return (
<div className="widget-container">
<HtmlEditor height="750px" defaultValue={markup}>
<TableContextMenu enabled={contextMenuEnabled} />
<TableResizing enabled={allowResizing} />
<Toolbar>
<Item name="bold" />
<Item name="color" />
<Item name="separator" />
<Item name="alignLeft" />
<Item name="alignCenter" />
<Item name="alignRight" />
<Item name="separator" />
<Item name="insertTable" />
<Item name="insertHeaderRow" />
<Item name="insertRowAbove" />
<Item name="insertRowBelow" />
<Item name="separator" />
<Item name="insertColumnLeft" />
<Item name="insertColumnRight" />
<Item name="separator" />
<Item name="deleteColumn" />
<Item name="deleteRow" />
<Item name="deleteTable" />
<Item name="separator" />
<Item name="cellProperties" />
<Item name="tableProperties" />
</Toolbar>
</HtmlEditor>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<CheckBox
text="Allow Table Resizing"
value={allowResizing}
onValueChanged={tableResizingChanged}
/>
</div>
<div className="option">
<CheckBox
text="Enable Table Context Menu"
value={contextMenuEnabled}
onValueChanged={tableContextMenuChanged}
/>
</div>
</div>
</div>
);
}
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
Manage Tables with the Built-in Toolbar
To manage tables via a built-in toolbar, add the following items to it:
-
"insertTable" / "deleteTable"
Manage a table. -
"insertRowAbove" / "insertRowBelow" / "deleteRow"
Manage rows. -
"insertColumnLeft" / "insertColumnRight" / "deleteColumn"
Manage columns. -
"tableProperties" / "cellProperties"
Open a pop-up window with table or cell customization options.
Manage Tables with the Context Menu
To manage table layouts with the context menu, set the tableContextMenu.enabled property to true. In this demo, you can click the Enable Table Context Menu check box under the HtmlEditor to enable or disable this property. When it is enabled, right-click a table cell to open the context menu.
The context menu cannot be used to create new tables. The menu is only available within table boundaries. If you want users to create tables, add an "insertTable" item to the toolbar.
If you need to customize menu commands, override the tableContextMenu.items array. Refer to its description for a code example.
Manage Tables Programmatically
You can perform table-related actions in code. Use the getModule method to access the Table module. This module contains methods with names that match toolbar item names listed above. Refer to the following topic for the complete method list and code examples: DevExtreme Quill modules: Table.
Resize Tables
If you want to resize table rows and columns, set the tableResizing.enabled property to true. In this demo, you can use the Allow Table Resizing check box to change the property value.
You can also set the tableResizing.minColumnWidth and tableResizing.minRowHeight properties to specify minimum column width and row height. If you do not set these properties, width and height are determined by cell content. This demo illustrates the latter behavior (when you reduce column width or row height to small values).