mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-21 15:28:09 +08:00
194 lines
3.9 KiB
Markdown
194 lines
3.9 KiB
Markdown
---
|
||
description: You’re working on something really serious if you need tables inside a text editor.
|
||
icon: table-line
|
||
tableOfContents: true
|
||
---
|
||
|
||
# Table
|
||
|
||
## Introduction
|
||
[](https://www.npmjs.com/package/@tiptap/extension-table)
|
||
[](https://npmcharts.com/compare/@tiptap/extension-table?minimal=true)
|
||
|
||
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.)
|
||
|
||
## 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
|
||
```
|
||
|
||
This extension requires the [`TableRow`](/api/nodes/table-row), [`TableHeader`](/api/nodes/table-header) and [`TableCell`](/api/nodes/table-cell) nodes.
|
||
|
||
## Settings
|
||
|
||
### HTMLAttributes
|
||
Custom HTML attributes that should be added to the rendered HTML tag.
|
||
|
||
```js
|
||
Table.configure({
|
||
HTMLAttributes: {
|
||
class: 'my-custom-class',
|
||
},
|
||
})
|
||
```
|
||
|
||
### resizable
|
||
Default: `false`
|
||
|
||
### handleWidth
|
||
Default: `5`
|
||
|
||
### cellMinWidth
|
||
Default: `25`
|
||
|
||
### View
|
||
Default: `TableView`
|
||
|
||
### lastColumnResizable
|
||
Default: `true`
|
||
|
||
### allowTableNodeSelection
|
||
Default: `false`
|
||
|
||
## Commands
|
||
|
||
### insertTable()
|
||
Creates a new table, with the specified number of rows and columns, and with a header row (if you tell it to).
|
||
|
||
```js
|
||
editor.commands.insertTable()
|
||
editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
|
||
```
|
||
|
||
### addColumnBefore()
|
||
Adds a column before the current column.
|
||
|
||
```js
|
||
editor.commands.addColumnBefore()
|
||
```
|
||
|
||
### addColumnAfter()
|
||
Adds a column after the current column.
|
||
|
||
```js
|
||
editor.commands.addColumnAfter()
|
||
```
|
||
|
||
### deleteColumn()
|
||
Deletes the current column.
|
||
|
||
```js
|
||
editor.commands.deleteColumn()
|
||
```
|
||
|
||
### addRowBefore()
|
||
Adds a row above the current row.
|
||
|
||
```js
|
||
editor.commands.addRowBefore()
|
||
```
|
||
|
||
### addRowAfter()
|
||
Adds a row below the current row.
|
||
|
||
```js
|
||
editor.commands.addRowAfter()
|
||
```
|
||
|
||
### deleteRow()
|
||
Deletes the current row.
|
||
|
||
```js
|
||
editor.commands.deleteRow()
|
||
```
|
||
|
||
### deleteTable()
|
||
Deletes the whole table.
|
||
|
||
```js
|
||
editor.commands.deleteTable()
|
||
```
|
||
|
||
### mergeCells()
|
||
Merge all selected cells to a single cell.
|
||
|
||
```js
|
||
editor.commands.mergeCells()
|
||
```
|
||
|
||
### splitCell()
|
||
Splits the current cell.
|
||
|
||
```js
|
||
editor.commands.splitCell()
|
||
```
|
||
|
||
### toggleHeaderColumn()
|
||
Makes the current column a header column.
|
||
|
||
```js
|
||
editor.commands.toggleHeaderColumn()
|
||
```
|
||
|
||
### toggleHeaderRow()
|
||
Makes the current row a header row.
|
||
|
||
```js
|
||
editor.commands.toggleHeaderRow()
|
||
```
|
||
|
||
### toggleHeaderCell()
|
||
Makes the current cell a header cell.
|
||
|
||
```js
|
||
editor.commands.toggleHeaderCell()
|
||
```
|
||
|
||
### mergeOrSplit()
|
||
If multiple cells are selected, they are merged. If a single cell is selected, the cell is splitted into two cells.
|
||
|
||
```js
|
||
editor.commands.mergeOrSplit()
|
||
```
|
||
|
||
### setCellAttribute()
|
||
Sets the given attribute for the current cell. Can be whatever you define on the [`TableCell`](/api/nodes/table-cell) extension, for example a background color. Just make sure to register [your custom attribute](/guide/custom-extensions#attributes) first.
|
||
|
||
```js
|
||
editor.commands.setCellAttribute('customAttribute', 'value')
|
||
editor.commands.setCellAttribute('backgroundColor', '#000')
|
||
```
|
||
|
||
### goToNextCell()
|
||
Go the next cell.
|
||
|
||
```js
|
||
editor.commands.goToNextCell()
|
||
```
|
||
|
||
### goToPreviousCell()
|
||
Go to the previous cell.
|
||
|
||
```js
|
||
editor.commands.goToPreviousCell()
|
||
```
|
||
|
||
### fixTables()
|
||
Inspects all tables in the document and fixes them, if necessary.
|
||
|
||
```js
|
||
editor.commands.fixTables()
|
||
```
|
||
|
||
## Source code
|
||
[packages/extension-table/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/)
|
||
|
||
## Usage
|
||
<tiptap-demo name="Nodes/Table"></tiptap-demo>
|