table-kit.mdx

title	tags	meta	extension
TableKit extension	type src url label image https://img.shields.io/npm/v/@tiptap/extension-table/beta?label=version https://www.npmjs.com/package/@tiptap/extension-table Version type src url label image https://img.shields.io/npm/dm/@tiptap/extension-table.svg https://npmcharts.com/compare/@tiptap/extension-table?minimal=true Downloads	title description category TableKit extension | Tiptap Editor Docs All necessary table extensions in one extension with TableKit. Perfect for quickly setting up tables with Tiptap. More in the docs! Editor	name link description type icon TableKit https://github.com/ueberdosis/tiptap/tree/main/packages/extensions-table All necessary table extensions in one. It doesn’t get much better than this. extension Package

import { CodeDemo } from '@/components/CodeDemo'

The TableKit is a collection of all necessary Tiptap table extensions. If you quickly want to setup tables in Tiptap, this extension is for you.

Install

npm install @tiptap/extension-table

Included extensions

Nodes

• Table
• TableCell
• TableHeader
• TableRow

Source code

packages/extension-table/

Using the TableKit extension

Pass TableKit to the editor to load all included extension at once.

import { Editor } from '@tiptap/core'
import { TableKit } from '@tiptap/extension-table'

const editor = new Editor({
  extensions: [TableKit],
})

You can configure the included extensions, or even disable a few of them, like shown below.

import { Editor } from '@tiptap/core'
import { TableKit } from '@tiptap/extension-table'

const editor = new Editor({
  extensions: [
    TableKit.configure({
      // Disable an extension
      tableRow: false,

      // Configure an extension
      tableCell: {
        HTMLAttributes: { class: 'list-item' },
      },
    }),
  ],
})