slate-tables
TypeScript icon, indicating that this package has built-in type declarations

0.9.0 • Public • Published

slate-tables

npm version Linux Build Status

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

import Tables from 'slate-tables';
 
const plugins = [
  Tables({ /* options object here; see below */ }),
];
 
// now instantiate your Slate Editor with these plugins, according to slate documentation

Options

  • [typeTable: String] — type for table default: 'table'
  • [typeRow: String] — type for the rows default: 'table_row'
  • [typeCell: String] — type for the cells default: 'table_cell'
  • [typeContent: String] — type for the default blocks within cells default: '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 insertion default: '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.isSelectionInTable();
 
if (!inATable) {
  editor.insertTable();
}

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.

Readme

Keywords

Package Sidebar

Install

npm i slate-tables

Weekly Downloads

3

Version

0.9.0

License

Apache-2.0

Unpacked Size

64.1 kB

Total Files

39

Last publish

Collaborators

  • george-a-payne