chore: add docs on new tables features

Author: nperez0111

docs/pages/docs/advanced/tables.mdx

@@ -0,0 +1,92 @@
+---
+title: Advanced Tables
+description: This section explains how to use more advanced features of tables.
+imageTitle: Advanced Tables
+---
+
+import { Example } from "@/components/example";
+
+# Advanced Tables
+
+Tables by default are a simple way to display data in a grid. But, BlockNote also supports more advanced features like:
+
+- Split cells
+- Cell background color
+- Cell text color
+- Header rows & columns
+
+To keep the default table experience easy to use, these features are disabled by default.
+
+You can enable them by passing the `tables` option when creating the editor.
+
+```ts
+const editor = new BlockNoteEditor({
+  tables: {
+    splitCells: true,
+    cellBackgroundColor: true,
+    cellTextColor: true,
+    headers: true,
+  },
+});
+```
+
+You can choose to enable only certain features, or none at all. Giving you the flexibility to use tables how you need in your app.
+
+Here's an example of the editor with all features enabled:
+
+<Example name="ui-components/advanced-tables" />
+
+## Cell background color
+
+To enable cell background color, you need to pass `cellBackgroundColor: true` to the `tables` option.
+
+```ts
+const editor = new BlockNoteEditor({
+  tables: {
+    cellBackgroundColor: true,
+  },
+});
+```
+
+## Cell text color
+
+To enable cell text color, you need to pass `cellTextColor: true` to the `tables` option.
+
+```ts
+const editor = new BlockNoteEditor({
+  tables: {
+    cellTextColor: true,
+  },
+});
+```
+
+
+## Header rows & columns
+
+BlockNote supports headers in tables, which are the first row and/or first column of a table.
+
+To enable it, you need to pass `headers: true` to the `tables` option.
+
+```ts
+const editor = new BlockNoteEditor({
+  tables: {
+    headers: true,
+  },
+});
+```
+
+## Split cells
+
+Splitting and merging cells is a common feature of more advanced table editors.
+
+To enable it, you need to pass `splitCells: true` to the `tables` option.
+
+```ts
+const editor = new BlockNoteEditor({
+  tables: {
+    splitCells: true,
+  },
+});
+```
+
+

docs/pages/docs/editor-basics/setup.mdx

@@ -37,7 +37,8 @@ type BlockNoteEditorOptions = {
   schema?: BlockNoteSchema;
   setIdAttribute?: boolean;
   sideMenuDetection?: "viewport" | "editor";
-  tabBehavior?: "prefer-navigate-ui" | "prefer-indent"
+  tabBehavior?: "prefer-navigate-ui" | "prefer-indent";
+  tables?: TableFeatures;
   trailingBlock?: boolean;
   uploadFile?: (file: File) => Promise<string>;
 };
@@ -77,6 +78,8 @@ The hook takes two optional parameters:
 
 `tabBehavior`: Determines whether pressing the tab key should navigate toolbars for keyboard accessibility. When set to `"prefer-navigate-ui`, the user can navigate toolbars using Tab. Pressing Escape re-focuses the editor, and Tab now indents blocks. `"prefer-indent"` causes Tab to always indent blocks. Defaults to `prefer-navigate-ui`.
 
+`tables`: Configuration for table features. Allowing you to enable more advanced table features like `splitCells`, `cellBackgroundColor`, `cellTextColor`, and `headers`.
+
 `trailingBlock`: An option which user can pass with `false` value to disable the automatic creation of a trailing new block on the next line when the user types or edits any block. Defaults to `true` if undefined.
 
 `uploadFile`: A function which handles file uploads and eventually returns the URL to the uploaded file. Used for [Image blocks](/docs/editor-basics/default-schema#image).

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

@@ -9,4 +9,5 @@ This example enables the following features in tables:
 
 **Relevant Docs:**
 
+- [Tables](/docs/advanced/tables)
 - [Editor Setup](/docs/editor-basics/setup)