tiptap/docs/src/docPages/api/nodes/table.md

59 lines
4.0 KiB
Markdown
Raw Normal View History

2020-12-02 17:53:30 +08:00
# Table
2021-01-25 19:04:08 +08:00
[![Version](https://img.shields.io/npm/v/@tiptap/extension-table.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-table)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-table.svg)](https://npmcharts.com/compare/@tiptap/extension-table?minimal=true)
2020-12-02 17:53:30 +08:00
2021-02-09 00:39:50 +08:00
Nothing is as much fun as a good old HTML table. The `Table` extension enables you to add this holy grail of WYSIWYG editing to your editor.
Dont forget to add a `spacer.gif`. (Just joking. If you dont know what that is, dont listen.)
2021-01-25 19:04:08 +08:00
## Installation
```bash
# with npm
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
# with Yarn
yarn add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
```
2021-02-12 22:02:40 +08:00
This extension requires the [`TableRow`](/api/nodes/table-row), [`TableHeader`](/api/nodes/table-header) and [`TableCell`](/api/nodes/table-cell) nodes.
2021-01-25 19:04:08 +08:00
## Settings
| Option | Type | Default | Description |
| ----------------------- | --------- | ----------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
| resizable | `Boolean` | `false` | |
| handleWidth | `Number` | `5` | |
| cellMinWidth | `Number` | `25` | |
| View | `View` | `TableView` | |
| lastColumnResizable | `Boolean` | `true` | |
| allowTableNodeSelection | `Boolean` | `false` | |
## Commands
| Command | Parameters | Description |
| ------------------ | ---------------------------------------------- | ----------- |
| insertTable | `{ rows = 3, cols = 3, withHeaderRow = true }` | |
| addColumnBefore | | |
| addColumnAfter | | |
| deleteColumn | | |
| addRowBefore | | |
| addRowAfter | | |
| deleteRow | | |
| deleteTable | | |
| mergeCells | | |
| splitCell | | |
| toggleHeaderColumn | | |
| toggleHeaderRow | | |
| toggleHeaderCell | | |
| mergeOrSplit | | |
| setCellAttribute | `name`, `value` | |
| goToNextCell | | |
| goToPreviousCell | | |
| fixTables | | |
2021-01-21 06:42:01 +08:00
2021-01-25 19:04:08 +08:00
## Source code
[packages/extension-table/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table/)
2021-01-21 06:42:01 +08:00
2021-01-25 19:04:08 +08:00
## Usage
2021-01-21 06:42:01 +08:00
<demo name="Nodes/Table" />