Table Kit

Features

• Enables creation and editing of tables with advanced behaviors.
• Arrow navigation (up/down).
• Grid cell selection.
• Cell selection expansion with Shift+Arrow keys.
• Copying and pasting cells.
• Row drag-and-drop reordering
• Row selection via drag handle

Usage

Installation

The fastest way to add table functionality is with the TableKit, which includes pre-configured TablePlugin, TableRowPlugin, TableCellPlugin, and TableCellHeaderPlugin with their Plate UI components.

• TableElement: Renders table containers.
• TableRowElement: Renders table rows.
• TableCellElement: Renders table cells.
• TableCellHeaderElement: Renders table header cells.

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from "platejs/react";
import { TableKit } from "@/components/editor/plugins/table-kit";

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...TableKit,
  ],
});