Table Class

A table in a document.

Namespace: DevExpress.Blazor.RichEdit

Assembly: DevExpress.Blazor.RichEdit.v23.2.dll

NuGet Package: DevExpress.Blazor.RichEdit

Declaration

public class Table :
    DocumentElementBase

Remarks

Use a Table object to get access to the table’s rows and cells.

Create a Table

Call the CreateAsync(Int32, Int32, Int32, CancellationToken) method to add a table to a sub-document.

var ColumnCount = 4;
var RowCount = 5;
await richEdit.DocumentAPI.Tables.CreateAsync(0, ColumnCount, RowCount);

A table’s Rows property returns a list of table rows. Every row is an object of the TableRow type. A row implements the Cells property that returns a list of row cells. Every cell in the list is an object of the TableCell type.

Find a Table

The GetAsync(Int32, CancellationToken) method returns a document table by its index.

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

Remove a Table

Call the RemoveAsync(Interval, CancellationToken) method and specify a table interval as a parameter to remove the table.

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

Example

The code sample below creates a table and populates it with data.

<DxRichEdit @ref="@richEdit" />
@code {
    DxRichEdit richEdit { get; set; }
    @* ... *@
        /* 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 cancelled. */
        try {
        @* ... *@
            var columnCount = 4;
            var rowCount = 5;
            richEdit.DocumentAPI.BeginUpdate();
            await richEdit.DocumentAPI.Tables.CreateAsync(0, columnCount, rowCount);
            for (int i = 0; i < rowCount; i++)
                for (int j = 0; j < columnCount; j++) {
                    var myTable = await richEdit.DocumentAPI.Tables.GetAsync(0);
                    var cellPosition = myTable.Rows[i].Cells[j].Interval.Start;
                    await richEdit.DocumentAPI.AddTextAsync(cellPosition, "Row=" + (i + 1) + ",Column=" + (j + 1));
                }
            richEdit.DocumentAPI.EndUpdate();
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Dialogs

The Rich Text Editor includes the following dialogs that allow users to create, edit, and delete tables.

The Insert Table Dialog

The Rich Text Editor invokes this dialog when a user selects the Insert → Table ribbon command. The Insert Table dialog allows users to create a table with a specified number of rows and columns.

The Insert Cells Dialog

The Rich Text Editor invokes this dialog when a user selects the Insert → Insert Cells… context menu command. The Insert Cells dialog allows users to insert a cell, column, or row to a table.

The Split Cells Dialog

The Rich Text Editor invokes this dialog when a user selects the Layout → Split Cells ribbon command or Split Cells… context menu command. The Split Cells dialog allows users to split selected cells into multiple new cells.

The Delete Cells Dialog

The Rich Text Editor invokes this dialog when a user selects the Layout → Delete → Delete Cells… ribbon command or Delete Cells… context menu command. The Delete Cells dialog allows users to delete a table cell, column, or row.

Inheritance

Object

DocumentElementBase

Table