Table Editor

An interactive spreadsheet-style editor. Supports heading and sum row/column markers, per-column alignment and prefix/postfix decorators, and full keyboard navigation. Designed to be used standalone or embedded inside the Block Editor.

Basic

Call makeDefaultTableData() to get a blank 4×4 table and pass it as value. Update parent state in onchange. Hover over a row or column to reveal insert and delete controls.

A
B
C
D
1
2
3
4

Heading row & sum row

Toggle headingRow / headingCol to style the first row or column as a header. Toggle sumRow / sumCol to highlight the last row or column as a totals band. Combine with prefix decorators (e.g. $) for financial tables.

A
B
C
D
1
2
$
$
$
3
$
$
$
4
$
$
$
5

Controlled with data state

Use the onchange callback instead of bind:value when you need to observe or persist changes. The editor commits edits internally before calling the callback; this is not a validation veto.

A
B
C
D
1
2
3
4
data state 
{
  "rows": [
    [
      "",
      "",
      "",
      ""
    ],
    [
      "",
      "",
      "",
      ""
    ],
    [
      "",
      "",
      "",
      ""
    ],
    [
      "",
      "",
      "",
      ""
    ]
  ],
  "colStyles": [
    {
      "align": "left",
      "prefix": "",
      "postfix": "",
      "sumDecorator": false
    },
    {
      "align": "left",
      "prefix": "",
      "postfix": "",
      "sumDecorator": false
    },
    {
      "align": "left",
      "prefix": "",
      "postfix": "",
      "sumDecorator": false
    },
    {
      "align": "left",
      "prefix": "",
      "postfix": "",
      "sumDecorator": false
    }
  ],
  "headingRow": false,
  "headingCol": false,
  "sumRow": false,
  "sumCol": false
}

Keyboard navigation

Full keyboard control inside the table: Tab / Shift+Tab move between cells left and right, wrapping to the next/previous row. Enter and ↓ move down a row. ↑ moves up. → / ← jump to the adjacent cell when the cursor is at the end or start of the input.