Tiptap Table duplicate row or column

2 min readSep 18, 2024

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.

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

editor.commands.duplicateColumn(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 Table from '@tiptap/extension-table';
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: [
    Table,
    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);

Thank you

Tiptap Table duplicate row or column

Demo :

Documentation :

Code :