Commands | Tiptap Table Plus

The Table Plus extension provides commands to duplicate rows and columns in your Tiptap editor. These commands work the same way for both Tiptap V2 and V3, but the import and setup differ between versions.

Available Commands

Command	Parameters	Default	Description
duplicateColumn	withContent (boolean)	true	Duplicates the current column. If true, copies column content; if false, only duplicates the structure.
duplicateRow	withContent (boolean)	true	Duplicates the current row. If true, copies row content; if false, only duplicates the structure.

Usage Examples

Tiptap V3

import { Editor } from '@tiptap/core';
import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
import { WithoutPagination } from 'tiptap-table-plus';

const { TableKitPlus } = WithoutPagination;

const editor = new Editor({
extensions: [
  TableKitPlus
],
});

// Duplicate current column with content
editor.chain().focus().duplicateColumn().run();

// Duplicate current column without content (structure only)
editor.chain().focus().duplicateColumn(false).run();

// Duplicate current row with content
editor.chain().focus().duplicateRow().run();

// Duplicate current row without content (structure only)
editor.chain().focus().duplicateRow(false).run();

Tiptap V2

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 { WithoutPagination } from 'tiptap-table-plus';

const { TablePlus, TableRowPlus, TableCellPlus, TableHeaderPlus } = WithoutPagination;

const editor = new Editor({
extensions: [
  TablePlus,
  TableRowPlus,
  TableCellPlus,
  TableHeaderPlus,
],
});

// Duplicate current column with content
editor.chain().focus().duplicateColumn().run();

// Duplicate current column without content (structure only)
editor.chain().focus().duplicateColumn(false).run();

// Duplicate current row with content
editor.chain().focus().duplicateRow().run();

// Duplicate current row without content (structure only)
editor.chain().focus().duplicateRow(false).run();

Command Details

duplicateColumn

Duplicates the column containing the current selection. This command is useful for quickly creating similar column structures in your tables.

Parameters:

• withContent (boolean, optional):
  • true (default): Copies both the column structure and all cell content
  • false: Only duplicates the column structure, leaving cells empty

Example:

// Duplicate column with all content
editor.chain().focus().duplicateColumn().run();

// Duplicate column structure only (empty cells)
editor.chain().focus().duplicateColumn(false).run();

duplicateRow

Duplicates the row containing the current selection. This command helps you quickly replicate row structures and content.

Parameters:

• withContent (boolean, optional):
  • true (default): Copies both the row structure and all cell content
  • false: Only duplicates the row structure, leaving cells empty

Example:

// Duplicate row with all content
editor.chain().focus().duplicateRow().run();

// Duplicate row structure only (empty cells)
editor.chain().focus().duplicateRow(false).run();

Integration with Menu Systems

These commands can be easily integrated into custom menu systems or toolbar buttons:

Tiptap V3

// React example
import { useEditor } from '@tiptap/react';
import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
import { WithoutPagination } from 'tiptap-table-plus';

const { TableKitPlus } = WithoutPagination;

const editor = useEditor({
extensions: [TableKitPlus],
});

// Button handlers
const handleDuplicateColumn = () => {
editor?.chain().focus().duplicateColumn().run();
};

const handleDuplicateRow = () => {
editor?.chain().focus().duplicateRow().run();
};

Tiptap V2

// React example
import { useEditor } from '@tiptap/react';
import TableRow from '@tiptap/extension-table-row';
import TableCell from '@tiptap/extension-table-cell';
import TableHeader from '@tiptap/extension-table-header';
import { WithoutPagination } from 'tiptap-table-plus';

const { TablePlus, TableRowPlus, TableCellPlus, TableHeaderPlus } = WithoutPagination;

const editor = useEditor({
extensions: [
  TablePlus,
  TableRowPlus,
  TableCellPlus,
  TableHeaderPlus,
],
});

// Button handlers
const handleDuplicateColumn = () => {
editor?.chain().focus().duplicateColumn().run();
};

const handleDuplicateRow = () => {
editor?.chain().focus().duplicateRow().run();
};

Notes

• Both commands require the cursor to be positioned within a table cell
• The commands preserve cell formatting, attributes (colspan, rowspan), and structure
• When withContent is true, all cell content including nested elements is copied
• The duplicated column/row is inserted immediately after the original

Links:

• NPM
• GitHub