From 31608aae1cc8b745204c1fb637ac9cb85db8cf7b Mon Sep 17 00:00:00 2001
From: Drew Davis <drew.davis@clickhouse.com>
Date: Thu, 20 Nov 2025 10:27:06 -0500
Subject: [PATCH] fix: Hide table header when no columns are displayed

---
 .changeset/tiny-cows-return.md             |   5 +
 packages/app/src/components/DBRowTable.tsx | 120 +++++++++++----------
 2 files changed, 66 insertions(+), 59 deletions(-)
 create mode 100644 .changeset/tiny-cows-return.md

diff --git a/.changeset/tiny-cows-return.md b/.changeset/tiny-cows-return.md
new file mode 100644
index 0000000000..114a88b474
--- /dev/null
+++ b/.changeset/tiny-cows-return.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: Hide table header when no columns are displayed
diff --git a/packages/app/src/components/DBRowTable.tsx b/packages/app/src/components/DBRowTable.tsx
index ee96ebca0b..55d5b6cf2d 100644
--- a/packages/app/src/components/DBRowTable.tsx
+++ b/packages/app/src/components/DBRowTable.tsx
@@ -742,76 +742,78 @@ export const RawLogTable = memo(
         )}
         <table className={cx('w-100', styles.table)} id={tableId}>
           <thead className={styles.tableHead}>
-            {table.getHeaderGroups().map(headerGroup => (
-              <tr key={headerGroup.id}>
-                {headerGroup.headers.map((header, headerIndex) => {
-                  const isLast = headerIndex === headerGroup.headers.length - 1;
-                  return (
-                    <TableHeader
-                      key={header.id}
-                      header={header}
-                      isLast={isLast}
-                      lastItemButtons={
-                        <Group gap={8} mr={8}>
-                          {tableId &&
-                            Object.keys(columnSizeStorage).length > 0 && (
+            {displayedColumns.length > 0 &&
+              table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map((header, headerIndex) => {
+                    const isLast =
+                      headerIndex === headerGroup.headers.length - 1;
+                    return (
+                      <TableHeader
+                        key={header.id}
+                        header={header}
+                        isLast={isLast}
+                        lastItemButtons={
+                          <Group gap={8} mr={8}>
+                            {tableId &&
+                              Object.keys(columnSizeStorage).length > 0 && (
+                                <UnstyledButton
+                                  onClick={() => setColumnSizeStorage({})}
+                                  title="Reset Column Widths"
+                                >
+                                  <MantineTooltip label="Reset Column Widths">
+                                    <IconRotateClockwise size={16} />
+                                  </MantineTooltip>
+                                </UnstyledButton>
+                              )}
+                            {config && (
                               <UnstyledButton
-                                onClick={() => setColumnSizeStorage({})}
-                                title="Reset Column Widths"
+                                onClick={() => handleSqlModalOpen(true)}
+                                title="Show generated SQL"
+                                tabIndex={0}
                               >
-                                <MantineTooltip label="Reset Column Widths">
-                                  <IconRotateClockwise size={16} />
+                                <MantineTooltip label="Show generated SQL">
+                                  <IconCode size={16} />
                                 </MantineTooltip>
                               </UnstyledButton>
                             )}
-                          {config && (
                             <UnstyledButton
-                              onClick={() => handleSqlModalOpen(true)}
-                              title="Show generated SQL"
-                              tabIndex={0}
+                              onClick={() => setWrapLinesEnabled(prev => !prev)}
+                              title="Wrap lines"
                             >
-                              <MantineTooltip label="Show generated SQL">
-                                <IconCode size={16} />
+                              <MantineTooltip label="Wrap lines">
+                                <IconTextWrap size={16} />
                               </MantineTooltip>
                             </UnstyledButton>
-                          )}
-                          <UnstyledButton
-                            onClick={() => setWrapLinesEnabled(prev => !prev)}
-                            title="Wrap lines"
-                          >
-                            <MantineTooltip label="Wrap lines">
-                              <IconTextWrap size={16} />
-                            </MantineTooltip>
-                          </UnstyledButton>
-
-                          <CsvExportButton
-                            data={csvData}
-                            filename={`hyperdx_search_results_${new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19)}`}
-                            className="fs-6 text-muted-hover "
-                          >
-                            <MantineTooltip
-                              label={`Download table as CSV (max ${maxRows.toLocaleString()} rows)${isLimited ? ' - data truncated' : ''}`}
-                            >
-                              <IconDownload size={16} />
-                            </MantineTooltip>
-                          </CsvExportButton>
-                          {onSettingsClick != null && (
-                            <UnstyledButton
-                              onClick={() => onSettingsClick()}
-                              title="Settings"
+
+                            <CsvExportButton
+                              data={csvData}
+                              filename={`hyperdx_search_results_${new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19)}`}
+                              className="fs-6 text-muted-hover "
                             >
-                              <MantineTooltip label="Settings">
-                                <IconSettings size={16} />
+                              <MantineTooltip
+                                label={`Download table as CSV (max ${maxRows.toLocaleString()} rows)${isLimited ? ' - data truncated' : ''}`}
+                              >
+                                <IconDownload size={16} />
                               </MantineTooltip>
-                            </UnstyledButton>
-                          )}
-                        </Group>
-                      }
-                    />
-                  );
-                })}
-              </tr>
-            ))}
+                            </CsvExportButton>
+                            {onSettingsClick != null && (
+                              <UnstyledButton
+                                onClick={() => onSettingsClick()}
+                                title="Settings"
+                              >
+                                <MantineTooltip label="Settings">
+                                  <IconSettings size={16} />
+                                </MantineTooltip>
+                              </UnstyledButton>
+                            )}
+                          </Group>
+                        }
+                      />
+                    );
+                  })}
+                </tr>
+              ))}
           </thead>
           <tbody>
             {paddingTop > 0 && (