Table

Table block (table). Renders as <table> with thead/tbody/tfoot sections and cell children; optional caption. JSON data: { items: Cell[][], head?, foot?, caption?, ...common }; root is not contenteditable — cells support multi-select.

Type: table · Class: TableBlock

Access:

app.block.get()
app.blocks.findByEl(el)
app.blocks.create(type)

App code:

const block = app.block.get();

Plugin:

const block = this.app.block.get();

hasSelectedCell#

Returns whether any cell in this table currently has the rx-cell-selected class.

Returns: boolean

block.hasSelectedCell();

getSelectedCells#

Returns a NodeList of all cells marked with rx-cell-selected.

Returns: NodeList

block.getSelectedCells();

clearSelection#

Removes rx-cell-selected from every cell and hides the selection overlay.

Returns: void

block.clearSelection();

getData#

Returns common fields plus items (row/cell grid), optional head/foot flags, and caption when present.

Returns: object

block.getData();

update#

Re-renders the full grid when items is an array (optionally with head/foot/caption). Otherwise updates or removes only the caption.

Parameters:

• data (object) — object with the keys below
  • items (Array) — row grid: each row is an array of cell strings or cell objects (html / children, optional colspan, rowspan, class)
  • head (boolean) — when true with items, first row becomes <thead>
  • foot (boolean) — when true with items, last row becomes <tfoot>
  • caption (string | object | null | false) — string or { content, placeholder? }; null/false removes the caption
  • id, classname, styles, attrs, … — common block fields (see Common update)

Returns: void

block.update({
    items: [
        ['Name', 'Qty'],
        ['Apples', '10'],
        ['Oranges', '5']
    ],
    head: true
});

block.update({
    items: [
        ['A', 'B'],
        ['1', '2']
    ],
    caption: 'Simple grid'
});

block.update({ caption: { content: 'Sales Q1', placeholder: 'Caption…' } });

block.update({ caption: null }); // remove caption

getCell#

Returns the <th>/<td> at rowIndex/colIndex in section ("head", "body", or "foot").

Parameters:

• section (string) — schema section identifier or element
• rowIndex (number) — zero-based table row index
• colIndex (number) — zero-based table column index

Returns: HTMLElement | null

block.getCell('body', 0, 1);

setCell#

Replaces cell HTML from a string or { html, colspan, rowspan, class } object, then remounts nested blocks.

Parameters:

• section (string) — schema section identifier or element
• rowIndex (number) — zero-based table row index
• colIndex (number) — zero-based table column index
• cellData (object) — table cell data object

Returns: void

block.setCell('body', 0, 0, { html: '<p>Cell</p>', colspan: 2 });

addRow#

Appends a <tr> to the given section; head rows use <th>, others use <td>.

Parameters:

• section (string) — schema section identifier or element
• cells (Array) — table cell elements or instances

Returns: void

block.addRow('body', ['Name', 'Value']);

removeRow#

Deletes the row at index from the given section via deleteRow.

Parameters:

• section (string) — schema section identifier or element
• index (number) — zero-based index

Returns: void

block.removeRow('body', 2);