Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jasonphillips/slate-deep-table
Plugin for the Slate editor, allowing for creation of tables with nested content
https://github.com/jasonphillips/slate-deep-table
Last synced: 4 months ago
JSON representation
Plugin for the Slate editor, allowing for creation of tables with nested content
- Host: GitHub
- URL: https://github.com/jasonphillips/slate-deep-table
- Owner: jasonphillips
- License: apache-2.0
- Created: 2017-08-16T21:22:49.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T11:38:25.000Z (almost 2 years ago)
- Last Synced: 2024-10-23T01:58:56.929Z (4 months ago)
- Language: JavaScript
- Size: 3.92 MB
- Stars: 112
- Watchers: 3
- Forks: 27
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# slate-deep-table
[](https://badge.fury.io/js/slate-deep-table)
[](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](https://github.com/GitbookIO/slate-edit-table) implementation, but retooled to work with deep content.
Demo: https://jasonphillips.github.io/slate-deep-table/
### 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
### Compatibility
Slate is a fast-moving library, so check the CHANGELOG for information on the currently supported version.
### Simple Usage
```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'`
### Queries and Commands
`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?) => Editor`
Insert a new empty table.
#### `command insertTableByKey/Path()`
`editor.insertTableByKey(key: String, index: Number?, columns: Number?, rows: Number?) => Editor`
`editor.insertTableByPath(path: List, index: Number?, columns: Number?, rows: Number?) => Editor`
Insert a new empty table by Key/Path, follows `insertNodeByKey/Path()`'s insertion procedure. Index defaults to 0 if empty.
#### `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.