Table Editing
The React Editor component, part of KendoReact, allows you to configure the table and cell properties and change the design of a table by using the Table properties tool and the Cell properties tool.
To resize the table rows and columns, you can also drag the cell border by using the mouse.
Table Properties Tool
The Table properties dialog organizes the available table editing options into two tabs: General and Advanced.
General Table Properties
The General tab lists the options for the table element:
| Option | Description |
|---|---|
| Width | Changes the width of the table. |
| Height | Changes the height of the table. |
| Columns | Defines the columns of the table. |
| Rows | Defines the rows of the table. |
| Cell spacing | Specifies the space between the cells (the border-spacing property). |
| Cell padding | Specifies the padding in the cells. |
| Alignment | Specifies the text alignment in the cells. |
| Background | Specifies the background color of the table. |
| Border width | Defines the border size in pixels. |
| Border color | Defines the border color. |
| Border style | Defines the border style (None, Hidden, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset, Initial, and Inherit). |
| Collapse borders | Adds an inline style to the table and applies the border-collapse: collapse rule (the border-collapse property). |
Advanced Table Properties
The Advanced tab lists the CSS class, ID, and the table options related to accessibility:
| Option | Description |
|---|---|
| CSS class | Defines the class names for the table element (white space-separated). |
| ID | Defines the id of the table element. |
| Caption | Adds a caption element for the table with the respective text. |
| Caption side | Places the caption element for the table оn a specified side (the caption-side property). |
| Alignment | Defines the text alignment of the caption. |
| Header rows | Allows the user to specify the number of rows in the table that belong to the header and must render <th> instead of <td> cell elements. When creating a new table, those rows will be placed within a <thead> element. |
| Header cols | Allows the user to specify the number of columns in the table that are headers for their respective rows. The cells will be rendered as <th> instead of <td> elements. |
| Associate headers | Allows the user to specify the mode in which content cells will be associated with their header cells. The following modes are available: None—Does not explicitly associate cells. This is the default option and it is appropriate for tables with simple structure (no merged cells). Using 'scope' attribute—Adds the appropriate scope attribute to all header cells. Using 'id' attributes—Assigns IDs to all header cells and injects header attributes with the appropriate value into all data cells (and header cells, if needed). |
Cell Properties Tool
The Cell properties dialog lists the options available for the selected cell or for all cells in the table.
| Option | Description |
|---|---|
| Apply to all cells | Applies the changes to all cells in the table. |
| Width | Changes the width of the cell or cells. |
| Height | Changes the height of the cell or cells. |
| Alignment | Specifies the text alignment of the cell or cells. |
| Text control | When you select Fit to cell, the Editor control applies a white-space: nowrap style to the cells (the white-space property). |
| Cell padding | Defines the padding of the cell or cells. |
| Background | Specifies the background color of the cell or cells. |
| Border width | Defines the border size of the cells in pixels. |
| Border color | Defines the color of the cells. |
| Border style | Defines the border style (None, Hidden, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset, Initial, and Inherit). |
| ID | Defines the id of the cells. |
| CSS class | Defines the class names for the cells (white space-separated). |
The following example demonstrates the table and cell properties tools in action:
Example
View Source
Change Theme:
