Install & Configuration - Tiptap V2 | Tiptap Table Plus

This guide covers installation and configuration for Tiptap V2.

Installation

To install the package for Tiptap V2, use npm:

npm install tiptap-table-plus@tiptap-v2

Note: The tiptap-v2 tag ensures you get the version compatible with Tiptap V2. Both versions are maintained and updated with each release.

Peer Dependencies

This package works with peer dependencies. For Tiptap V2, you need to install separate packages for each table extension:

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

Note: Make sure you have these peer dependencies installed as they are required for the package to function properly. The package will not work without these Tiptap extensions and ProseMirror.

Configuration

Without Pagination

For basic table functionality without pagination, import and use the WithoutPagination extension:

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,
  ],
  content: '<table border="1"><tr><th colspan="1" rowspan="1"><p>Name</p></th><th colspan="1" rowspan="1"><p>Region</p></th><th colspan="1" rowspan="1"><p>Country</p></th></tr><tr><td colspan="1" rowspan="1"><p>Liberty Hays</p></td><td colspan="1" rowspan="1"><p>Araucanía</p></td><td colspan="1" rowspan="1"><p>Canada</p></td></tr></table>',
});

With Pagination

For pagination table support, import the table extensions directly from tiptap-pagination-plus:

import { Editor } from '@tiptap/core';
import {
  TablePlus, TableRowPlus, TableCellPlus, TableHeaderPlus
} from "tiptap-pagination-plus";
import { PaginationPlus } from "tiptap-pagination-plus";

const editor = new Editor({
  extensions: [
    TablePlus,
    TableRowPlus,
    TableCellPlus,
    TableHeaderPlus,
    PaginationPlus
  ],
  content: '<table border="1"><tr><th colspan="1" rowspan="1"><p>Name</p></th><th colspan="1" rowspan="1"><p>Region</p></th><th colspan="1" rowspan="1"><p>Country</p></th></tr><tr><td colspan="1" rowspan="1"><p>Liberty Hays</p></td><td colspan="1" rowspan="1"><p>Araucanía</p></td><td colspan="1" rowspan="1"><p>Canada</p></td></tr></table>',
});

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.

Links:

NPM
GitHub