---
title: "Table extension"
description: "Use the Table extension in Tiptap to add tables to your documents with a range of customization options. Learn more in our docs!"
canonical_url: "https://tiptap.dev/docs/editor/extensions/nodes/table"
---

# Table extension

Use the Table extension in Tiptap to add tables to your documents with a range of customization options. Learn more in our docs!

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.)

> **Interactive demo:** [Table](https://embed.tiptap.dev/preview/Nodes/Table)

## Install

```bash
npm install @tiptap/extension-table
```

This extension is installed by default with the `TableKit` extension, so you don’t need to install it separately.

```ts
import { Editor } from '@tiptap/core'
import { TableKit } from '@tiptap/extension-table'

new Editor({
  extensions: [TableKit],
})
```

## 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`

### renderWrapper

Controls whether a wrapper `<div>` is rendered around the table when the table is not resizable or the editor is not editable, maintaining layout consistency with the node view used for resizable tables.

Default: `false`

### handleWidth

Default: `5`

### cellMinWidth

Default: `25`

### View

Default: `TableView`

### lastColumnResizable

Default: `true`

### allowTableNodeSelection

Default: `false`

## Commands

### insertTable()

Creates a new three-by-three table by default, including a header row. You can specify custom rows, columns, and header preferences:

```js
editor.commands.insertTable()
editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: false })
```

### 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`](https://tiptap.dev/docs/editor/extensions/nodes/table-cell.md) extension, for example a background color. Just make sure to register [your custom attribute](https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing.md#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/)

## Minimal Install

```js
import { Editor } from '@tiptap/core'
import { Table } from '@tiptap/extension-table/table'

new Editor({
  extensions: [Table],
})
```