Table With Pagination

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

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.

Components

PaginationTable

A comprehensive extension that includes all pagination table extensions: After importing the Pagination Table extension you need to ungroup and use those extensions:

import { PaginationTable } from 'tiptap-table-plus';
const {
  TablePlus, TableRowPlus, TableCellPlus, TableHeaderPlus
} = PaginationTable;

Usage with Pagination

Here’s how to set up the pagination table extension:

import { Editor } from '@tiptap/core';
import { PaginationTable } from 'tiptap-table-plus';
import { PaginationPlus } from "tiptap-pagination-plus";

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

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

Example

Links:

• NPM
• GitHub