Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    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.

    NOTE

    This functionality is available as a community technology preview (CTP). Should you have any questions or suggestions prior to its official release, please email your comments to support@devexpress.com. You can also share your feedback on this feature's discussion page.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

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