A Slate plugin to handle tables with nested block content. Forked from the excellent slate-edit-table implementation, but retooled to work with deep content.
Demo: https://jasonphillips.github.io/slate-deep-table/
npm install slate-deep-table
- Pressing Up and Down, move the cursor to next/previous row
- Pressing Tab, move the select to next cell
- Pressing Shift+Tab, move the select to previous cell
import EditTable from 'slate-deep-table'
const plugins = [
EditTable({ /* options here */ })
]
// then use as plugins prop on your slate Editor[typeTable: String]— type for table[typeRow: String]— type for the rows.[typeCell: String]— type for the cells.[typeContent: String]— type for the default blocks within cells.
slate-deep-table exports utilities and changes:
plugin.utils.isSelectionInTable(state: State) => Boolean
Return true if selection is inside a table.
plugin.changes.insertTable(change: Change, columns: Number?, rows: Number?) => Change
Insert a new empty table.
plugin.changes.insertRow(change: Change, at: Number?) => Change
Insert a new row after the current one or at the specific index (at).
plugin.changes.insertColumn(change: Change, at: Number?) => Change
Insert a new column after the current one or at the specific index (at).
plugin.changes.removeTable(change: Change) => Change
Remove current table.
plugin.changes.removeRow(change: Change, at: Number?) => Change
Remove current row or the one at a specific index (at).
plugin.changes.removeColumn(change: Change, at: Number?) => Change
Remove current column or the one at a specific index (at).
plugin.changes.moveSelection(change: Change, column: Number, row: Number) => Change
Move the selection to a specific position in the table.
plugin.changes.moveSelectionBy(change: Change, column: Number, row: Number) => Change
Move the selection by the given amount of columns and rows.
plugin.changes.toggleHeaders(change: Change) => Change
Toggles whether the table will render the first row as a header row (within a thead) or as a regular row.