Table Blocks in EJ2 JavaScript Block Editor control

24 Dec 202513 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.

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

BlockType & 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.

let blocksData = [
    {
        blockType: ej.blockeditor.BlockType.Table,
        properties: {
            columns: [{ id: 'col1', headerText: 'Column 1' }, { id: 'col2', headerText: 'Column 2' }],
            rows: [
                {
                    cells: [
                        {
                            columnId: 'col1',
                            blocks: [{ blockType: ej.blockeditor.BlockType.Paragraph, content: [{ contentType: ej.blockeditor.ContentType.Text, content: 'Cell 1' }] }]
                        },
                        {
                            columnId: 'col2',
                            blocks: [{ blockType: ej.blockeditor.BlockType.Paragraph, content: [{ contentType: ej.blockeditor.ContentType.Text, content: 'Cell 2' }] }]
                        }
                    ]
                },
                {
                    cells: [
                        {
                            columnId: 'col1',
                            blocks: [{ blockType: ej.blockeditor.BlockType.Paragraph, content: [{ contentType: ej.blockeditor.ContentType.Text, content: 'Cell 3' }] }]
                        },
                        {
                            columnId: 'col2',
                            blocks: [{ blockType: ej.blockeditor.BlockType.Paragraph, content: [{ contentType: ej.blockeditor.ContentType.Text, content: 'Cell 4' }] }]
                        }
                    ]
                }
            ]
        }
    },
    {
        blockType: 'Paragraph',
        content: [
            {
                contentType: ej.blockeditor.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.'
            }
        ]
    }
];

var blockEditor = new ej.blockeditor.BlockEditor({
    blocks: blocksData
});
blockEditor.appendTo('#blockEditor');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - BlockEditor</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/styles/fluent2.css" rel="stylesheet"/>
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/styles/fluent2.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-blockeditor/styles/fluent2.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <div id="blockEditor"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <style>
        #container {
            visibility: hidden;
            margin: 50px;
        }
    </style>

    <script src="index.js" type="text/javascript"></script>
</body>

</html>