Find out what's new in Tiptap Editor 3.0
Tiptap Docs

Using the TableKit extension with Pages

Restricted ReleaseAlpha

To add tables to your paginated editor, you should use the TableKit extension included in the Pages package. This ensures full compatibility with pagination as in order to properly split tables across the pages we needed to heavily modify the behavior and layout of tables.

1. Install the TableKit extension (included with Pages)

If you already have the Pages extension installed, you do not need to install a separate TableKit package. The compatible TableKit extension is included.

2. Import and add Table to your editor 

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { Pages, TableKit } from '@tiptap-pro/extension-pages'

const editor = new Editor({
  extensions: [
    StarterKit,
    Pages.configure({ /* ... */ }),
    TableKit,
  ],
})

Best practice

Always use the TableKit extension from @tiptap-pro/extension-pages when working with Pages. Do not use the open source TableKit extension, as it's not compatible with the layout generated by the Pages extension.

3. Table features

  • The exposed TableKit extension works and behaves exactly like the open-source one and can also be extended to make it fit your needs.
  • Tables will paginate correctly and export to DOCX with your document

Extending the Page's TableKit extension

Be careful when extending the TableKit extension exposed by the Pages package as it's layout its heavily modified and you can potentially break the table splitting logic.

4. Next steps