Table format in ASP.NET MVC DOCX Editor

14 Aug 20266 minutes to read

Document Editor allows you to customize the formatting of tables or table cells, such as table width, cell margins, cell spacing, background color, and table alignment. This section describes how to customize these formats for selected cells, rows, or a table in detail.

Cell margins

You can customize the cell margins by using the following sample code.

// To change the left margin
documenteditor.selection.cellFormat.leftMargin=5.4;
//To change the right margin
documenteditor.selection.cellFormat.rightMargin=5.4;
//To change the top margin
documenteditor.selection.cellFormat.topMargin=5.4;
//To change the bottom margin
documenteditor.selection.cellFormat.bottomMargin=5.4;

You can also define the default cell margins for a table. If the specific cell margin value is not defined explicitly in the cell formatting, the corresponding value will be retrieved from the default cell margins of the table.

//To change the left margin
documenteditor.selection.tableFormat.leftMargin=5.4;
//To change the right margin
documenteditor.selection.tableFormat.rightMargin=5.4;
//To change the top margin
documenteditor.selection.tableFormat.topMargin=5.4;
//To change the bottom margin
documenteditor.selection.tableFormat.bottomMargin=5.4;

Background color

You can explicitly set the background color of selected cells using the following sample code.

documenteditor.selection.cellFormat.background='#E0E0E0';

Refer to the following sample code to customize the background color of the table.

documenteditor.selection.tableFormat.background='#E0E0E0';

Cell spacing

Refer to the following sample code to customize the spacing between each cell in a table.

documenteditor.selection.tableFormat.cellSpacing = 2;

Cell vertical alignment

The content within a table cell can be aligned to Top, Center, or Bottom. You can customize this property for selected cells.

documenteditor.selection.cellFormat.verticalAlignment= 'Bottom';

Table alignment

Tables are aligned in the Document Editor to Left, Right, or Center.

documenteditor.selection.tableFormat.tableAlignment='Center';

Cell width

Set the desired width of table cells that will be considered when the table is laid out.

@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).Render()

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById("container").ej2_instances[0];
        documenteditor.editor.insertTable(2, 2);
        //To change the width of a cell
        documenteditor.selection.cellFormat.preferredWidthType = 'Point';
        documenteditor.selection.cellFormat.preferredWidth = 100;
    });
</script>

Table width

You can set the desired width of a table in Point or Percent type.

@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).Render()

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById("container").ej2_instances[0];
        documenteditor.editor.insertTable(2, 2);
        //To change the width of a cell
        documenteditor.selection.tableFormat.preferredWidthType = 'Point';
        documenteditor.selection.tableFormat.preferredWidth = 100;
    });
</script>

Apply borders

Document Editor exposes an API to customize the borders for table cells by specifying the settings.

@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).Render()

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById("container").ej2_instances[0];
        documenteditor.editor.insertTable(2, 2);
        //To apply border
        var borderSettings = {
            type: 'AllBorders',
            lineWidth: 12
        };
        documenteditor.editor.applyBorders(borderSettings);
    });
</script>

Working with row formatting

Document Editor allows various row formatting options, such as height and repeating headers.

Row height

You can customize the height of a table row to be Auto, AtLeast, or Exactly.

@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).Render()

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById("container").ej2_instances[0];
        documenteditor.editor.insertTable(2, 2);
        //To change row height of first row
        documenteditor.selection.rowFormat.heightType = 'Exactly';
        documenteditor.selection.rowFormat.height = 20;
    });
</script>

Header row

The header row describes the content of a table. A table can optionally have a header row. Only the first row of a table can be the header row. If the cursor position is in the first row of the table, then you can define whether it is a header row or not, using the following sample code.

documenteditor.selection.rowFormat.isHeader=true;

Allow row break across pages

This property is valid if a table row does not fit on the current page during table layout. It defines whether a table row can break. If the value is false, the entire row will be moved to the start of the next page. You can modify this property for selected rows using the following sample code.

documenteditor.selection.rowFormat.allowRowBreakAcrossPages=false;

Title

Document Editor exposes an API to get or set the title of the selected table. Refer to the following sample code to set the title.

documenteditor.selection.tableFormat.title = 'Shipping Details';

Description

Document Editor exposes an API to get or set the description of the selected table. Refer to the following sample code to set the description.

documenteditor.selection.tableFormat.description = 'Freight cost and shipping details';

Online demo

Explore how to format tables in Word documents using the ASP.NET MVC Document Editor in this live demo.

See also