Skip to main content

Table

Below you can view an example of the code block in JSON format.

{
"type": "table",
"attrs": {
"blockId": "blockId"
},
"content": [
{
"type": "table_row",
"attrs": {
"blockId": "blockId"
},
"content": [
{
"type": "table_cell",
"attrs": {
"blockId": "blockId",
"colspan": 1,
"rowspan": 1,
"colwidth": null,
"background": null
},
"content": [
{
// Any type of content available in the editor
}
],
"contentHTML": ""
}
],
"contentHTML": ""
}
],
"contentHTML": "<colgroup><col></colgroup><tbody><tr><td><p data-id=\"bl5fe02e485e5641418e33\" class=\"\" style=\"text-align: left\">Table Cell</p></td></tr></tbody>"
}
info

Tables in Codex like in many other cases work with a row and column structure. New row objects are added anytime a row is added to the table and new cell objects are added to each row when a column is added to the table.

tip

This section of the documentation covers the attributes important to tables, but you can add any type of editor block inside a table cell. You can read the other sections of this documentation on how the other editor blocks are structured.

Below you can read details about each attribute of the table block.

type

A string that represents the type of the block. Table blocks will always display table as their type Table rows will display table_row and table cells will display table_cell.

content

An array of objects that represents the content of the block.

attrs

An object that represents the attributes of the block.

attrs.blockId

A string that represents the unique block ID of the table block.

attrs.colspan

A number that represents the amount of columns the table cell spans over.

attrs.rowspan

A number that represents the amount of rows the table cell spans over.

attrs.colwidth

A number that represents the width of the table column in pixels.

attrs.background

A string that represents the background of the table cell.

contentHTML

A string that represents the generated HTML of the paragraph.