From e40584d392f3627c38198b990737283ba423f8d0 Mon Sep 17 00:00:00 2001
From: Stephen Wu <wujstephen@gmail.com>
Date: Mon, 25 Nov 2024 15:30:42 -0500
Subject: [PATCH 1/2] add support

---
 packages/react-notion-x/src/block.tsx  | 25 +++++++++++++++++++++----
 packages/react-notion-x/src/styles.css | 10 +++++++---
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/react-notion-x/src/block.tsx b/packages/react-notion-x/src/block.tsx
index 37fe13d8a..4a923009f 100644
--- a/packages/react-notion-x/src/block.tsx
+++ b/packages/react-notion-x/src/block.tsx
@@ -786,28 +786,45 @@ export function Block(props: BlockProps) {
       const tableBlock = recordMap.block[block.parent_id]
         ?.value as types.TableBlock
       const order = tableBlock.format?.table_block_column_order
-      const formatMap = tableBlock.format?.table_block_column_format
-      const backgroundColor = block.format?.block_color
 
       if (!tableBlock || !order) {
         return null
       }
 
+      const rowIndex = recordMap.block[block.parent_id]?.value.content?.indexOf(
+        block.id
+      )
+      const formatMap = tableBlock.format?.table_block_column_format
+      const hasColumnHeader = Boolean(
+        tableBlock.format?.table_block_column_header
+      )
+      const isRowHeader =
+        Boolean(tableBlock.format?.table_block_column_header) && rowIndex === 0
+      const backgroundColor = block.format?.block_color
+
       return (
         <tr
           className={cs(
             'notion-simple-table-row',
             backgroundColor && `notion-${backgroundColor}`,
+            isRowHeader && `notion-simple-table-header`,
             blockId
           )}
         >
-          {order.map((column) => {
+          {order.map((column, columnIndex) => {
+            let colorClass = ''
             const color = formatMap?.[column]?.color
+            if (color) {
+              colorClass = `notion-${color}`
+            } else if (hasColumnHeader && columnIndex === 0 && !isRowHeader) {
+              // Avoid double-stacking the column header on the row header, since they may have an opacity.
+              colorClass = 'notion-simple-table-header'
+            }
 
             return (
               <td
                 key={column}
-                className={color ? `notion-${color}` : ''}
+                className={colorClass}
                 style={{
                   width: formatMap?.[column]?.width || 120
                 }}
diff --git a/packages/react-notion-x/src/styles.css b/packages/react-notion-x/src/styles.css
index 965860cf3..c7cf77a92 100644
--- a/packages/react-notion-x/src/styles.css
+++ b/packages/react-notion-x/src/styles.css
@@ -13,6 +13,8 @@
   --fg-color-7: rgba(55, 53, 47, 0.5);
   --fg-color-icon: var(--fg-color);
 
+  --divider: rgb(233, 233, 231);
+
   --bg-color: #fff;
   --bg-color-0: rgba(135, 131, 120, 0.15);
   --bg-color-1: rgb(247, 246, 243);
@@ -100,6 +102,8 @@
   --fg-color-6: #fff;
   --fg-color-icon: #fff;
 
+  --divider: rgb(47, 47, 47);
+
   --bg-color: #2f3437;
   --bg-color-0: rgb(71, 76, 80);
   --bg-color-1: rgb(63, 68, 71);
@@ -2667,18 +2671,18 @@ svg.notion-page-icon {
 }
 
 .notion-simple-table {
-  border: 1px solid var(--fg-color-5);
+  border: 1px solid var(--divider);
   border-collapse: collapse;
   border-spacing: 0;
   font-size: 14px;
 }
 
-.notion-simple-table tr:first-child td {
+.notion-simple-table-header {
   background: var(--bg-color-0);
 }
 
 .notion-simple-table td {
-  border: 1px solid var(--fg-color-5);
+  border: 1px solid var(--divider);
   padding: 8px 8px;
   white-space: pre-wrap;
 }

From 9d7ddc99ec8cbcf9c6b8151e6d4cc039959ddc65 Mon Sep 17 00:00:00 2001
From: Stephen Wu <wujstephen@gmail.com>
Date: Mon, 25 Nov 2024 15:34:11 -0500
Subject: [PATCH 2/2] Update block.tsx

---
 packages/react-notion-x/src/block.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-notion-x/src/block.tsx b/packages/react-notion-x/src/block.tsx
index 4a923009f..7c0ea5d0c 100644
--- a/packages/react-notion-x/src/block.tsx
+++ b/packages/react-notion-x/src/block.tsx
@@ -816,8 +816,7 @@ export function Block(props: BlockProps) {
             const color = formatMap?.[column]?.color
             if (color) {
               colorClass = `notion-${color}`
-            } else if (hasColumnHeader && columnIndex === 0 && !isRowHeader) {
-              // Avoid double-stacking the column header on the row header, since they may have an opacity.
+            } else if (hasColumnHeader && columnIndex === 0) {
               colorClass = 'notion-simple-table-header'
             }