Table

Introduction

Version Downloads

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

# 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, TableHeader and TableCell nodes.

Settings

HTMLAttributes

Custom HTML attributes that should be added to the rendered HTML tag.

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

editor.commands.insertTable()
editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true })

addColumnBefore()

Adds a column before the current column.

editor.commands.addColumnBefore()

addColumnAfter()

Adds a column after the current column.

editor.commands.addColumnAfter()

deleteColumn()

Deletes the current column.

editor.commands.deleteColumn()

addRowBefore()

Adds a row above the current row.

editor.commands.addRowBefore()

addRowAfter()

Adds a row below the current row.

editor.commands.addRowAfter()

deleteRow()

Deletes the current row.

editor.commands.deleteRow()

deleteTable()

Deletes the whole table.

editor.commands.deleteTable()

mergeCells()

Merge all selected cells to a single cell.

editor.commands.mergeCells()

splitCell()

Splits the current cell.

editor.commands.splitCell()

toggleHeaderColumn()

Makes the current column a header column.

editor.commands.toggleHeaderColumn()

toggleHeaderRow()

Makes the current row a header row.

editor.commands.toggleHeaderRow()

toggleHeaderCell()

Makes the current cell a header cell.

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.

editor.commands.mergeOrSplit()

setCellAttribute()

Sets the given attribute for the current cell. Can be whatever you define on the TableCell extension, for example a background color. Just make sure to register your custom attribute first.

editor.commands.setCellAttribute('customAttribute', 'value')
editor.commands.setCellAttribute('backgroundColor', '#000')

goToNextCell()

Go the next cell.

editor.commands.goToNextCell()

goToPreviousCell()

Go to the previous cell.

editor.commands.goToPreviousCell()

fixTables()

Inspects all tables in the document and fixes them, if necessary.

editor.commands.fixTables()

Source code

packages/extension-table/

Usage