feat(tables): overhaul table cells

examples/03-ui-components/15-advanced-tables/.bnexample.json

@@ -0,0 +1,6 @@
+{
+  "playground": true,
+  "docs": true,
+  "author": "nperez0111",
+  "tags": ["Intermediate", "UI Components", "Tables", "Appearance & Styling"]
+}

examples/03-ui-components/15-advanced-tables/App.tsx

@@ -0,0 +1,305 @@
+import "@blocknote/core/fonts/inter.css";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    // This enables the advanced table features
+    tables: {
+      splitCells: true,
+      cellBackgroundColor: true,
+      cellTextColor: true,
+      headers: true,
+    },
+    initialContent: [
+      {
+        id: "7e498b3d-d42e-4ade-9be0-054b292715ea",
+        type: "heading",
+        props: {
+          textColor: "default",
+          backgroundColor: "default",
+          textAlignment: "left",
+          level: 2,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Advanced Tables",
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+      {
+        id: "cbf287c6-770b-413a-bff5-ad490a0b562a",
+        type: "table",
+        props: {
+          textColor: "default",
+        },
+        content: {
+          type: "tableContent",
+          columnWidths: [199, 148, 201],
+          headerRows: 1,
+          rows: [
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  content: [
+                    {
+                      type: "text",
+                      text: "This row has headers",
+                      styles: {},
+                    },
+                  ],
+                  props: {
+                    colspan: 1,
+                    rowspan: 1,
+                    backgroundColor: "default",
+                    textColor: "default",
+                    textAlignment: "center",
+                  },
+                },
+                {
+                  type: "tableCell",
+                  content: [
+                    {
+                      type: "text",
+                      text: "This is ",
+                      styles: {},
+                    },
+                    {
+                      type: "text",
+                      text: "RED",
+                      styles: {
+                        bold: true,
+                      },
+                    },
+                  ],
+                  props: {
+                    colspan: 1,
+                    rowspan: 1,
+                    backgroundColor: "red",
+                    textColor: "default",
+                    textAlignment: "center",
+                  },
+                },
+                {
+                  type: "tableCell",
+                  content: [
+                    {
+                      type: "text",
+                      text: "Text is Blue",
+                      styles: {},
+                    },
+                  ],
+                  props: {
+                    colspan: 1,
+                    rowspan: 1,
+                    backgroundColor: "default",
+                    textColor: "blue",
+                    textAlignment: "center",
+                  },
+                },
+              ],
+            },
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  content: [
+                    {
+                      type: "text",
+                      text: "This spans 2 columns\nand 2 rows",
+                      styles: {},
+                    },
+                  ],
+                  props: {
+                    colspan: 2,
+                    rowspan: 2,
+                    backgroundColor: "yellow",
+                    textColor: "default",
+                    textAlignment: "left",
+                  },
+                },
+                {
+                  type: "tableCell",
+                  content: [
+                    {
+                      type: "text",
+                      text: "Sooo many features",
+                      styles: {},
+                    },
+                  ],
+                  props: {
+                    colspan: 1,
+                    rowspan: 1,
+                    backgroundColor: "gray",
+                    textColor: "default",
+                    textAlignment: "left",
+                  },
+                },
+              ],
+            },
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  content: [],
+                  props: {
+                    colspan: 1,
+                    rowspan: 1,
+                    backgroundColor: "gray",
+                    textColor: "purple",
+                    textAlignment: "left",
+                  },
+                },
+              ],
+            },
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  content: [
+                    {
+                      type: "text",
+                      text: "A cell",
+                      styles: {},
+                    },
+                  ],
+                  props: {
+                    colspan: 1,
+                    rowspan: 1,
+                    backgroundColor: "default",
+                    textColor: "default",
+                    textAlignment: "left",
+                  },
+                },
+                {
+                  type: "tableCell",
+                  content: [
+                    {
+                      type: "text",
+                      text: "Another Cell",
+                      styles: {},
+                    },
+                  ],
+                  props: {
+                    colspan: 1,
+                    rowspan: 1,
+                    backgroundColor: "default",
+                    textColor: "default",
+                    textAlignment: "right",
+                  },
+                },
+                {
+                  type: "tableCell",
+                  content: [
+                    {
+                      type: "text",
+                      text: "Aligned center",
+                      styles: {},
+                    },
+                  ],
+                  props: {
+                    colspan: 1,
+                    rowspan: 1,
+                    backgroundColor: "default",
+                    textColor: "default",
+                    textAlignment: "center",
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        children: [],
+      },
+      {
+        id: "16e76a94-74e5-42e2-b461-fc9da9f381f7",
+        type: "paragraph",
+        props: {
+          textColor: "default",
+          backgroundColor: "default",
+          textAlignment: "left",
+        },
+        content: [
+          {
+            type: "text",
+            text: "Featuring:",
+            styles: {},
+          },
+        ],
+        children: [
+          {
+            id: "785fc9f7-8554-47f4-a4df-8fe2f1438cac",
+            type: "bulletListItem",
+            props: {
+              textColor: "default",
+              backgroundColor: "default",
+              textAlignment: "left",
+            },
+            content: [
+              {
+                type: "text",
+                text: "Cell background & foreground coloring",
+                styles: {},
+              },
+            ],
+            children: [],
+          },
+          {
+            id: "1d0adf08-1b42-421a-b9ea-b3125dcc96d9",
+            type: "bulletListItem",
+            props: {
+              textColor: "default",
+              backgroundColor: "default",
+              textAlignment: "left",
+            },
+            content: [
+              {
+                type: "text",
+                text: "Splitting & merging cells",
+                styles: {},
+              },
+            ],
+            children: [],
+          },
+          {
+            id: "99991aa7-9d86-4d06-9073-b1a9c0329062",
+            type: "bulletListItem",
+            props: {
+              textColor: "default",
+              backgroundColor: "default",
+              textAlignment: "left",
+            },
+            content: [
+              {
+                type: "text",
+                text: "Header row & column",
+                styles: {},
+              },
+            ],
+            children: [],
+          },
+        ],
+      },
+      {
+        id: "c7bf2a7c-8972-44f1-acd8-cf60fa734068",
+        type: "paragraph",
+        props: {
+          textColor: "default",
+          backgroundColor: "default",
+          textAlignment: "left",
+        },
+        content: [],
+        children: [],
+      },
+    ],
+  });
+
+  // Renders the editor instance using a React component.
+  return <BlockNoteView editor={editor}></BlockNoteView>;
+}

examples/03-ui-components/15-advanced-tables/README.md

@@ -0,0 +1,13 @@
+# Advanced Tables
+
+This example enables the following features in tables:
+
+- Split cells
+- Cell background color
+- Cell text color
+- Table row and column headers
+
+**Relevant Docs:**
+
+- [Tables](/docs/editor-basics/tables)
+- [Editor Setup](/docs/editor-basics/setup)

examples/03-ui-components/15-advanced-tables/index.html

@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Advanced Tables</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

examples/03-ui-components/15-advanced-tables/main.tsx

@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

examples/03-ui-components/15-advanced-tables/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@blocknote/example-advanced-tables",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.12.4",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "latest",
+    "@blocknote/react": "latest",
+    "@blocknote/ariakit": "latest",
+    "@blocknote/mantine": "latest",
+    "@blocknote/shadcn": "latest",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.10.0",
+    "vite": "^5.3.4"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}