add support

NotionX · Nov 25, 2024 · e40584d · e40584d
1 parent 3991343
commit e40584d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git 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
@@ -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;
 }