Table extension
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.)
Install
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()