feat: add rich table support

Author: andybywire

astro/src/components/PortableText.astro

@@ -1,12 +1,14 @@
 ---
 import {PortableText as PortableTextInternal} from 'astro-portabletext'
 import PortableTextImage from './PortableTextImage.astro'
+import Table from './Table.astro'
 
 const {portableText} = Astro.props
 
 const components = {
   type: {
     image: PortableTextImage,
+    richTableBlock: Table,
   },
 }
 ---

astro/src/components/Table.astro

@@ -0,0 +1,36 @@
+---
+import type {RichTableType} from 'sanity-plugin-rich-table'
+import PortableText from './PortableText.astro'
+
+// Registered as a `richTableBlock` type component on PortableText.astro,
+// so the table data arrives on `Astro.props.node`.
+const {rows, columnHeaders, hasColumnTitles, hasRowTitles} = Astro.props
+  .node as RichTableType
+---
+
+<table>
+  {
+    hasColumnTitles && (
+      <thead>
+        <tr>
+          {hasRowTitles && <th />}
+          {columnHeaders?.map((header) => <th>{header.title}</th>)}
+        </tr>
+      </thead>
+    )
+  }
+  <tbody>
+    {
+      (rows ?? []).map((row) => (
+        <tr>
+          {hasRowTitles && <th scope="row">{row.title}</th>}
+          {row.cells?.map((cell) => (
+            <td>
+              <PortableText portableText={cell.content} />
+            </td>
+          ))}
+        </tr>
+      ))
+    }
+  </tbody>
+</table>

pnpm-lock.yaml

@@ -33,6 +33,7 @@
     "rxjs": "^7.8.2",
     "sanity": "^5.30.0",
     "sanity-plugin-bulk-delete": "^1.1.1",
+    "sanity-plugin-rich-table": "^1.1.1",
     "sanity-plugin-taxonomy-manager": "^4.7.0",
     "styled-components": "^6.3.11"
   },

studio/package.json

@@ -14,6 +14,7 @@ import {RiBubbleChartFill} from 'react-icons/ri'
 import {NodeTree} from './static/NodeTree'
 import {presentationTool} from 'sanity/presentation'
 import {resolve} from './resolve'
+import {richTablePlugin} from 'sanity-plugin-rich-table'
 
 const hiddenDocTypes = (listItem: any) =>
   ![
@@ -101,6 +102,7 @@ export default defineConfig([
       embeddingsIndexDashboard(),
       embeddingsIndexReferenceInput(),
       assist(),
+      richTablePlugin({}),
     ],
 
     schema: {
@@ -136,6 +138,7 @@ export default defineConfig([
       }),
       embeddingsIndexDashboard(),
       assist(),
+      richTablePlugin({}),
     ],
 
     schema: {
@@ -181,6 +184,7 @@ export default defineConfig([
         // roles: ['administrator', 'editor'], // Optionally restrict to specific roles
       }),
       assist(),
+      richTablePlugin({}),
     ],
 
     schema: {

studio/sanity.config.ts

@@ -45,5 +45,10 @@ export default defineType({
     defineArrayMember({
       type: 'bodyImage',
     }),
+    defineArrayMember({
+      name: 'richTableBlock',
+      title: 'Rich Table Block',
+      type: 'richTableBlock', // Use the rich table block type
+    }),
   ],
 })