How can I help you?
Table Blocks in Angular Block Editor component
17 Mar 202624 minutes to read
The Syncfusion Block Editor allows you to render structured data in rows and columns by setting the block’s blockType property to Table. You can customize the table layout, header, row numbers, and define columns and rows using the properties property. In addition, you can format cells with keyboard shortcuts, use slash commands inside cells to add blocks, and manage rows and columns quickly with dot and plus buttons.
Configure table block
For Table blocks, you can configure layout and structure using the properties property. This property supports the following options:
| Property | Description | Default Value |
|---|---|---|
| width | Specifies the display width of the table. | 100% |
| enableHeader | Specifies whether to enable header for the table. | true |
| enableRowNumbers | Specifies whether to enable row numbers for the table. | true |
| readOnly | Specifies whether to render the table in read-only mode, disabling edits. | false |
| columns | Defines the columns of the table, including their types and headers. | [] |
| rows | Defines the rows of the table, each containing cells tied to columns. | [] |
Block type & properties
The following example demonstrates how to pre-configure a Table block in the editor.
// Adding an Table block
{
blockType: BlockType.Table,
properties: {
columns: [{ id: 'col1', headerText: 'Column 1' }, { id: 'col2', headerText: 'Column 2' }],
rows: [
{
cells: [
{
columnId: 'col1',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 1' }] }]
},
{
columnId: 'col2',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 2' }] }]
}
]
},
{
cells: [
{
columnId: 'col1',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 3' }] }]
},
{
columnId: 'col2',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 4' }] }]
}
]
}
]
}
}This sample demonstrates the configuration of the Table block in the Block Editor.
import { Component } from '@angular/core';
import { BlockEditorModule } from "@syncfusion/ej2-angular-blockeditor";
import { BlockModel, ContentType, BlockType } from "@syncfusion/ej2-blockeditor";
@Component({
imports: [BlockEditorModule],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
public blocksData: BlockModel[] = [
{
blockType: BlockType.Table,
properties: {
columns: [{ id: 'col1', headerText: 'Column 1' }, { id: 'col2', headerText: 'Column 2' }],
rows: [
{
cells: [
{
columnId: 'col1',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 1' }] }]
},
{
columnId: 'col2',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 2' }] }]
}
]
},
{
cells: [
{
columnId: 'col1',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 3' }] }]
},
{
columnId: 'col2',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 4' }] }]
}
]
}
]
}
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'You can customize the table further by configuring properties like width, enableHeader to show a header row, enableRowNumbers to display row indices, and readOnly to prevent edits.'
}
]
}];
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<div id="container">
<ejs-blockeditor id="blockeditor" [blocks]="blocksData" />
</div>Table resizing
The Block Editor supports table column resizing. You can drag column borders to adjust column width dynamically, or auto‑fit based on content. Only columns can be resized, and if resizing exceeds the layout width, a scrollbar will appear to maintain structure and layout integrity.
Table multiple row column selection and deletion
The Block Editor supports selecting full rows, single or multiple using the mouse or with Shift + arrow key actions, which activate grippers for easy control. Shift based multiple selection is also supported: select a row, hold Shift, and click a non adjacent row (e.g., the third), and all rows in between are included. Selected rows or columns can then be deleted through the Delete popup, and full table deletion is also supported for complete removal.
This sample demonstrates the Table block multiple row and column selection and deletion support in the Block Editor.
import { Component } from '@angular/core';
import { BlockEditorModule } from "@syncfusion/ej2-angular-blockeditor";
import { BlockModel, ContentType, BlockType } from "@syncfusion/ej2-blockeditor";
@Component({
imports: [BlockEditorModule],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
public blocksData: BlockModel[] = [
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'You can resize table columns by dragging column borders and can do multi-row column selection and perform deletion via popup.'
}
]
},
{
blockType: BlockType.Table,
properties: {
columns: [{ id: 'col1', headerText: 'Column 1' }, { id: 'col2', headerText: 'Column 2' },{ id: 'col3', headerText: 'Column 3' }, { id: 'col4', headerText: 'Column 4' }],
rows: [
{
cells: [
{
columnId: 'col1',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 1' }] }]
},
{
columnId: 'col2',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 2' }] }]
},
{
columnId: 'col3',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 3' }] }]
},
{
columnId: 'col4',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 4' }] }]
},
]
},
{
cells: [
{
columnId: 'col1',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 5' }] }]
},
{
columnId: 'col2',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 6' }] }]
},
{
columnId: 'col3',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 7' }] }]
},
{
columnId: 'col4',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 8' }] }]
},
]
},
{
cells: [
{
columnId: 'col1',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 9' }] }]
},
{
columnId: 'col2',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 10' }] }]
},
{
columnId: 'col3',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 11' }] }]
},
{
columnId: 'col4',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 12' }] }]
},
]
},
{
cells: [
{
columnId: 'col1',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 13' }] }]
},
{
columnId: 'col2',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 14' }] }]
},
{
columnId: 'col3',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 15' }] }]
},
{
columnId: 'col4',
blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 16' }] }]
},
]
}
]
}
}
];
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<div id="container">
<ejs-blockeditor id="blockeditor" [blocks]="blocksData" />
</div>