Tiptap Table Plus — Extension

Romik Makavana

2 min readSep 19, 2024

Duplicate Row/Column and more…
https://romikmakavana.me/tiptap

tiptap-table-plus is an npm package that extends the table functionality of the Tiptap editor by adding two new commands: duplicateColumn and duplicateRow.

Installation

To install the package, use npm:

npm install tiptap-table-plus

Peer Dependencies

This package works with peer dependencies and requires the following packages to be installed in your project:

npm install @tiptap/extension-table @tiptap/extension-table-cell @tiptap/extension-table-header @tiptap/extension-table-row @tiptap/pm

Commands

`duplicateColumn`

This command duplicates the current column. By default, it copies the content of the column as well.

editor.commands.duplicateColumn(true);

withContent (boolean):
If true, the content of the column will be copied. If false, only the structure will be duplicated. Default is true.

`duplicateRow`

This command duplicates the current row. By default, it copies the content of the row as well.

editor.commands.duplicateRow(true);

withContent (boolean):
If true, the content of the row will be copied. If false, only the structure will be duplicated. Default is true.

Example

Here is an example of how to use these commands in your Tiptap editor setup:

import { Editor } from '@tiptap/core';
import TableRow from '@tiptap/extension-table-row';
import TableCell from '@tiptap/extension-table-cell';
import TableHeader from '@tiptap/extension-table-header';
import TiptapTablePlus from 'tiptap-table-plus';
const editor = new Editor({
  extensions: [
    TableRow,
    TableCell,
    TableHeader,
    TiptapTablePlus,
  ],
  content: '<p>Hello World!</p>',
});
// Duplicate the current column with content
editor.commands.duplicateColumn(false);
// Duplicate the current row without content
editor.commands.duplicateRow(false);

License

This package is open-sourced software licensed under the MIT license.

Tiptap Table Plus — Extension

Demo :

Documentation :

Code :