> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/ueberdosis/tiptap/llms.txt
> Use this file to discover all available pages before exploring further.

# Table

> Create and manage tables with support for cell merging, resizing, and header rows.

The Table extension allows you to create tables with advanced features like cell merging, column resizing, and header rows. It requires the TableRow, TableCell, and TableHeader extensions to function.

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-cell @tiptap/extension-table-header
  ```

  ```bash yarn theme={null}
  yarn add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-cell @tiptap/extension-table-header
  ```

  ```bash pnpm theme={null}
  pnpm add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-cell @tiptap/extension-table-header
  ```
</CodeGroup>

## Usage

```typescript theme={null}
import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Table from '@tiptap/extension-table'
import TableRow from '@tiptap/extension-table-row'
import TableCell from '@tiptap/extension-table-cell'
import TableHeader from '@tiptap/extension-table-header'

const editor = new Editor({
  extensions: [
    Document,
    Paragraph,
    Text,
    Table,
    TableRow,
    TableCell,
    TableHeader,
  ],
})
```

## Configuration

### HTMLAttributes

Custom HTML attributes to add to the table element.

<ParamField path="HTMLAttributes" type="Record<string, any>" default="{}">
  Custom HTML attributes that should be added to the rendered HTML tag.

  ```typescript theme={null}
  Table.configure({
    HTMLAttributes: {
      class: 'my-table',
    },
  })
  ```
</ParamField>

### resizable

Enables column resizing for tables.

<ParamField path="resizable" type="boolean" default="false">
  When enabled, users can resize table columns by dragging column borders.

  ```typescript theme={null}
  Table.configure({
    resizable: true,
  })
  ```
</ParamField>

### renderWrapper

Controls whether the table should be wrapped in a div.

<ParamField path="renderWrapper" type="boolean" default="false">
  Wraps the table in a div with class "tableWrapper" when rendered.

  ```typescript theme={null}
  Table.configure({
    renderWrapper: true,
  })
  ```
</ParamField>

### handleWidth

The width of the resize handle.

<ParamField path="handleWidth" type="number" default="5">
  Width in pixels of the column resize handle.

  ```typescript theme={null}
  Table.configure({
    resizable: true,
    handleWidth: 10,
  })
  ```
</ParamField>

### cellMinWidth

The minimum width of a cell.

<ParamField path="cellMinWidth" type="number" default="25">
  Minimum width in pixels that a table cell can be resized to.

  ```typescript theme={null}
  Table.configure({
    resizable: true,
    cellMinWidth: 50,
  })
  ```
</ParamField>

### lastColumnResizable

Enables resizing of the last column.

<ParamField path="lastColumnResizable" type="boolean" default="true">
  When false, the last column cannot be resized.

  ```typescript theme={null}
  Table.configure({
    resizable: true,
    lastColumnResizable: false,
  })
  ```
</ParamField>

### allowTableNodeSelection

Allow table node selection.

<ParamField path="allowTableNodeSelection" type="boolean" default="false">
  When enabled, users can select the entire table as a node.

  ```typescript theme={null}
  Table.configure({
    allowTableNodeSelection: true,
  })
  ```
</ParamField>

## Commands

### insertTable

Inserts a new table with the specified dimensions.

```typescript theme={null}
editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true })

// Without header row
editor.commands.insertTable({ rows: 4, cols: 4, withHeaderRow: false })
```

### addColumnBefore

Adds a column before the current column.

```typescript theme={null}
editor.commands.addColumnBefore()
```

### addColumnAfter

Adds a column after the current column.

```typescript theme={null}
editor.commands.addColumnAfter()
```

### deleteColumn

Deletes the current column.

```typescript theme={null}
editor.commands.deleteColumn()
```

### addRowBefore

Adds a row before the current row.

```typescript theme={null}
editor.commands.addRowBefore()
```

### addRowAfter

Adds a row after the current row.

```typescript theme={null}
editor.commands.addRowAfter()
```

### deleteRow

Deletes the current row.

```typescript theme={null}
editor.commands.deleteRow()
```

### deleteTable

Deletes the entire table.

```typescript theme={null}
editor.commands.deleteTable()
```

### mergeCells

Merges the currently selected cells.

```typescript theme={null}
editor.commands.mergeCells()
```

### splitCell

Splits the currently selected cell.

```typescript theme={null}
editor.commands.splitCell()
```

### toggleHeaderColumn

Toggles the header status of the current column.

```typescript theme={null}
editor.commands.toggleHeaderColumn()
```

### toggleHeaderRow

Toggles the header status of the current row.

```typescript theme={null}
editor.commands.toggleHeaderRow()
```

### toggleHeaderCell

Toggles the header status of the current cell.

```typescript theme={null}
editor.commands.toggleHeaderCell()
```

### mergeOrSplit

Merges selected cells or splits the current cell.

```typescript theme={null}
editor.commands.mergeOrSplit()
```

### setCellAttribute

Sets an attribute on the current cell.

```typescript theme={null}
editor.commands.setCellAttribute('backgroundColor', '#ff0000')
editor.commands.setCellAttribute('align', 'right')
```

### goToNextCell

Moves the selection to the next cell.

```typescript theme={null}
editor.commands.goToNextCell()
```

### goToPreviousCell

Moves the selection to the previous cell.

```typescript theme={null}
editor.commands.goToPreviousCell()
```

### fixTables

Attempts to fix the table structure if necessary.

```typescript theme={null}
editor.commands.fixTables()
```

### setCellSelection

Sets a cell selection inside the current table.

```typescript theme={null}
editor.commands.setCellSelection({ anchorCell: 1, headCell: 5 })
```

## Keyboard Shortcuts

* **Tab**: Move to the next cell (creates a new row if at the end)
* **Shift-Tab**: Move to the previous cell
* **Backspace**: Delete table when all cells are selected
* **Mod-Backspace**: Delete table when all cells are selected
* **Delete**: Delete table when all cells are selected
* **Mod-Delete**: Delete table when all cells are selected

## Examples

### Basic Table

```typescript theme={null}
// Insert a 3x3 table with header row
editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
```

### Resizable Table

```typescript theme={null}
const editor = new Editor({
  extensions: [
    // other extensions...
    Table.configure({
      resizable: true,
      cellMinWidth: 50,
    }),
    TableRow,
    TableCell,
    TableHeader,
  ],
})
```

### Manipulating Tables

```typescript theme={null}
// Add a row after the current row
editor.commands.addRowAfter()

// Add a column before the current column
editor.commands.addColumnBefore()

// Merge selected cells
editor.commands.mergeCells()

// Delete the current row
editor.commands.deleteRow()
```

## Related Extensions

The Table extension requires these companion extensions:

* **TableRow** - Defines table rows (tr elements)
* **TableCell** - Defines regular table cells (td elements)
* **TableHeader** - Defines header cells (th elements)

All four extensions must be registered together for tables to work properly.

## Source Code

View the source code on GitHub:

[packages/extension-table/src/table/table.ts](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/src/table/table.ts)