Table in Angular Rich text editor component
13 Jun 202417 minutes to read
RichTextEditor allows to insert table of content in edit panel and provides an options to add, edit and remove the table as well as perform other table related action. For inserting the table to the Rich Text Editor, the following list of options have been provided in the tableSettings
Options | Description | Default Value |
---|---|---|
minWidth | Sets the default minWidth of the table. | 0 |
maxWidth | Sets the default maxWidth of the table. | null |
resize | Enable resize feature in table. | true |
styles | This is an array of key value pair, on each pair, key should be name of styling and value is class name. this list will be shown on quick toolbar options to change the styles of table on designing like dashed, double bordered. | TableStyleItems |
width | Sets the default width of the table. | 100% |
To use Table feature, inject
TableService
in the provider section ofAppModule
.
Insert table
Using the table
toolbar option, select a number of rows and columns to be inserted over the table grid and insert table into Rich Text Editor content using the mouse.
Tables can also be inserted through the Insert Table
option in the pop-up where the number of rows and columns can be provided manually,and this is the default way in devices.
In the following sample, the table has been injected from table module.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, TableService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [
RichTextEditorAllModule,
DialogModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-richtexteditor id='iframeRTE' [toolbarSettings]='tools'>
<ng-template #valueTemplate>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor
that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul><li><p>Provides <IFRAME> and <DIV> modes</p></li>
<li><p>Capable of handling markdown editing.</p></li>
<li><p>Contains a modular library to load the necessary functionality on demand.</p></li>
<li><p>Provides a fully customizable toolbar.</p></li>
<li><p>Provides HTML view to edit the source directly for developers.</p></li>
<li><p>Supports third-party library integration.</p></li>
<li><p>Allows preview of modified content before saving it.</p></li>
<li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
<li><p>Contains undo/redo manager.</p></li>
<li><p>Creates bulleted and numbered lists.</p></li>
</ul>
</ng-template>
</ejs-richtexteditor>`,
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, TableService]
})
export class AppComponent {
public tools: object = {
items: ['CreateTable']
};
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Quick Toolbar
Quick toolbar will open by clicking on the table. It has different sets of commands to be performed on the table which increases the feasibility to edit the table easily.
To use quick toolbar feature, inject
QuickToolbarService
in the provider section ofAppModule
.
Table Header
Table Header
command is available with quick toolbar option through which the header row can be added or removed from the inserted table. The following image illustrates the table header.
Insert Rows
Rows
can be inserted above or below the required table cell through the quick toolbar. Also, focused row can be deleted. The following screenshot shows the available options of the row item.
Insert Columns
Columns
can be inserted to the left or right side of the required table cell through the quick toolbar. Also, the focused column can be deleted. The following screenshot shows the available options in inserting column item.
Set Color
The background color can be set for each table cell through the background color
command available in quick toolbar.
Delete Table
Using the delete item in the quick toolbar, users can delete the entire table.
Vertical Align
Text inside the table can be aligned to top, middle, or bottom using the tableCellVerticalAlign
tool of the quick toolbar.
Horizontal Align
Text inside the table can be aligned left, right, or center using the tableCellHorizontalAlign
tool of the quick toolbar.
Table Styles
Table styles provided for class name should be appended to a table element. It helps to design the table in specific CSS styles when inserting in the editor.
By Default, provides Dashed border and Alternate rows.
Dashed border: Applies the dashed border to the table.
Alternate border: Applies the alternative background to the table.
Table Properties
Sets the default width of the table when it is inserted in the Rich Text Editor using the width of tableSettings
.
Using the quick toolbar, users can change the width, cell padding, and cell spacing in the selected table using the properties option.
Table row and column selection
The table row and column selection feature in our editor allows for intuitive and efficient table manipulation using both mouse and keyboard interactions.
Mouse interaction:
- Click and drag to select multiple rows or columns.
- Selected cells are highlighted with a distinct background color for better visibility.
Keyboard interaction:
- Use Shift + Arrow keys to extend the selection of rows or columns.
- Background color highlights selected cells, making it easy to see the current selection.
Table selection with backspace and delete keys:
- Press the Backspace key immediately after the table to select the entire table.
- Press the Delete key immediately before the table to select the entire table.
Table content text formatting:
The text formatting feature in tables allows users to apply various styles to selected cells, enhancing the appearance and readability of data. This includes the application of headings, paragraphs, lists, and inline styles such as bold, italic, and strikethrough. Users can efficiently format multiple cells simultaneously by selecting entire rows or columns.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, TableService, QuickToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [
RichTextEditorAllModule,
DialogModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-richtexteditor id='iframeRTE' [toolbarSettings]='tools' [quickToolbarSettings]='quickToolbarSettings'>
<ng-template #valueTemplate>
<h2>Discover the Table's Powerful Features</h2><p>A table can be created in the editor using either a keyboard shortcut or the toolbar. With the quick
toolbar, you can
perform table cell insert, delete, split, and merge operations. You can style the table cells using
background
colours and borders.</p><table class="e-rte-table" style="width: 100%; min-width: 0px; height: 151px">
<thead>
<tr>
<th><span>Name</span><br/></th>
<th><span>Age</span><br/></th>
<th><span>Gender</span><br/></th>
<th><span>Occupation</span><br/></th>
</tr>
</thead>
<tbody>
<tr>
<td>Selma Rose</td>
<td>30</td>
<td>Female</td>
<td><span>Engineer</span><br/></td>
</tr>
<tr>
<td><span>Robert</span><br/></td>
<td>28</td>
<td>Male</td>
<td><span>Graphic Designer</span></td>
</tr>
<tr>
<td><span>William</span><br/></td>
<td>35</td>
<td>Male</td>
<td>Teacher</td>
</tr>
</tbody>
</table>
</ng-template>
</ejs-richtexteditor>`,
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, TableService]
})
export class AppComponent {
public tools: object = {
items: ['CreateTable'],
};
public quickToolbarSettings: QuickToolbarSettingsModel = {
table: ['TableHeader', 'TableRows', 'TableColumns', 'TableCell', '-', 'BackgroundColor', 'TableRemove', 'TableCellVerticalAlign', 'Styles']
};
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Table cell merge and split
The Rich Text Editor allows users to change the appearance of the tables by splitting or merging the table cells.
TableCell
item should be configured in the Table quickToolbarSettings Property to show the merge/split icons while selecting the table cells
Table cell merge
The table cell merge feature allows you to merge two or more row and column cells into a single cell with its contents.
The following image explains the table merge action.
Table cell split
The table cell split feature allows you to a selected cell can be split both horizontally and vertically.
The following image explains the table split action.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, TableService, QuickToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [
RichTextEditorAllModule,
DialogModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-richtexteditor id='iframeRTE' [toolbarSettings]='tools' [quickToolbarSettings]='quickToolbarSettings'>
<ng-template #valueTemplate>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor
that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul><li><p>Provides <IFRAME> and <DIV> modes</p></li>
<li><p>Capable of handling markdown editing.</p></li>
<li><p>Contains a modular library to load the necessary functionality on demand.</p></li>
<li><p>Provides a fully customizable toolbar.</p></li>
<li><p>Provides HTML view to edit the source directly for developers.</p></li>
<li><p>Supports third-party library integration.</p></li>
<li><p>Allows preview of modified content before saving it.</p></li>
<li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
<li><p>Contains undo/redo manager.</p></li>
<li><p>Creates bulleted and numbered lists.</p></li>
</ul>
</ng-template>
</ejs-richtexteditor>`,
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, TableService]
})
export class AppComponent {
public tools: object = {
items: ['CreateTable'],
};
public quickToolbarSettings: QuickToolbarSettingsModel = {
table: ['TableHeader', 'TableRows', 'TableColumns', 'TableCell', '-', 'BackgroundColor', 'TableRemove', 'TableCellVerticalAlign', 'Styles']
};
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));