Skip to content

fix: truncate table header names with ellipsis instead of overlapping - #2084

Open
vishwakt wants to merge 2 commits into
aws:mainfrom
vishwakt:issue-2083-header-truncation
Open

vishwakt wants to merge 2 commits into
aws:mainfrom
vishwakt:issue-2083-header-truncation

Conversation

@vishwakt

@vishwakt vishwakt commented Aug 12, 2026 •

Copy link
Copy Markdown
Contributor

Fixes #2083

Root Cause

Two stacked problems in TabularHeader.tsx:

  1. The header label sits in a CSS grid cell without min-w-0, so the grid item cannot shrink below the label's min-content width. Shrinking a column makes the label overflow the header cell and overlap the neighboring column.
  2. The text-ellipsis class was gated on a per-column overflow option that the Data Explorer never sets, and without whitespace-nowrap it had no effect even where it was set.

Fix

Header labels now always truncate (min-w-0 + truncate), and string headers carry a title attribute so hovering reveals the full name, as requested in the issue. Columns with a custom headerComponent are left untouched and get no title.

Testing

  • Added a component test asserting the title attribute and truncation class, and that custom header components get no title attribute.
  • Reproduced the issue's exact steps against a local TinkerPop Gremlin Server seeded with long property names, resizing the header columns smaller. Screenshots below.
  • The hover reveal uses the native browser tooltip via the title attribute, which headless screenshots cannot capture, so the capture log verifies the attribute in the DOM instead.

Before (resized columns, header names overlap):

before-header

After (same columns, names truncate with an ellipsis; hover shows the full name):

after-header

@kmcginnes kmcginnes left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 Important, 3 Nit.

Thanks for the contribution, @vishwakt, and for the clear before/after screenshots. I confirmed the fix in Firefox and Safari: resized headers truncate and no longer overlap the next column.

Please rebase onto the latest main. The branch is about two months behind and CI hasn't run on it yet. main now also expects a blank line after the // @vitest-environment happy-dom directive, so the format check may flag the new test file after the rebase.

Comment thread packages/graph-explorer/src/components/Tabular/TabularHeader.test.tsx Outdated
Comment thread packages/graph-explorer/src/components/Tabular/TabularHeader.tsx Outdated
Comment thread packages/graph-explorer/src/components/Tabular/TabularHeader.tsx
Header labels rendered in a grid cell without min-w-0 or
whitespace-nowrap, so shrinking a column let the label's min-content
width overflow the header cell and overlap the neighboring column. The
text-ellipsis class was also gated on a per-column overflow option that
Data Explorer never sets, and without nowrap it had no effect anyway.

Header labels now always truncate with an ellipsis. String headers set
the header cell's title to the full name, with a sort hint on sortable
columns in place of react-table's generic "Toggle SortBy" tooltip.

Fixes aws#2083
With headers truncating instead of wrapping, both labels were cut off at the default 100px width.
@vishwakt
vishwakt force-pushed the issue-2083-header-truncation branch from 56c9ae7 to abaa05f Compare October 13, 2026 23:36
@vishwakt

Copy link
Copy Markdown
Contributor Author

@kmcginnes i've rebased onto main and addressed the feedback. The test now imports from vite-plus/test and has a blank line after the environment directive, which lint and format on main require.

@kmcginnes kmcginnes left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the quick fixes, @vishwakt. Everything from the last round landed, and I re-checked the fix in the browser.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

The header names in the Data Explorer's Data Table are overlapping.

2 participants