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>

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', () => {

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)}