Apply vertical alignment to Tables as configured in-app

packages/gitbook/src/components/DocumentView/Table/RecordColumnValue.tsx

@@ -11,7 +11,7 @@ import { tcls } from '@/lib/tailwind';
 import { filterOutNullable } from '@/lib/typescript';
 
 import { TableRecordKV } from './Table';
-import { getColumnAlignment } from './utils';
+import { getColumnAlignment, VerticalAlignment } from './utils';
 import { BlockProps } from '../Block';
 import { Blocks } from '../Blocks';
 import { FileIcon } from '../FileIcon';
@@ -25,9 +25,19 @@ export async function RecordColumnValue<Tag extends React.ElementType = 'div'>(
         ariaLabelledBy?: string;
         record: TableRecordKV;
         column: string;
+        verticalAlignment: VerticalAlignment;
     },
 ) {
-    const { tag: Tag = 'div', ariaLabelledBy, block, document, record, column, context } = props;
+    const {
+        tag: Tag = 'div',
+        ariaLabelledBy,
+        block,
+        document,
+        record,
+        column,
+        context,
+        verticalAlignment,
+    } = props;
 
     const definition = block.data.definition[column];
     const value = record[1].values[column];
@@ -99,7 +109,7 @@ export async function RecordColumnValue<Tag extends React.ElementType = 'div'>(
             // @ts-ignore
             const fragment = getNodeFragmentByName(block, value);
             if (!fragment) {
-                return <Tag className={tcls(['w-full'])}>{''}</Tag>;
+                return <Tag className={tcls(['w-full', verticalAlignment])}>{''}</Tag>;
             }
 
             const alignment = getColumnAlignment(definition);
@@ -115,6 +125,7 @@ export async function RecordColumnValue<Tag extends React.ElementType = 'div'>(
                         'space-y-2',
                         'lg:space-y-3',
                         'leading-normal',
+                        verticalAlignment,
                         alignment === 'right' ? 'text-right' : null,
                         alignment === 'center' ? 'text-center' : null,
                     ]}

packages/gitbook/src/components/DocumentView/Table/RecordRow.tsx

@@ -1,9 +1,12 @@
 import { DocumentTableViewGrid } from '@gitbook/api';
 import React from 'react';
 
+import { tcls } from '@/lib/tailwind';
+
 import { RecordColumnValue } from './RecordColumnValue';
 import { TableRecordKV, TableViewProps } from './Table';
 import styles from './table.module.css';
+import { getColumnVerticalAlignment } from './utils';
 import { getColumnWidth } from './ViewGrid';
 
 export function RecordRow(
@@ -13,7 +16,7 @@ export function RecordRow(
         fixedColumns: string[];
     },
 ) {
-    const { view, autoSizedColumns, fixedColumns } = props;
+    const { view, autoSizedColumns, fixedColumns, block } = props;
 
     return (
         <div className={styles.row} role="row">
@@ -24,17 +27,26 @@ export function RecordRow(
                     autoSizedColumns,
                     fixedColumns,
                 });
+                const verticalAlignment = getColumnVerticalAlignment(
+                    block.data.definition[column],
+                    view,
+                );
+
                 return (
                     <div
                         key={column}
                         role="cell"
-                        className={styles.cell}
+                        className={tcls(styles.cell)}
                         style={{
                             width: columnWidth,
                             minWidth: columnWidth || '100px',
                         }}
                     >
-                        <RecordColumnValue {...props} column={column} />
+                        <RecordColumnValue
+                            {...props}
+                            column={column}
+                            verticalAlignment={verticalAlignment}
+                        />
                     </div>
                 );
             })}

packages/gitbook/src/components/DocumentView/Table/table.module.css

@@ -35,7 +35,7 @@
 }
 
 .cell {
-    @apply flex-1 align-middle border-dark/2 py-2 px-3 text-sm lg:text-base dark:border-light/2;
+    @apply flex-1 flex align-middle border-dark/2 py-2 px-3 text-sm h-full lg:text-base dark:border-light/2;
 }
 
 .columnHeader {

packages/gitbook/src/components/DocumentView/Table/utils.ts

@@ -1,4 +1,9 @@
-import { ContentRef, DocumentTableRecord, DocumentTableDefinition } from '@gitbook/api';
+import {
+    ContentRef,
+    DocumentTableRecord,
+    DocumentTableDefinition,
+    DocumentTableViewGrid,
+} from '@gitbook/api';
 
 /**
  * Get the value for a column in a record.
@@ -20,3 +25,28 @@ export function getColumnAlignment(column: DocumentTableDefinition): 'left' | 'r
     }
     return 'left';
 }
+
+/**
+ * Get the vertical alignment for a column.
+ *
+ * Vertical alignment is configurable on both table and column-level.
+ * Column-level takes priority over table-level.
+ */
+
+export type VerticalAlignment = 'self-center' | 'self-end' | 'self-start';
+export function getColumnVerticalAlignment(
+    column: DocumentTableDefinition,
+    view: DocumentTableViewGrid,
+): VerticalAlignment {
+    const verticalAlignment = column.verticalAlignment ?? view.verticalAlignment ?? 'top';
+
+    if (verticalAlignment === 'middle') {
+        return 'self-center';
+    }
+
+    if (verticalAlignment === 'bottom') {
+        return 'self-end';
+    }
+
+    return 'self-start';
+}