TypeCellOS · must · Aug 6, 2025 · Aug 6, 2025 · Aug 6, 2025
diff --git a/examples/03-ui-components/17-advanced-tables-2/.bnexample.json b/examples/03-ui-components/17-advanced-tables-2/.bnexample.json
@@ -0,0 +1,11 @@
+{
+  "playground": true,
+  "docs": true,
+  "author": "must",
+  "tags": [
+    "Intermediate",
+    "UI Components",
+    "Tables",
+    "Appearance & Styling"
+  ]
+}
diff --git a/examples/03-ui-components/17-advanced-tables-2/README.md b/examples/03-ui-components/17-advanced-tables-2/README.md
@@ -0,0 +1,54 @@
+# Advanced Tables with Calculated Columns
+
+This example demonstrates advanced table features including automatic calculations. It shows how to create a table with calculated columns that automatically update when values change.
+
+## Features
+
+- **Automatic Calculations**: Quantity × Price = Total for each row
+- **Grand Total**: Automatically calculated sum of all totals
+- **Real-time Updates**: Calculations update immediately when you change quantity or price values
+- **Split cells**: Merge and split table cells
+- **Cell background color**: Color individual cells
+- **Cell text color**: Change text color in cells
+- **Table row and column headers**: Use headers for better organization
+
+## How It Works
+
+The example uses the `onChange` event listener to detect when table content changes. When a table is updated, it automatically:
+
+1. Extracts quantity and price values from each data row
+2. Calculates the total (quantity × price) for each row
+3. Updates the total column with the calculated values
+4. Calculates and updates the grand total
+
+## Code Highlights
+
+```tsx
+<BlockNoteView
+  editor={editor}
+  onChange={(editor, { getChanges }) => {
+    const changes = getChanges();
+
+    changes.forEach((change) => {
+      if (change.type === "update" && change.block.type === "table") {
+        const updatedRows = calculateTableTotals(change.block);
+        if (updatedRows) {
+          editor.updateBlock(change.block, {
+            type: "table",
+            content: {
+              ...change.block.content,
+              rows: updatedRows as any,
+            } as any,
+          });
+        }
+      }
+    });
+  }}
+></BlockNoteView>
+```
+
+**Relevant Docs:**
+
+- [Tables](/docs/features/blocks/tables)
+- [Editor Setup](/docs/getting-started/editor-setup)
+- [Events](/docs/reference/editor/events)
diff --git a/examples/03-ui-components/17-advanced-tables-2/index.html b/examples/03-ui-components/17-advanced-tables-2/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Advanced Tables with Calculated Columns</title>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/03-ui-components/17-advanced-tables-2/main.tsx b/examples/03-ui-components/17-advanced-tables-2/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 "./src/App.jsx";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/03-ui-components/17-advanced-tables-2/package.json b/examples/03-ui-components/17-advanced-tables-2/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@blocknote/example-ui-components-advanced-tables-2",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.12.4",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build:prod": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@blocknote/core": "latest",
+    "@blocknote/react": "latest",
+    "@blocknote/ariakit": "latest",
+    "@blocknote/mantine": "latest",
+    "@blocknote/shadcn": "latest",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.3.4"
+  }
+}