Table

• Introduction
• Installation
• Settings
  • HTMLAttributes
  • resizable
  • handleWidth
  • cellMinWidth
  • View
  • lastColumnResizable
  • allowTableNodeSelection
• Commands
  • insertTable()
  • addColumnBefore()
  • addColumnAfter()
  • deleteColumn()
  • addRowBefore()
  • addRowAfter()
  • deleteRow()
  • deleteTable()
  • mergeCells()
  • splitCell()
  • toggleHeaderColumn()
  • toggleHeaderRow()
  • toggleHeaderCell()
  • mergeOrSplit()
  • setCellAttribute()
  • goToNextCell()
  • goToPreviousCell()
  • fixTables()
• Source code
• Usage

#Introduction

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

npm install @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