feat: implement table header styling for both rows and columns

Author: LooseLi

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

@@ -790,6 +790,7 @@ export function Block(props: BlockProps) {
       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
 
@@ -806,13 +807,18 @@ export function Block(props: BlockProps) {
             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

@@ -2672,10 +2672,17 @@ svg.notion-page-icon {
   font-size: 14px;
 }
 
+/* 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);
+}
+
 .notion-simple-table td {
   border: 1px solid var(--fg-color-5);
   padding: 8px 8px;