Plate editor plugin kit that registers static, server-safe table, row, cell, and header-cell components for read-only rendering.
"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>
);
}