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 Pages stack

Tables, ConvertKit (the editor's schema), and Pages itself ship as separate packages. Install all three:

npm install @tiptap-pro/extension-convert-kit \
            @tiptap-pro/extension-pages-tablekit \
            @tiptap-pro/extension-pages

2. Add ConvertKit, TableKit, and Pages to your editor 

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

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

Why ConvertKit's tables are disabled

ConvertKit ships its own table stack (DOCX-aware, but not pagination-safe). PagesTableKit's TableKit is the pagination-safe replacement and accepts the same DOCX cell attributes that ConvertKit's tables would. Disable one, register the other.

Best practice

Always use the TableKit extension from @tiptap-pro/extension-pages-tablekit when working with Pages. Do not use the open-source @tiptap/extension-table or ConvertKit's built-in tables — neither is compatible with the layout the Pages extension produces.

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