Hide table header when column titles are empty (#182)

* Hide table header when column titles are empty

* Add test

* Skip downloading puppeteer for some CI jobs

.github/workflows/ci.yaml

@@ -17,6 +17,8 @@ jobs:
               uses: oven-sh/setup-bun@v1
             - name: Install dependencies
               run: bun install --frozen-lockfile
+              env:
+                  PUPPETEER_SKIP_DOWNLOAD: 1
             - name: Cache Next.js build
               uses: actions/cache@v3
               with:
@@ -95,6 +97,8 @@ jobs:
               uses: oven-sh/setup-bun@v1
             - name: Install dependencies
               run: bun install --frozen-lockfile
+              env:
+                  PUPPETEER_SKIP_DOWNLOAD: 1
             - name: Run visual tests
               run: bun ./tests/pagespeed-testing.ts $DEPLOYMENT_URL
               env:
@@ -110,6 +114,8 @@ jobs:
               uses: oven-sh/setup-bun@v1
             - name: Install dependencies
               run: bun install --frozen-lockfile
+              env:
+                  PUPPETEER_SKIP_DOWNLOAD: 1
             - run: bun format --check .
     lint:
         runs-on: ubuntu-latest
@@ -121,6 +127,8 @@ jobs:
               uses: oven-sh/setup-bun@v1
             - name: Install dependencies
               run: bun install --frozen-lockfile
+              env:
+                  PUPPETEER_SKIP_DOWNLOAD: 1
             - run: bun lint
     typecheck:
         runs-on: ubuntu-latest
@@ -132,4 +140,6 @@ jobs:
               uses: oven-sh/setup-bun@v1
             - name: Install dependencies
               run: bun install --frozen-lockfile
+              env:
+                  PUPPETEER_SKIP_DOWNLOAD: 1
             - run: bun typecheck

src/components/DocumentView/Table/ViewCards.tsx

@@ -18,9 +18,7 @@ export function ViewCards(props: TableViewProps<DocumentTableViewCards>) {
                 'gap-4',
                 'grid-cols-1',
                 'min-[432px]:grid-cols-2',
-                view.cardSize === 'large'
-                    ? 'md:grid-cols-2'
-                    : 'md:grid-cols-3',
+                view.cardSize === 'large' ? 'md:grid-cols-2' : 'md:grid-cols-3',
                 block.data.fullWidth ? ['max-w-full', 'large:flex-column'] : null,
             )}
         >

src/components/DocumentView/Table/ViewGrid.tsx

@@ -55,6 +55,11 @@ export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
 
     const tableTH = columnsOverThreshold ? ['py-3'] : ['py-1', 'pt-0'];
 
+    // Only show the header when configured and not empty
+    const withHeader =
+        !view.hideHeader &&
+        view.columns.some((columnId) => block.data.definition[columnId].title.trim().length > 0);
+
     return (
         <div
             className={`${tcls(style, 'relative', 'grid', tableWrapper, styles.progressContainer)}`}
@@ -140,7 +145,7 @@ export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
 
             {/* Table: */}
             <table className={tcls('w-full', 'grid-area-1-1', 'table-auto')}>
-                {view.hideHeader ? null : (
+                {withHeader ? (
                     <thead>
                         <tr className={tcls(tableTR)}>
                             {view.columns.map((column) => {
@@ -172,7 +177,7 @@ export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
                             })}
                         </tr>
                     </thead>
-                )}
+                ) : null}
                 <tbody className={tcls('[&>*+*]:border-t')}>
                     {records.map((record) => {
                         return <RecordRow key={record[0]} {...props} record={record} />;

tests/visual-testing.ts

@@ -201,6 +201,10 @@ const testCases: TestsCase[] = [
                 name: 'Tabs',
                 url: 'blocks/tabs',
             },
+            {
+                name: 'Tables',
+                url: 'blocks/tables',
+            },
             {
                 name: 'Expandables',
                 url: 'blocks/expandables',