Tiptap Docs

Tables

Table extensions add tables to the editor, with commands to add and delete rows and columns, merge and split cells, and set header cells.

Table kit
The table extensions in one: table, row, header, and cell.
Open source
Table
Tables with resizable columns, merged cells, and header rows.
Open source
Table cell
The cell of a table row.
Open source
Table header
A header cell of a table.
Open source
Table row
The row of a table.
Open source

When you use them

  • Data in rows and columns. Table inserts a table, three by three with a header row by default, and adds or deletes rows and columns.
  • Headers. Table header adds header cells. Commands turn the current row, column, or cell into a header.
  • Merged cells. Table merges the selected cells into one and splits a merged cell again.
  • Cell attributes. setCellAttribute() sets an attribute you defined on Table cell, for example a background color.

How they work

  • A table is four nodes. Table holds Table rows, and each row holds Table cells and Table headers. Table cell, Table header, and Table row each require Table. Nodes and marks
  • The Table kit bundles them. The Table kit holds Table, Table cell, Table header, and Table row. Tables aren't part of the StarterKit.
  • Commands do the editing. Table's commands, such as addRowAfter() and mergeCells(), change the table, and goToNextCell() and goToPreviousCell() move between cells.
  • Headers are optional. To allow no headers, change the content of Table row so it holds only cells.
PreviouslyTask list