From 5dcfc190609c9d875a38974ca11fdc6398b99847 Mon Sep 17 00:00:00 2001
From: Jesse David Peterson <jesdavpet@users.noreply.github.com>
Date: Thu, 11 Dec 2025 11:22:10 -0500
Subject: [PATCH] Table: Add title attribute to make truncated headings legible
 (#115155)

* fix(table): add HTML title attribute to make truncated headings legible

* fix(table): avoid redundant display name calculation

Co-authored-by: Paul Marbach <paul.marbach@grafana.com>

---------

Co-authored-by: Paul Marbach <paul.marbach@grafana.com>
---
 .../src/components/Table/TableNG/TableNG.test.tsx   | 13 +++++++++++++
 .../Table/TableNG/components/HeaderCell.tsx         |  4 +++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Table/TableNG/TableNG.test.tsx b/packages/grafana-ui/src/components/Table/TableNG/TableNG.test.tsx
index 56e38b9cd60..ead8014e550 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/TableNG.test.tsx
+++ b/packages/grafana-ui/src/components/Table/TableNG/TableNG.test.tsx
@@ -451,6 +451,19 @@ describe('TableNG', () => {
       expect(screen.getByText('A1')).toBeInTheDocument();
       expect(screen.getByText('1')).toBeInTheDocument();
     });
+
+    it('shows full column name in title attribute for truncated headers', () => {
+      const { container } = render(
+        <TableNG enableVirtualization={false} data={createBasicDataFrame()} width={800} height={600} />
+      );
+
+      const headers = container.querySelectorAll('[role="columnheader"]');
+      const firstHeaderSpan = headers[0].querySelector('span');
+      const secondHeaderSpan = headers[1].querySelector('span');
+
+      expect(firstHeaderSpan).toHaveAttribute('title', 'Column A');
+      expect(secondHeaderSpan).toHaveAttribute('title', 'Column B');
+    });
   });
 
   describe('Footer options', () => {
diff --git a/packages/grafana-ui/src/components/Table/TableNG/components/HeaderCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/components/HeaderCell.tsx
index 8ccc73a98b9..fc59c08aa3c 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/components/HeaderCell.tsx
+++ b/packages/grafana-ui/src/components/Table/TableNG/components/HeaderCell.tsx
@@ -55,7 +55,9 @@ const HeaderCell: React.FC<HeaderCellProps> = ({
       {showTypeIcons && (
         <Icon className={styles.headerCellIcon} name={getFieldTypeIcon(field)} title={field?.type} size="sm" />
       )}
-      <span className={styles.headerCellLabel}>{getDisplayName(field)}</span>
+      <span className={styles.headerCellLabel} title={displayName}>
+        {displayName}
+      </span>
       {direction && (
         <Icon
           className={cx(styles.headerCellIcon, styles.headerSortIcon)}