Table With Pagination | Tiptap Table Plus

The package now includes advanced pagination table support with automatic row grouping based on rowspan logic. This feature automatically organizes table rows into logical groups for better pagination and display.

Features

• Automatic Row Grouping: Intelligently groups table rows based on rowspan attributes
• Enhanced Table Structure: Supports both direct table rows and grouped table rows
• Smart Pagination: Automatically handles complex table layouts with merged cells
• CSS Custom Properties: Provides CSS variables for styling and layout control
• Column Resize Support – Allows users to interactively adjust column widths for better readability

How It Works

The pagination system automatically:

1. Analyzes Table Structure: Examines rowspan attributes and table layout
2. Groups Related Rows: Creates logical groups based on merged cells
3. Optimizes Pagination: Ensures related content stays together across page breaks
4. Maintains Consistency: Automatically updates grouping when table structure changes

You can now use all the advanced table features in your editor.

Usage with Pagination

Here’s how to set up the pagination table extension for both Tiptap V2 and V3:

Tiptap V3

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>',
});

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.

Tiptap V2

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>',
});

Note for TipTap V2: When using pagination, import the table extensions (TablePlus, TableRowPlus, TableCellPlus, TableHeaderPlus) directly from tiptap-pagination-plus, not from tiptap-table-plus.

Example

Links:

• NPM
• GitHub