@pbackup/slate-deep-table NPM

slate-deep-table

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/

(The demo currently only contains functionality up to v0.8)

Install

npm install slate-deep-table

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
Optionally resizable columns and table
Table, row and cell can get attributes and be styled through the data property of the nodes

Compatibility

Slate is a fast-moving library, so check the CHANGELOG for information on the currently supported version.

Simple Usage

import DeepTable from "slate-deep-table";

const plugins = [
  DeepTable({
    /* 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'
[columnResize: Boolean] — whether columns are resizable by dragging default: 'false'
[tableResize: Boolean] — whether tables are resizable by dragging default: 'false'

Table level options

You can pass on class, style and other attributes to each Slate node of the table by adding them as properties to the data property of the respective node.

Table

wrapperClassName: any class names to be passed on to the <div> framing the table
wrapperStyle: any style (as an object) to style the wrapper <div>
tableClassName: any class names to be passed on to the <table>
tableStyle: any style (as an object) to style <table>
theadClassName: any class names to be passed on to the <thead> element
theadStyle: any style (as an object) to style <thead>
tbodyClassName: any class names to be passed on to the <tbody> element
tbodyStyle: any style (as an object) to style <tbody>
tableResize: (boolean) override the application level table resize setting for the given tabel
columnResize: (boolean) override the application level column resize setting for the given tabel

Rows, cells

className: any class names to be passed on to the <td> or <tr> element
style: any style (as an object) to style the <td> or <tr> element
attributes: an object which will be passed on straight to the element and converted to attributes (you can also include colSpan and colRow attributes for merged cells). Whatch out that you have to follow React capitalizing conventions. So colRow and colSpan needs to be like so.

Queries and Commands

slate-deep-table 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/main.js for usage in a typical context.

`query isSelectionInTable()`

editor.isSelectionInTable() => Boolean

Return true if current cursor position is inside a table.

`query getTablePosition()`

editor.getTablePosition() => null || TablePosition

Returns null if cursor is not in a table, else returns an object you can use to query the current cell and row location:

const position = editor.getTablePosition();
position.getRowIndex(); // returns row id (0-indexed)
position.getColumnIndex(); // return column index (0-indexed)
position.getWidth(); // returns count of columns
position.getHeight(); // returns count of rows