Your search did not match any results.

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.

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.

Backend API
@section ExternalDependencies { <script src="https://unpkg.com/devextreme-quill/dist/dx-quill.min.js"></script> } @(Html.DevExtreme().HtmlEditor() .ID("html-editor") .Height(350) .Value(new JS("markup")) .Toolbar(toolbar => toolbar.Items( items => { items.Add() .Name("header") .AcceptedValues(new JS("[false, 1, 2, 3, 4, 5]")); items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add().Name(HtmlEditorToolbarItem.Bold); items.Add().Name(HtmlEditorToolbarItem.Color); items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add().Name(HtmlEditorToolbarItem.AlignLeft); items.Add().Name(HtmlEditorToolbarItem.AlignCenter); items.Add().Name(HtmlEditorToolbarItem.AlignRight); items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add().Name(HtmlEditorToolbarItem.InsertTable); items.Add().Name(HtmlEditorToolbarItem.DeleteTable); items.Add().Name(HtmlEditorToolbarItem.InsertRowAbove); items.Add().Name(HtmlEditorToolbarItem.InsertRowBelow); items.Add().Name(HtmlEditorToolbarItem.DeleteRow); items.Add().Name(HtmlEditorToolbarItem.InsertColumnLeft); items.Add().Name(HtmlEditorToolbarItem.InsertColumnRight); items.Add().Name(HtmlEditorToolbarItem.DeleteColumn); }) ) ) <script> var 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> `; </script>
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using System.Web.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; namespace DevExtreme.MVC.Demos.Controllers { public class HtmlEditorController : Controller { public ActionResult Tables() { return View(); } } }