Skip to content

Commit c8ec7fa

Browse files
pulpdrewpulpdrew
authored
fix: Hide table header when no columns are displayed (#1390)
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
1 parent e838436 commit c8ec7fa

File tree

2 files changed

+66
-59
lines changed

2 files changed

+66
-59
lines changed

‎.changeset/tiny-cows-return.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@hyperdx/app": patch
3+
---
4+
5+
fix: Hide table header when no columns are displayed

‎packages/app/src/components/DBRowTable.tsx‎

Lines changed: 61 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -742,76 +742,78 @@ export const RawLogTable = memo(
742742
)}
743743
<table className={cx('w-100', styles.table)} id={tableId}>
744744
<thead className={styles.tableHead}>
745-
{table.getHeaderGroups().map(headerGroup => (
746-
<tr key={headerGroup.id}>
747-
{headerGroup.headers.map((header, headerIndex) => {
748-
const isLast = headerIndex === headerGroup.headers.length - 1;
749-
return (
750-
<TableHeader
751-
key={header.id}
752-
header={header}
753-
isLast={isLast}
754-
lastItemButtons={
755-
<Group gap={8} mr={8}>
756-
{tableId &&
757-
Object.keys(columnSizeStorage).length > 0 && (
745+
{displayedColumns.length > 0 &&
746+
table.getHeaderGroups().map(headerGroup => (
747+
<tr key={headerGroup.id}>
748+
{headerGroup.headers.map((header, headerIndex) => {
749+
const isLast =
750+
headerIndex === headerGroup.headers.length - 1;
751+
return (
752+
<TableHeader
753+
key={header.id}
754+
header={header}
755+
isLast={isLast}
756+
lastItemButtons={
757+
<Group gap={8} mr={8}>
758+
{tableId &&
759+
Object.keys(columnSizeStorage).length > 0 && (
760+
<UnstyledButton
761+
onClick={() => setColumnSizeStorage({})}
762+
title="Reset Column Widths"
763+
>
764+
<MantineTooltip label="Reset Column Widths">
765+
<IconRotateClockwise size={16} />
766+
</MantineTooltip>
767+
</UnstyledButton>
768+
)}
769+
{config && (
758770
<UnstyledButton
759-
onClick={() => setColumnSizeStorage({})}
760-
title="Reset Column Widths"
771+
onClick={() => handleSqlModalOpen(true)}
772+
title="Show generated SQL"
773+
tabIndex={0}
761774
>
762-
<MantineTooltip label="Reset Column Widths">
763-
<IconRotateClockwise size={16} />
775+
<MantineTooltip label="Show generated SQL">
776+
<IconCode size={16} />
764777
</MantineTooltip>
765778
</UnstyledButton>
766779
)}
767-
{config && (
768780
<UnstyledButton
769-
onClick={() => handleSqlModalOpen(true)}
770-
title="Show generated SQL"
771-
tabIndex={0}
781+
onClick={() => setWrapLinesEnabled(prev => !prev)}
782+
title="Wrap lines"
772783
>
773-
<MantineTooltip label="Show generated SQL">
774-
<IconCode size={16} />
784+
<MantineTooltip label="Wrap lines">
785+
<IconTextWrap size={16} />
775786
</MantineTooltip>
776787
</UnstyledButton>
777-
)}
778-
<UnstyledButton
779-
onClick={() => setWrapLinesEnabled(prev => !prev)}
780-
title="Wrap lines"
781-
>
782-
<MantineTooltip label="Wrap lines">
783-
<IconTextWrap size={16} />
784-
</MantineTooltip>
785-
</UnstyledButton>
786-
787-
<CsvExportButton
788-
data={csvData}
789-
filename={`hyperdx_search_results_${new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19)}`}
790-
className="fs-6 text-muted-hover "
791-
>
792-
<MantineTooltip
793-
label={`Download table as CSV (max ${maxRows.toLocaleString()} rows)${isLimited ? ' - data truncated' : ''}`}
794-
>
795-
<IconDownload size={16} />
796-
</MantineTooltip>
797-
</CsvExportButton>
798-
{onSettingsClick != null && (
799-
<UnstyledButton
800-
onClick={() => onSettingsClick()}
801-
title="Settings"
788+
789+
<CsvExportButton
790+
data={csvData}
791+
filename={`hyperdx_search_results_${new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19)}`}
792+
className="fs-6 text-muted-hover "
802793
>
803-
<MantineTooltip label="Settings">
804-
<IconSettings size={16} />
794+
<MantineTooltip
795+
label={`Download table as CSV (max ${maxRows.toLocaleString()} rows)${isLimited ? ' - data truncated' : ''}`}
796+
>
797+
<IconDownload size={16} />
805798
</MantineTooltip>
806-
</UnstyledButton>
807-
)}
808-
</Group>
809-
}
810-
/>
811-
);
812-
})}
813-
</tr>
814-
))}
799+
</CsvExportButton>
800+
{onSettingsClick != null && (
801+
<UnstyledButton
802+
onClick={() => onSettingsClick()}
803+
title="Settings"
804+
>
805+
<MantineTooltip label="Settings">
806+
<IconSettings size={16} />
807+
</MantineTooltip>
808+
</UnstyledButton>
809+
)}
810+
</Group>
811+
}
812+
/>
813+
);
814+
})}
815+
</tr>
816+
))}
815817
</thead>
816818
<tbody>
817819
{paddingTop > 0 && (

0 commit comments

Comments
 (0)