Your search did not match any results.
Html Editor

Tables

DevExtreme HtmlEditor allows users to create and manage tables. To enable this functionality, add the following items to the toolbar:

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.

Copy to CodeSandBox
Apply
Reset
<template> <div> <DxHtmlEditor height="350px"> <DxToolbar> <DxItem :format-values="headerValues" format-name="header" /> <DxItem format-name="separator"/> <DxItem format-name="bold"/> <DxItem format-name="color"/> <DxItem format-name="separator"/> <DxItem format-name="alignLeft"/> <DxItem format-name="alignCenter"/> <DxItem format-name="alignRight"/> <DxItem format-name="separator"/> <DxItem format-name="insertTable"/> <DxItem format-name="deleteTable"/> <DxItem format-name="insertRowAbove"/> <DxItem format-name="insertRowBelow"/> <DxItem format-name="deleteRow"/> <DxItem format-name="insertColumnLeft"/> <DxItem format-name="insertColumnRight"/> <DxItem format-name="deleteColumn"/> </DxToolbar> <div v-html="markup"/> </DxHtmlEditor> </div> </template> <script> import { DxHtmlEditor, DxToolbar, DxItem } from 'devextreme-vue/html-editor'; import { markup } from './data.js'; export default { components: { DxHtmlEditor, DxToolbar, DxItem }, data() { return { markup, headerValues: [false, 1, 2, 3], }; } }; </script>
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#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.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.3/css/dx.light.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> </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: { '*.vue': { loader: 'vue-loader' }, }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.3', 'devextreme-vue': 'npm:devextreme-vue@20.2.3', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.5/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.0/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.0/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.5/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.5/hooks/dist/hooks.js', '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-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });