[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Collapse]Rich Text Editor
   [Expand]Product Information
    Product Class Structure
    Supported Formats
   [Expand]Getting Started
   [Collapse]RichEditControl Document
    [Expand]Document Structure
    [Collapse]Document Elements
      Positions and Ranges
      Paragraphs
      Sections
      Lists
      Inline Pictures
      Shapes
      Text Boxes
      Hyperlinks and Bookmarks
      Headers and Footers
      Tables
      Range Permissions
      Comments
      Checkboxes
      Document Properties
     Measure Units
   [Expand]Fields
    Text Formatting
    Import and Export
   [Expand]Page Layout
    Printing
    Hyphenation
    Spell Checking
    AutoCorrect Feature
    Track Changes
    Mail Merge
    Restrictions and Protection
   [Expand]Visual Elements
    Services
    Events
    Commands
    Keyboard Shortcuts
    HTML Tag Support
   [Expand]Examples
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Tables

This topic describes how RichEditControl manages document tables both in code and in the User Interface

Expanded Table API

Using the Table API, you can create a complex table as shown on the image from scratch. To do that, perform the following actions.

  1. Create and Modify the Table

    Create the new empty table with a given number of cells and, if necessary, extend it by adding new rows and columns.

  2. Resize and Reorder the Table

    Change the table row/column width and height to a fixed value or make it automatically fit the content.

  3. Merge and Split Table Cells

    The table cells can be split into a number of new ones or merged into a single cell.

  4. Fill the Table with Data

    Insert any desired content to the table cells from text strings to floating objects and tables.

  5. Customize the Table Appearance

    Change the background or border color of particular cells or create a table style to quickly format the entire table.

  6. Delete Necessary Table Elements

    If necessary, remove a row, cell or a column, or delete the table completely.

Expanded 1. Create the Table

Create the table as on the image below using members from the table.

Member Description
TableCollection.Create Creates a new table at the specified position within the document.
TableRowCollection.Append Adds a new row to the end of the table.
TableRowCollection.InsertBefore Inserts a new row before the specified one.
TableRowCollection.InsertAfter Inserts a new row before the given one.
TableCellCollection.Append Adds a new column at the table's end.
TableCellCollection.InsertBefore Inserts a new column before a given one.
TableCellCollection.InsertAfter Inserts a new column after the specified one.

The following code creates a new 2x2 table and expands it by adding a new column and two rows.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/tables-simple-example-t472346

Expanded 2. Resize and Reorder the Table

To resize or reorder table rows and columns, use the following API.

Member Description
TableRow.Height Specifies the height of a given row.
TableRow.HeightType Specifies how the row height should be determined.
TableCell.Height Specifies the height of a given cell.
TableCell.HeightType Specifies how the cell height should be determined.
Table.SetPreferredWidth Sets the preferred width for the table.
TableCell.PreferredWidth Sets the preferred width value for the table column.
TableCell.PreferredWidthType Determines the preferred width value.
Table.RightToLeft Specifies whether to change the table layout's direction to right-to-left.
Note

We do not recommend setting different size to several cells within one column. It changes the layout of the whole column.

The code snippet below resizes the table columns so it appears as on the following image.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/tables-simple-example-t472346

Expanded 3. Merge and Split Table Cells

The following API allows you to split and merge the specific table cells.

Member Description
Table.MergeCells Merges a specified cell range. The merged cells content will persist.
TableCell.Split Splits the specified table cell into the desired number of new cells.

The code snippet demonstrates how to modify the cells, so the table will appear as on the image below.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/tables-simple-example-t472346

Expanded 4. Fill the Table with Data

To fill table cells with data, use one of the methods listed below. To retrieve the range the target cell occupies, use the TableCell.Range property.

Member Description
SubDocument.InsertSingleLineText Inserts a text string to the specified position.
SubDocument.InsertText Inserts text to the given position within the document.
TableCollection.Create Inserts a table to the specified position within the document.
ShapeCollection.InsertPicture Inserts a floating picture to a given document position.
DocumentImageCollection.Insert Inserts an inline image to the specified position.
ShapeCollection.InsertTextBox Inserts a text box to the given position.

The following code example inserts the text and an image to the table cells as shown on the image above.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/tables-simple-example-t472346

Format the Cell Content

The table content can me formatted as a regular text. For further information, refer to the Text Formatting topic.

In this example, the table data is formatted as shown on the image below.

Expanded 5. Change the Table Appearance

Change the Appearance of Certain Table Elements

To customize the table appearance as on the image above, change the specific cell's background and border color. The properties listed below let you solve this task.

Member Description
TableCell.BackgroundColor Sets the background color of the given cell.
TableCellBorder.LineColor Sets the color of the given cell border.
Table.TableBackgroundColor Sets the color of the empty space between cells.
Table.ForEachCell Helps you to perform the specific actions for each table cell.
TableCellProcessorDelegate The delegate to a method that performs necessary actions.
Document.DefaultTableProperties Provides access to the default table properties.

The code snippet below changes the third row's background color and disables the border visibility of the first two rows.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/tables-simple-example-t472346

Create and Apply a Table Style

Customize all the table elements at once using the table style. Since the RichEditControl doesn't have any predefined table styles, create a custom one using the following members.

Member

Description

TableStyleCollection.CreateNew

Creates new TableStyle instance.

Document.TableStyles

Provides access to the TableStyleCollection collection.

TableCellStyleCollection.Add

Adds a new item to the document tables collection.

Note that without adding a table style to the collection, you won't be able to apply it.

Table.Style

Specifies the style of the current table.

TableStyle.ConditionalStyleProperties

Provides access to the conditional styles of the current document.

TableConditionalStyleProperties.CreateConditionalStyle

Creates a new TableConditionalStyle instance.

TableStyleCollection.DefaultStyle

Specifies the default table style.

The following code creates a new table style, sets the desired style options, including settings for specific table elements (odd rows and the bottom right cell), and applies it to the table.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/tables-simple-example-t472346

The image below illustrates the table after the created table style is applied.

Expanded 6. Delete the Table Elements

Delete the cell, row or the entire table

To delete any specific table element, use the API from the following table.

Member Description
TableCell.Delete Deletes the desired cell from the table. The cell that is next to the deleted one is moved to the left.
TableRow.Delete Deletes the desired row from the table.
TableCollection.Remove Deletes the entire table from the document.

The following code snippet deletes the first row and the second cell from the second row.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/tables-simple-example-t472346

Delete the column

Table columns cannot be directly deleted, as there is no instance that represents this table element.

To remove the desired column, delete the cells with the corresponding index from every table row using the Table.ForEachRow method. The code sample below shows the way to solve this task.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/tables-simple-example-t472346

Expanded Manage Tables in the User Interface

An end-user can insert a table by clicking the Table menu on the Insert Ribbon tab. The invoked cell grid allows end-users to select the number of rows and columns for the table.

Clicking the Table button invokes the Insert Table dialog which allows end-users to enter the number of rows and columns. The maximum number of rows in the RichEditControl table is 32767, the maximum number of columns is 63. If an end-user enters the number of rows or columns that exceed the limit, an error icon appears, as shown below.

The Table Tools contextual tab allows end-users to modify the tables (insert or delete the specific table elements, merge or split cells), specify the layout options, apply the table style or set the borders and shading options.

To learn how to provide the application with the Ribbon interface, refer to the How to: Create the RichEditControl with a Ribbon UI topic.

Additionally, end-users can change table settings and the table layout using the table dialogs.

Expanded See Also

Is this topic helpful?​​​​​​​