Table Blocks in JavaScript Block Editor

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 a 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.

Table resizing

The Block Editor supports table column resizing. You can drag column borders to adjust column width dynamically. Only columns can be resized; row height is not adjustable. If resizing exceeds the layout width, a horizontal scrollbar will appear to maintain structure and layout integrity.

Table multiple row and column selection and deletion

The Block Editor supports selecting full rows and columns, single or multiple, using the mouse or with Shift + arrow key actions. Row and column selection is indicated by selection handles on the left side and top respectively. Multiple non-adjacent selections are supported using Shift+Click. Selected rows or columns can 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.