Elgato_dark/hyperdx
1
0
Fork 0
mirror of https://github.com/hyperdxio/hyperdx synced 2026-04-21 13:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

fix: Hide table header when no columns are displayed (#1390)

Browse source 
Closes HDX-2874

# Summary

This PR hides the table header row when there are no displayed columns. This prevents a glitchy behavior where the table header icons would appear vertically aligned rather than in a horizontal row when loading the table data. This occurred because the table header was rendered with an empty, horizontally-skinny column header for the expand button column, and the icons were in that skinny column header.

I'd recommend reviewing with white space changes hidden - this is a very small change.

## Before

https://github.com/user-attachments/assets/fceb489b-d79d-40f8-99ba-d9e4c2c5ee27

## After

https://github.com/user-attachments/assets/3b382e08-43b7-49e4-81c6-45bb2aa00688
This commit is contained in:
Drew Davis 2025-11-20 11:00:01 -05:00 committed by GitHub
parent e838436d20
commit c8ec7fa9d6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 65 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/tiny-cows-return.md Normal file
View file

@ -0,0 +1,5 @@
---
"@hyperdx/app": patch
---
fix: Hide table header when no columns are displayed

118
packages/app/src/components/DBRowTable.tsx
View file

@ -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' : ''}`}
<CsvExportButton
data={csvData}
filename={`hyperdx_search_results_${new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19)}`}
className="fs-6 text-muted-hover "
>
<IconDownload size={16} />
</MantineTooltip>
</CsvExportButton>
{onSettingsClick != null && (
<UnstyledButton
onClick={() => onSettingsClick()}
title="Settings"
>
<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 && (