Tables in Blazor DOCX Editor
14 Aug 20264 minutes to read
Tables are an efficient way to present information. The Document Editor can display and edit tables. You can select and edit tables through a keyboard, mouse, or touch interactions. Blazor DOCX Editor (Document Editor) exposes a rich set of APIs to perform these operations programmatically.
Create a table
You can create and insert a table at the cursor position by specifying the required number of rows and columns.
Refer to the following sample code.
await documentEditor.Editor.InsertTableAsync(3, 3);The maximum size of row and column is limited to 32767 and 63 respectively.
Insert rows
You can add a row (or several rows) above or below the row at the cursor position by using the InsertRowAsync method. This method accepts the following parameters:
| Parameter | Type | Description |
|---|---|---|
| above (optional) | bool | This is optional and if omitted, it takes the value as false and inserts below the row at the cursor position. |
| count (optional) | double? | This is optional and if omitted, it takes the value as 1. |
Refer to the following sample code.
//Inserts a row below the row at the cursor position
await documentEditor.Editor.InsertRowAsync();
//Inserts a row above the row at the cursor position
await documentEditor.Editor.InsertRowAsync(false);
//Inserts three rows below the row at the cursor position
await documentEditor.Editor.InsertRowAsync(true, 3);Insert columns
You can add a column (or several columns) to the left or right of the column at the cursor position by using the InsertColumnAsync method. This method accepts the following parameters:
| Parameter | Type | Description |
|---|---|---|
| left (optional) | bool | This is optional and if omitted, it takes the value as false and inserts to the right of the column at the cursor position. |
| count (optional) | double? | This is optional and if omitted, it takes the value as 1. |
Refer to the following sample code.
//Inserts a column to the right of the column at the cursor position.
await documentEditor.Editor.InsertColumnAsync();
//Inserts a column to the left of the column at the cursor position.
await documentEditor.Editor.InsertColumnAsync(false);
//Inserts two columns to the left of the column at the cursor position.
await documentEditor.Editor.InsertColumnAsync(true, 2);Select an entire table
If the cursor position is inside a table, you can select the entire table by using the following sample code.
await documentEditor.Selection.SelectTableAsync();Select row
You can select the entire row at the cursor position by using the following sample code.
await documentEditor.Selection.SelectRowAsync();If the current selection spans across cells of different rows, all these rows will be selected.
Select column
You can select the entire column at the cursor position by using the following sample code.
await documentEditor.Selection.SelectColumnAsync();If the current selection spans across cells of different columns, all these columns will be selected.
Select cell
You can select the cell at the cursor position by using the following sample code.
await documentEditor.Selection.SelectCellAsync();Delete table
The Document Editor allows you to delete the entire table. You can use the DeleteTableAsync() method of the editor instance, if the selection is in a table. Refer to the following sample code.
await documentEditor.Editor.DeleteTableAsync();Delete row
The Document Editor allows you to delete the selected number of rows. You can use the DeleteRowAsync() method of the editor instance to delete the selected number of rows, if the selection is in a table. Refer to the following sample code.
await documentEditor.Editor.DeleteRowAsync();Delete column
The Document Editor allows you to delete the selected number of columns. You can use the DeleteColumnAsync() method of the editor instance to delete the selected number of columns, if the selection is in a table. Refer to the following sample code.
await documentEditor.Editor.DeleteColumnAsync();Merge cells
You can merge cells vertically, horizontally, or a combination of both into a single cell. To vertically merge the cells, the columns within the selection should be even in the left and right directions. To horizontally merge the cells, the rows within the selection should be even in the top and bottom directions.
Refer to the following sample code.
await documentEditor.Editor.MergeCellsAsync();You can also explore our Blazor Document Editor example to know how to render and configure the Document Editor.