Table Base Kit

Component

About

Plate editor plugin kit that registers static, server-safe table, row, cell, and header-cell components for read-only rendering.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Table Base Kit to your project and fits it to your theme.

Code

How Table Base Kit is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { BaseTableKit } from "@/components/ui/table-base-kit";
import { createSlateEditor } from "platejs";
import { PlateStatic } from "platejs/static";

const value = [
  {
    type: "table",
    children: [
      {
        type: "tr",
        children: [
          {
            type: "th",
            children: [{ type: "p", children: [{ text: "Plugin" }] }],
          },
          {
            type: "th",
            children: [{ type: "p", children: [{ text: "Description" }] }],
          },
        ],
      },
      {
        type: "tr",
        children: [
          {
            type: "td",
            children: [{ type: "p", children: [{ text: "Table" }] }],
          },
          {
            type: "td",
            children: [
              {
                type: "p",
                children: [{ text: "Static, server-safe table rendering." }],
              },
            ],
          },
        ],
      },
      {
        type: "tr",
        children: [
          {
            type: "td",
            children: [{ type: "p", children: [{ text: "Row & Cell" }] }],
          },
          {
            type: "td",
            children: [
              {
                type: "p",
                children: [{ text: "Renders as read-only rows and cells." }],
              },
            ],
          },
        ],
      },
    ],
  },
];

export default function TableBaseKitDemo() {
  const editor = createSlateEditor({
    plugins: BaseTableKit,
    value,
  });

  return (
    <div className="p-6">
      <PlateStatic editor={editor} />
    </div>
  );
}