Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  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]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Collapse]Rich Text Editor
    Overview
   [Expand]Getting Started
   [Collapse]Fundamentals
    [Expand]RichEditControl
    [Collapse]Document
      Document Model
      Document Layout
      Positions and Ranges
      Characters
      Paragraphs
      Inline Pictures
      Document Fields
      Hyperlinks and Bookmarks
      Headers and Footers
      Tables
      Range Permissions
      Sections
      Styles
      Numbered and Bulleted Lists
      Floating Objects (Shapes)
      Text Boxes
      Comments
      Document Properties
     Supported Document Formats
    [Expand]Fields
     Commands
     Services
     Layout API
     Product Class Structure
     Default Keyboard Shortcuts
     Measure Units
     HTML Tag Interpretation
   [Expand]Concepts
   [Expand]Visual Elements
   [Expand]Examples
   [Expand]Member Tables
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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 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.


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.

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T472346 .


2. Resize the Table

To resize 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.
Note

It is not recommended to set different size to several cells within one column. Otherwise, the table will be displayed incorrectly.

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

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T472346.


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.

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T472346.


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.

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/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.


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.

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/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.

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T472346.

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


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.

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/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.

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T472346.

Expanded Manage Tables in the User Interface

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

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 a Simple Word Processor with a Ribbon UI topic.

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

Expanded See Also

How would you rate this topic?​​​​​​​