slate-deep-table

![npm version](https://badge.fury.io/js/slate-deep-table)
![Linux Build Status](https://travis-ci.org/jasonphillips/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)

$3



npm install slate-deep-table





$3



- 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



$3



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



$3

js

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'





$3



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

 framing the table

-

wrapperStyle: any style (as an object) to style the wrapper

tableClassName: any class names to be passed on to the

tableStyle: any style (as an object) to style

theadClassName: any class names to be passed on to the

 element

-

theadStyle: any style (as an object) to style

tbodyClassName: any class names to be passed on to the

 element

-

tbodyStyle: any style (as an object) to style

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

 element

-

style: any style (as an object) to style the

 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.



$3

slate-deep-table exports queries and commands that you can invoke on your editor

 instance:

js

// 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:

js

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





####

command insertTable()

editor.insertTable(columns: Number?, rows: Number?, properties: Object?) => Editor





Insert a new empty table. Properties can contain table level options as above in object format.



####

command insertRow()

editor.insertRow(at: Number?) => Editor





Insert a new row after the current one or at the specific index (

).



####

command insertColumn()

editor.insertColumn(at: Number?) => Editor





Insert a new column after the current one or at the specific index (

).



####

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 (

).



####

command removeColumn()

editor.removeColumn(at: Number?) => Editor





Remove current column or the one at a specific index (

).



####

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.

`or`
`or`

@pbackup/slate-deep-table

slate-deep-table

$3

$3

$3

$3

$3

$3