slate-tables
A Slate plugin to handle tables. Forked from slate-deep-tables that was forked from slate-edit-table.
Documentation and Demo: https://george-a-payne.github.io/slate-tables/
Install
npm install slate-tables
Features
- 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
- Permits nested block content within table cells
- Optionally create headerless tables
- Rows and Columns can only be removed by commands
- Rows and Columns retain their order on seletion deletion
Compatibility
Slate is a fast-moving library, so check the CHANGELOG for information on the currently supported version.
Usage
; const plugins = ; // now instantiate your Slate Editor with these plugins, according to slate documentation
Options
[typeTable: String]
— type for tabledefault: 'table'
[typeRow: String]
— type for the rowsdefault: 'table_row'
[typeCell: String]
— type for the cellsdefault: 'table_cell'
[typeContent: String]
— type for the default blocks within cellsdefault: 'paragraph'
[typeDefault: String]
— type for the default blocks outside of cells, used to replace the table on deletion, if no other node is present, and for insertiondefault: 'paragraph'
Queries and Commands
slate-tables
exports queries and commands that you can invoke on your editor
instance:
// anywhere where 'editor' is passed as an argument, or using the react Component's ref,// you may directly invoke any of the exported functions below, e.g:const inATable = editor; if !inATable editor;
Check example for usage in a typical context.
query isSelectionInTable()
editor.isSelectionInTable() => Boolean
Return true if current cursor position is inside a table.
command insertTable()
editor.insertTable(columns: Number?, rows: Number?) => Editor
Insert a new empty table.
command insertRow()
editor.insertRow(at: Number?) => Editor
Insert a new row after the current one or at the specific index (at
).
command insertColumn()
editor.insertColumn(at: Number?) => Editor
Insert a new column after the current one or at the specific index (at
).
command removeTable()
editor.removeTable() => Editor
Remove current table.
command removeRow()
editor.removeRow(at: Number?) => Editor
Remove current row or the one at a specific index (at
).
command removeColumn()
editor.removeColumn(at: Number?) => Editor
Remove current column or the one at a specific index (at
).
command moveTableSelection()
editor.moveTableSelection(column: Number, row: Number) => Editor
Move the selection to a specific position in the table.
command moveTableSelectionBy()
editor.moveTableSelectionBy(column: Number, row: Number) => Editor
Move the selection by the given amount of columns and rows.
command toggleTableHeaders()
editor.toggleTableHeaders() => Editor
Toggles whether the table will render the first row as a header row (within a thead) or as a regular row.