Table Blocks in ASP.NET Core Block Editor control

17 Dec 20258 minutes to read

The Block Editor control 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.

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

This sample demonstrates the configuration of the Table block in the Block Editor.

@using Syncfusion.EJ2.BlockEditor

<div id='blockeditor-container'>
    <ejs-blockeditor id="block-editor" blocks="@ViewBag.BlocksData"></ejs-blockeditor>
</div>

<style>
    #blockeditor-container {
        margin: 20px auto;
    }
</style>
using Syncfusion.EJ2.BlockEditor;

public List<BlockModel> BlocksData { get; set; } = new List<BlockModel>();

public class BlockModel
{
    public string id { get; set; }
    public string blockType { get; set; }
    public object properties { get; set; }
    public List<object> content { get; set; }
}

public ActionResult Quote()
{
        BlocksData.Add(new BlockModel
        {
                blockType = "Paragraph",
                content = new List<object>
                {
                new { 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." }
                }
        });
        BlocksData.Add(new BlockModel
        {
                blockType = "Table",
                properties = new
                {
                rows = new List<object>
                {
                        new
                        {
                        cells = new List<object>
                        {
                                new { blocks = new List<BlockModel> { new BlockModel { blockType = "Paragraph", content = new List<object> { new { contentType = "Text", content = "Cell 1" } } } } },
                                new { blocks = new List<BlockModel> { new BlockModel { blockType = "Paragraph", content = new List<object> { new { contentType = "Text", content = "Cell 2" } } } } }
                        }
                        },
                        new
                        {
                        cells = new List<object>
                        {
                                new { blocks = new List<BlockModel> { new BlockModel { blockType = "Paragraph", content = new List<object> { new { contentType = "Text", content = "Cell 3" } } } } },
                                new { blocks = new List<BlockModel> { new BlockModel { blockType = "Paragraph", content = new List<object> { new { contentType = "Text", content = "Cell 4" } } } } }
                        }
                        }
                }
                }
        });
        ViewBag.BlocksData = BlocksData;
        return View();
}

Table Block