Merge pull request #630 from LooseLi/feat-table-header-style

Author: transitive-bullshit

packages/react-notion-x/src/block.tsx

@@ -789,6 +789,11 @@ export function Block(props: BlockProps) {
       const formatMap = tableBlock.format?.table_block_column_format
       const backgroundColor = block.format?.block_color
 
+      const hasRowHeader = tableBlock.format?.table_block_column_header === true
+      const hasColumnHeader = tableBlock.format?.table_block_row_header === true
+
+      const isHeaderRow = hasRowHeader && tableBlock.content?.[0] === block.id
+
       if (!tableBlock || !order) {
         return null
       }
@@ -798,16 +803,22 @@ export function Block(props: BlockProps) {
           className={cs(
             'notion-simple-table-row',
             backgroundColor && `notion-${backgroundColor}`,
+            isHeaderRow && 'notion-simple-table-header-row',
             blockId
           )}
         >
-          {order.map((column) => {
+          {order.map((column, columnIndex) => {
             const color = formatMap?.[column]?.color
 
+            const isHeaderColumn = hasColumnHeader && columnIndex === 0
+
             return (
               <td
                 key={column}
-                className={color ? `notion-${color}` : ''}
+                className={cs(
+                  color ? `notion-${color}` : '',
+                  isHeaderColumn && 'notion-simple-table-header-cell'
+                )}
                 style={{
                   width: formatMap?.[column]?.width || 120
                 }}

packages/react-notion-x/src/styles.css

@@ -2674,7 +2674,14 @@ svg.notion-page-icon {
   font-size: 14px;
 }
 
-.notion-simple-table tr:first-child td {
+/* simple table header */
+/* row header */
+.notion-simple-table-header-row td {
+  background: var(--bg-color-0);
+}
+
+/* column header */
+.notion-simple-table-header-cell {
   background: var(--bg-color-0);
 }