Tables
DevExtreme HtmlEditor allows users to create and manage tables. To enable this functionality, add the following items to the toolbar:
- insertTable / deleteTable
- insertRowAbove / insertRowBelow / deleteRow
- insertColumnLeft / insertColumnRight / deleteColumn
You can initiate the same actions from code. Use the getModules method to access the Table module. This module contains methods whose names match the toolbar item names listed above. Refer to the following topic for the complete list and examples: DevExtreme Quill modules: Table.
NOTE
Further enhancements of this functionality are in development as per the offical Roadmap. Should you have any questions or suggestions, please email your comments to support@devexpress.com. You can also share your feedback on this feature's discussion page.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
import React from 'react';
import { markup } from './data.js';
import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor';
const headerValues = [false, 1, 2, 3];
class App extends React.Component {
render() {
return (
<div className="widget-container">
<HtmlEditor
height="350px"
defaultValue={markup}
>
<Toolbar>
<Item
formatName="header"
formatValues={headerValues}
/>
<Item formatName="separator" />
<Item formatName="bold" />
<Item formatName="color" />
<Item formatName="separator" />
<Item formatName="alignLeft" />
<Item formatName="alignCenter" />
<Item formatName="alignRight" />
<Item formatName="separator" />
<Item formatName="insertTable" />
<Item formatName="deleteTable" />
<Item formatName="insertRowAbove" />
<Item formatName="insertRowBelow" />
<Item formatName="deleteRow" />
<Item formatName="insertColumnLeft" />
<Item formatName="insertColumnRight" />
<Item formatName="deleteColumn" />
</Toolbar>
</HtmlEditor>
</div>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App />,
document.getElementById('app')
);
<!DOCTYPE html>
<html>
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.7/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.7/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import('./index.js');
</script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
export const markup = `
<h2>
Hardware Upgrade
</h2>
<br>
<table>
<tr style="font-weight: bold;">
<td style="text-align: left;">Task Subject</td>
<td style="text-align: center;">Status</td>
<td style="text-align: right;">Progress</td>
</tr>
<tr style="text-align: center;">
<td style="text-align: left;">Upgrade Server Hardware</td>
<td style="text-align: center;">In Progress</td>
<td style="text-align: right;">45%</td>
</tr>
<tr style="text-align: center;">
<td style="text-align: left;">Upgrade Personal Computers</td>
<td style="text-align: center; color: red;">Need Assistance</td>
<td style="text-align: right;">80%</td>
</tr>
<tr style="text-align: center;">
<td style="text-align: left;">Approve Personal Computer Upgrade Plan</td>
<td style="text-align: center; color: lime;">Completed</td>
<td style="text-align: right;">100%</td>
</tr>
</table>
`;
System.config({
transpiler: 'plugin-babel',
meta: {
'devextreme/localization.js': {
"esModule": true
},
},
paths: {
'npm:': 'https://unpkg.com/'
},
defaultExtension: 'js',
map: {
'react': 'npm:react@16.14.0/umd/react.development.js',
'react-dom': 'npm:react-dom@16.14.0/umd/react-dom.development.js',
'prop-types': 'npm:prop-types@15.7.2/prop-types.js',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.26.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@20.2.7',
'devextreme-react': 'npm:devextreme-react@20.2.7',
'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.10.3/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.23/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.29/dist/dx-gantt.js',
'preact': 'npm:preact@10.5.13/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.13/hooks/dist/hooks.js',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js'
},
packages: {
'devextreme': {
defaultExtension: 'js'
},
'devextreme-react': {
main: 'index.js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true,
react: true
}
});