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.
Don’ t forget to add a `spacer.gif` . (Just joking. If you don’ t know what that is, don’ t 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" / >