Tiptap Docs

Using the TableKit extension with Pages

Alpha

To add tables to your paginated editor, you should use the TableKit extension from the @tiptap-pro/extension-pages-tablekit 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

The Pages-compatible TableKit extension is available as a separate package.

npm install @tiptap-pro/extension-pages-tablekit

2. Import and add Table to your editor 

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

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

Best practice

Always use the TableKit extension from @tiptap-pro/extension-pages-tablekit 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 from @tiptap-pro/extension-pages-tablekit as its layout is heavily modified and you can potentially break the table splitting logic.

4. Next steps

PreviouslyFrom zero to print-ready