Thangavel E
TL;DR: Struggling with structured content in Angular? The Table Block in Angular Block Editor brings dynamic tables, quick actions, and keyboard shortcuts, making rich text editing smarter and faster.
We’re thrilled to announce a major new addition to the Syncfusion Angular Block Editor: The Table block! Now available in our 2025 Volume 4 release, this feature brings powerful, structured data handling directly into your block-based editing experience. Drawing inspiration from collaborative tools like Microsoft Loop, the Table block makes it easy to organize information while maintaining the flexibility of a modern editor.
Ideal for project planning, data compilation, wikis, and documentation, the Table block integrates seamlessly as a dedicated block type, allowing dynamic tables with rich content and intuitive management.
Here’s what the Table Block looks like.
Key features of the Table Block
Rich Text in Cells
In the Table block, every single cell acts like a mini rich text editor. This means you’re not limited to plain text inside table cells; you can format the content just like you would in the main editor body.
The key capabilities are,
- Formatting: Apply bold, italic, underline, or directly within any cell.
- Hyperlinks: Turn text into clickable links, such as linking to documentation or external resources.
- Mentions: Type followed by a username (e.g., @john) to tag team members. Great for assigning tasks or drawing attention in collaborative documents.
Slash menu integration inside Cells
This feature brings the full power of the block editor directly into table cells, allowing for deeply nested and complex content:
- Simply type / anywhere inside a table cell to instantly open the familiar slash menu.
- From there, you can search and insert any supported block, such as bulleted/numbered lists, images, headings, code blocks, quotes, or even other nested elements, right within that single cell.
The following image shows the Slash Menu inside a table cell.
Header support
The Header Support feature ensures your tables are both visually clear and accessible right from the start:
- Default header row: When you create a new table, the first row is automatically styled as a header using (table header) elements instead of regular cells. This provides bolder styling and better screen reader support for accessibility.
- Easy toggle: In the table block settings, you can quickly turn the header on or off. When toggled off, the header row converts to standard data cells (and vice versa), with no loss of content.
Quick Actions for efficient editing
The Quick Actions feature makes table editing fast and intuitive by providing visual controls that appear only when needed:
- Hover icons: When you hover your mouse over a row or column, small dot (•) and plus (+) icons appear on the left (for rows) or top (for columns).
- Insert with one click: Click the plus (+) icon to instantly add a new row (above or below) or column (left or right) at the exact position you need; no menus or dialogs required.
- Easy selection and deletion: Click the dot (•) icon to select an entire row or column. Hold Shift and click to select multiple rows/columns. Once selected, a contextual pop-up menu appears automatically, giving you quick options like Delete row or Delete column.
Here’s how the Quick Action makes adding a new column effortless.
Keyboard navigation and accessibility
The Table block is designed with full keyboard support to ensure an efficient and inclusive editing experience.
- Arrow keys: Move focus up, down, left, or right between cells for quick navigation.
- Shift + arrow keys: Extend selection to multiple adjacent cells, allowing bulk actions.
- Tab / Shift + Tab: Jump forward or backward through cells in reading order, ideal for linear workflows or users of screen readers.
- Backspace / Delete: Clear the content of the currently focused cell or all selected cells if multiple are highlighted.
Upcoming Block Editor enhancements
Here’s a sneak peek at what’s coming next for the Angular Block Editor.
- Table Block enhancement
- Drag-and-drop reordering
Reorder rows and columns with simple drag-and-drop gestures or keyboard shortcuts, keeping your data organized without the hassle of copying and pasting. - Advanced Column types
Bring structure to your tables with specialized column types:- Mention: Tag team members with @mentions.
- Label: Add color-coded tags for quick categorization.
- Number and date: Validate and format numeric and date values.
- Custom types: Extend functionality with your own column types.
- Sorting and filtering
Sort columns alphabetically or numerically and apply filters to create focused views, ideal for large datasets. - Aggregations and Footer Row
Summarize data with totals, averages, and other aggregations in a dedicated footer row.
- Drag-and-drop reordering
- Collaborative editing
Edit together in real time! See others’ changes instantly with low latency and offline support. Perfect for teams working on shared documents. - Comment support
Add threaded comments to blocks or text ranges. Mention users, resolve threads, and keep feedback organized, all with role-based permissions. - Video & audio support
Embed or upload video and audio for richer, more engaging content. Ideal for tutorials, presentations, and interactive documents.
Conclusion
Thank you for being part of our developer community! The 2025 Volume 4 update for the Syncfusion Angular Block Editor introduces the powerful new Table block, delivering advanced features and intuitive enhancements that elevate structured content creation.
From rich text support in cells and dynamic row and column management to slash menu integration, quick actions, and seamless keyboard navigation, this release is designed to help you build more flexible and user-friendly block-based editing solutions.
For a hands-on look, explore our online demo and documentation of the Angular Block Editor. You can check out our Release Notes and What’s New for the other updates in this release and provide your feedback in the comments below.
If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a 30-day free trial.
You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!
No spam, just valuable updates.