Install & Configuration - Tiptap V3 | Tiptap Table Plus

This guide covers installation and configuration for Tiptap V3 (recommended).

Installation

To install the package for Tiptap V3, use npm:

# Install latest version (defaults to TipTap v3)
npm install tiptap-table-plus

# Or explicitly install the tiptap-v3 tag
npm install tiptap-table-plus@tiptap-v3

Note: The latest tag (default) points to the TipTap v3 compatible version. Both versions are maintained and updated with each release.

Peer Dependencies

This package works with peer dependencies. For Tiptap V3, TipTap bundles table extensions into a single package:

npm install @tiptap/extension-table @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 { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
import { WithoutPagination } from 'tiptap-table-plus';

const { TableKitPlus } = WithoutPagination;

const editor = new Editor({
  extensions: [
    TableKitPlus
  ],
  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>',
});

Note for TipTap V3: TableKitPlus is a convenience extension that includes TableRowPlus, TableCellPlus, and TableHeaderPlus. You can use either TableKitPlus or import the individual extensions separately.

With Pagination

For pagination table support, use the TableKitPlus extension:

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

const editor = new Editor({
  extensions: [
    TableKitPlus, // TipTap v3 only - includes 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