[EuiTable] Added title to headers in case of truncation

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added title to headers of `EuiTable` when truncated ([#3094](https://github.com/elastic/eui/pull/3094))
 - Added `href` prop to `EuiBadge` ([#3009](https://github.com/elastic/eui/pull/3009))
 - Added props descriptions for `EuiComboBox` ([#3007](https://github.com/elastic/eui/pull/3007))
 - Exported `dateFormatAliases` as a part of the public API ([#3043](https://github.com/elastic/eui/pull/3043))

src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -163,11 +163,14 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                       <div
                         className="euiTableCellContent"
                       >
-                        <span
-                          className="euiTableCellContent__text"
-                        >
-                          Name
-                        </span>
+                        <EuiInnerText>
+                          <span
+                            className="euiTableCellContent__text"
+                            title="Name"
+                          >
+                            Name
+                          </span>
+                        </EuiInnerText>
                       </div>
                     </th>
                   </EuiTableHeaderCell>

src/components/table/table_header_button.tsx

@@ -1,6 +1,7 @@
 import React, { ButtonHTMLAttributes, FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
+import { EuiInnerText } from '../inner_text';
 
 import { IconType, EuiIcon } from '../icon';
 
@@ -33,7 +34,14 @@ export const EuiTableHeaderButton: FunctionComponent<Props> = ({
 
   return (
     <button type="button" className={classes} {...rest}>
-      <span>{children}</span>
+      <EuiInnerText>
+        {(ref, innerText) => (
+          <span title={innerText} ref={ref}>
+            {children}
+          </span>
+        )}
+      </EuiInnerText>
+
       {buttonIcon}
     </button>
   );

src/components/table/table_header_cell.tsx

@@ -9,6 +9,7 @@ import { EuiScreenReaderOnly } from '../accessibility';
 import { CommonProps, NoArgCallback } from '../common';
 import { EuiIcon } from '../icon';
 import { resolveWidthAsStyle } from './utils';
+import { EuiInnerText } from '../inner_text';
 
 import {
   HorizontalAlignment,
@@ -130,7 +131,17 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
           onClick={onSort}
           data-test-subj="tableHeaderSortButton">
           <span className={contentClasses}>
-            <span className="euiTableCellContent__text">{children}</span>
+            <EuiInnerText>
+              {(ref, innerText) => (
+                <span
+                  title={innerText}
+                  ref={ref}
+                  className="euiTableCellContent__text">
+                  {children}
+                </span>
+              )}
+            </EuiInnerText>
+
             {isSorted && (
               <EuiIcon
                 className="euiTableSortIcon"
@@ -156,7 +167,16 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
       style={styleObj}
       {...rest}>
       <div className={contentClasses}>
-        <span className="euiTableCellContent__text">{children}</span>
+        <EuiInnerText>
+          {(ref, innerText) => (
+            <span
+              title={innerText}
+              ref={ref}
+              className="euiTableCellContent__text">
+              {children}
+            </span>
+          )}
+        </EuiInnerText>
       </div>
     </CellComponent>
   );