@trevixal/extension-table

Documentation · Live editor · Changelog · Issues

Features

• Insert, merge, split, sort; row and column editing
• Column resize, header rows, alignment and borders
• Keyboard navigation and CSV import/export
• 10.2 kB minified and gzipped, with TypeScript types in the package

Tables: structure, merging, sorting, borders, CSV, and the keyboard.

npm install @trevixal/extension-table

Usage

Merge the nodes into your schema:

new Schema({ nodes: { ...defaultNodes(), ...tableNodes() }, marks: defaultMarks() })

import { tableKeymap, insertTable, addRow, toggleHeaderRow } from '@trevixal/extension-table'

const editor = createEditor({ schema, element, keymap: tableKeymap() })

editor.exec(insertTable({ rows: 3, cols: 3 }))
editor.exec(addRow('after'))
editor.exec(toggleHeaderRow)

tableKeymap() makes Tab and Shift+Tab move between cells, then fall through to code-block indentation and list nesting. Each binding chains through every context the key means something in, because an override replaces the base binding wholesale.

What it can do

Structure: insertTable, addRow, addColumn, deleteRow, deleteColumn, deleteTable, mergeCells, splitCell, toggleHeaderRow, goToNextCell.

Appearance: setCellAlign, setCellBackground, setTableBorders (all, outer, horizontal, none), setTableBorderColor.

Data: sortTable, convertTextToTable, convertTableToText, parseCSV, insertTableFromCSV, tableToCSV, csvAtSelection, detectDelimiter.

Sizing: createTableResizeHandles for drag handles, plus setColumnWidth, setRowHeight, setTableWidth, distributeColumnsEvenly, clearTableSizing.

Moving: moveRow, moveColumn, swapCellContent.

Two decisions worth knowing

Cells merge across columns only. rowspan is not in the model, which keeps every row a flat list of cells and every structural edit simple arithmetic (ADR-0006). A column move that would cut through a merged cell declines rather than silently rewriting the merge.

A drag stores proportions, not pixels. A width measured in a fullscreen window is meaningless in a narrow one, and table-layout: fixed will widen a table past any max-width to fit its columns. Columns are stored as a share of the table, the table as a share of the space it sits in.

License

Apache-2.0