Tables in Blazor Rich Text Editor

• Apr 25, 2024
• 6 minutes to read

This topic contains examples of how to create, customize, and remove tables in the Rich Text Editor.

Create Tables

Call the CreateAsync method to add a table to a sub-document:

<DxRichEdit @ref="richEdit" />

@code {
    DxRichEdit richEdit;
    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if (firstRender)
            try {
                await InitializeDocument();
            }
            catch (TaskCanceledException) { }
        await base.OnAfterRenderAsync(firstRender);
    }

    async Task InitializeDocument() {
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
        try {
            var columnCount = 4;
            var rowCount = 5;
            Table firstTable = await richEdit.DocumentAPI.Tables.CreateAsync(0, columnCount, rowCount);
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
    }
}

Find Tables

Call the GetAsync method to obtain a table with the specified index:

var firstTable = await richEdit.DocumentAPI.Tables.GetAsync(0);

Populate Tables with Content

A cell stores its position in the sub document in the Interval property. Pass the position to one of the following methods to populate the table cell with content:

AddHtmlAsync

Inserts text in HTML format.

AddRtfAsync

Inserts text in Rich Text Format (RTF).

AddTextAsync

Inserts the specified text.

Fields.CreateAsync

Inserts a field with the specified code.

Hyperlinks.CreateAsync

Inserts a hyperlink with the specified text.

Images.CreateAsync

Inserts an image from a specified image source.

InlineImages.CreateAsync

Inserts an inline image from a specified image source.

Paragraphs.CreateAsync

Inserts a paragraph mark and creates a new paragraph.

Tables.CreateAsync

Inserts a table with the specified column and row count.

The following code snippet populates table cells with text:

var firstTable = await richEdit.DocumentAPI.Tables.GetAsync(0);
for (int i = firstTable.Rows.Count - 1; i >= 0 ; i--)
    for (int j = firstTable.Rows[i].Cells.Count - 1; j >= 0 ; j--) {
        var cellPosition = myTable.Rows[i].Cells[j].Interval.Start;
        await richEdit.DocumentAPI.AddTextAsync(cellPosition, "sample text");
}

Add and Remove Rows

Use the Rows property to access the table row collection. Call the InsertAsync method to insert a new row above or below the specified row. The RemoveAsync method allows you to remove a table row.

var firstTable = await richEdit.DocumentAPI.Tables.GetAsync(0);
await firstTable.Rows.RemoveAsync(0);                                // Removes the first row
await firstTable.Rows.InsertAsync(0, false);                         // Inserts a row above the first row
await firstTable.Rows.InsertAsync(firstTable.Rows.Count - 1, true);  // Inserts a row below the last row

Add and Remove Columns

A table consists of cells combined into rows. Call the InsertAsync/RemoveAsync method to add/remove a cell to/from the row. Perform this action for each table row to add or remove a table column. The following example removes an existing column and adds two new columns to the first table:

var firstTable = await richEdit.DocumentAPI.Tables.GetAsync(0);
foreach (TableRow row in firstTable.Rows) {
    await row.Cells.RemoveAsync(0);                         // Removes the first cell
    await row.Cells.InsertAsync(0);                         // Inserts a cell to the left of the first cell
    await row.Cells.InsertAsync(row.Cells.Count - 1, true); // Inserts a cell to the right of the last cell
}

Merge and Split Cells

Call the MergeCellsAsync method to merge multiple cells in a range. The following example merges 6 cells:

var firstTable = richEdit.DocumentAPI.Tables.CreateAsync(0, 5, 4);
var startPosition = new TableCellPosition(0, 0); // The first cell in the first row
var endPosition = new TableCellPosition(2, 1);   // The second cell in the third row
await firstTable.MergeCellsAsync(startPosition, endPosition);

Call the SplitAsync method to split a cell into multiple smaller cells. The following code snippet splits the first cell into 6 cells (3 columns and 2 rows):

var firstTable = richEdit.DocumentAPI.Tables.CreateAsync(0, 3, 4);
await firstTable.Rows[0].Cells[0].SplitAsync(3, 2);

Customize Appearance

Call the ChangePropertiesAsync method of a table, row, or cell to customize its appearance. Most appearance settings can be set both for the table and cell. Cell settings take priority over table settings.

Resize Tables

Specify the following properties to change the table size:

TableProperties.AutoFit

Specifies whether to automatically increase the table’s width to fit table content.

TableProperties.Width

Provides access to the table’s width settings.

TableCellProperties.Width

Provides access to the cell’s width settings.

TableRowProperties.Height

Provides access to the row’s height settings.

The following code snippet resizes a table as follows:

• Sets the table width to the page width
• Sets the first column’s width to half the table width
• Sets each row’s height to 1 centimeter

var firstTable = await richEdit.DocumentAPI.Tables.GetAsync(0);
await firstTable.ChangePropertiesAsync(properties => {
    properties.Width.Type = TableWidthType.Percent;
    properties.Width.Value = 100;
});
foreach (TableRow row in firstTable.Rows) {
    await row.ChangePropertiesAsync(properties => {
        properties.Height.Type = TableRowHeightType.Exact;
        properties.Height.Value = UnitConverter.CentimetersToTwips(1);
    });
    await row.Cells[0].ChangePropertiesAsync(properties => {
        properties.Width = new TableWidth(TableWidthType.Percent, 50);
    });
}

To adjust table width to table content, configure size settings as follows:

var firstTable = await richEdit.DocumentAPI.Tables.GetAsync(0);
await firstTable.ChangePropertiesAsync(properties => {
    properties.AutoFit = true;
});
foreach (TableRow row in firstTable.Rows) 
    foreach (TableCell cell in row.Cells)
        await cell.ChangePropertiesAsync(properties => {
            properties.Width.Type = TableWidthType.Auto;
        });

Apply Table Styles

Use the StyleName property to apply a style to the table. This property accepts TableStyleName properties or style strings (for example, Grid Table 1 Light Accent 6). Specify TableStyleOptions to apply/remove special formatting to/from the first, last, and odd columns and rows.

The following example applies the Grid Table 4 Accent 4 style to the table and highlights the first column and row:

var firstTable = await richEdit.DocumentAPI.Tables.GetAsync(0);
await firstTable.ChangePropertiesAsync(properties => {
    properties.StyleName = TableStyleName.GridTable4Accent4;
    properties.TableStyleOptions = TableStyleOptions.FirstColumn | TableStyleOptions.HeaderRow;
});

Change Text Formatting

Specify the CharacterProperties setting to change text formatting for cell characters. The following code example sets font name, size, and color for all characters in the first table:

var firstTable = await richEdit.DocumentAPI.Tables.GetAsync(0);
foreach (TableRow row in firstTable.Rows)
    foreach (TableCell cell in row.Cells) 
        await cell.ChangePropertiesAsync(properties => {
            properties.CharacterProperties.FontName = "Arial";
            properties.CharacterProperties.FontSize = 16;
            properties.CharacterProperties.ForegroundColor = System.Drawing.Color.Blue;
        });

Align Table Content

Specify ContentHorizontalAlignment and ContentVerticalAlignment setting of the table or cell to align table or cell content. The following example aligns table content horizontally and vertically:

var firstTable = await richEdit.DocumentAPI.Tables.GetAsync(0);
await firstTable.ChangePropertiesAsync(properties => {
    properties.ContentHorizontalAlignment = HorizontalAlignment.Left;
    properties.ContentVerticalAlignment = VerticalAlignment.Center;
});
foreach (TableCell cell in firstTable.Rows[0].Cells){
    await cell.ChangePropertiesAsync(properties => {
        properties.ContentHorizontalAlignment = HorizontalAlignment.Center;
    });
}

Customize Borders

You can customize all table borders simultaneously or access and customize a particular border. Border settings include line color, style, and width. The following example hides all table borders except for the first row’s bottom border:

var firstTable = await richEdit.DocumentAPI.Tables.GetAsync(0);
await firstTable.ChangePropertiesAsync(properties => {
    properties.Borders = new TableBorders(BorderLineStyle.None, System.Drawing.Color.Black, 20);
    properties.Width = new TableWidth(TableWidthType.Percent, 100);
});
foreach (TableCell cell in firstTable.Rows[0].Cells) {
    await cell.ChangePropertiesAsync(properties => {
        properties.Borders.Bottom = new TableBorder(BorderLineStyle.Single, System.Drawing.Color.Black, 20);
    });
}

Add Shading

Specify the BackgroundColor setting of the table or cell to change its background color. The following example applies different background colors to odd and even table rows:

var firstTable = await richEdit.DocumentAPI.Tables.GetAsync(0);
await firstTable.ChangePropertiesAsync(properties => {
    properties.BackgroundColor = System.Drawing.Color.LightBlue;
});
foreach (TableRow row in firstTable.Rows)
    foreach (TableCell cell in row.Cells)
        if (cell.ParentRow.Index % 2 == 0)
            await cell.ChangePropertiesAsync(properties => {
                properties.BackgroundColor = System.Drawing.Color.AliceBlue;
            });

Remove Tables

Pass a table’s interval to the RemoveAsync method to remove the table:

var firstTable = await richEdit.DocumentAPI.Tables.GetAsync(0);
await richEdit.DocumentAPI.RemoveAsync(firstTable.Interval);