Table

A table is a table block containing tableRow blocks, each containing tableCell blocks. Column metadata (name, type, width) lives once on the table itself in props.columns — cells are mapped to columns positionally (a row's n-th cell corresponds to the table's n-th column), not by id reference.

json

{
  "id": "t1",
  "type": "table",
  "contentIds": ["row1"],
  "props": {
    "columns": [
      { "id": "col1", "label": "Name", "type": "text", "width": 160 },
      { "id": "col2", "label": "Status", "type": "select", "width": 160 }
    ]
  }
}

Using it in your editor

useEditor() registers every built-in block by default, table included — most apps need nothing extra here. Table is really three block types (table/tableRow/tableCell) that only work together, so if you're opting into individual blocks instead, spread the whole group rather than naming tableBlockType alone:

jsx

import { useEditor, NoteloomEditor, registerBlocks, paragraphBlockType, TABLE_BLOCKS } from 'noteloom';

function Editor() {
  const editor = useEditor({
    registerBlocks: (registry) => registerBlocks(registry, { paragraph: paragraphBlockType, ...TABLE_BLOCKS }),
  });
  return <NoteloomEditor editor={editor} />;
}

Using a select-type column also needs its inline-type counterpart, TABLE_SELECT_INLINE_TYPES — see Table select. See Picking only the blocks you want for combining groups with individual types.

Column types

Type	Cell run type	Notes
`text`	`text`	Default — plain editable text.
`date`	`date`	Native date picker per cell.
`checkbox`	`checkbox`	Checkbox + label per cell.
`select`	`tableSelect`	Options are shared at the column level — every cell in a select column reads from the same option list, so picking a value in one cell offers the same choices everywhere else in that column.

Changing a column's type converts every existing cell in that column, preserving its value where possible (e.g. a date becomes its formatted string when converted to text) rather than wiping it.

Editing rows and columns

Each column header has a menu (rename, change type, set width, delete) and there are add/remove affordances for rows and columns — no separate UI needed, it's all in the table itself. Programmatically, the package exports the same primitives that UI uses:

import {
  insertRowAfter, deleteRow,
  insertColumnAfter, deleteColumn,
  renameColumn, setColumnType, setColumnOptions, setColumnWidth,
} from 'noteloom';

Slash command

Table — keywords: table, grid — inserts a default 2×2 table.

Styling

.be-table on the table, .be-table-row per row, .be-table-cell per cell, and a family of .be-table-header-* classes for the column header row and its menu.