[EuiTable] Added title to headers in case of truncation

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 - Added `prepend` and `append` ability to `EuiFieldPassword` ([#3122](https://github.com/elastic/eui/pull/3122))
 - Added `Enter` key press functionality to `EuiSuperDatePicker` ([#3048](https://github.com/elastic/eui/pull/3048))
+- Added `title` to headers of `EuiTable` in case of truncation ([#3094](https://github.com/elastic/eui/pull/3094))
+- Added i18n to `EuiTableHeaderCell` ([#3094](https://github.com/elastic/eui/pull/3094))
 
 **Bug Fixes**
 

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,13 +9,15 @@ import { EuiScreenReaderOnly } from '../accessibility';
 import { CommonProps, NoArgCallback } from '../common';
 import { EuiIcon } from '../icon';
 import { resolveWidthAsStyle } from './utils';
+import { EuiInnerText } from '../inner_text';
 
 import {
   HorizontalAlignment,
   LEFT_ALIGNMENT,
   RIGHT_ALIGNMENT,
   CENTER_ALIGNMENT,
 } from '../../services';
+import { EuiI18n } from '../i18n';
 
 export type TableHeaderCellScope = 'col' | 'row' | 'colgroup' | 'rowgroup';
 
@@ -105,14 +107,29 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
 
     function getScreenCasterDirection() {
       if (ariaSortValue === 'ascending') {
-        return 'Click to sort in descending order';
+        return (
+          <EuiI18n
+            token="euiTableHeaderCell.clickForDescending"
+            default="Click to sort in descending order"
+          />
+        );
       }
 
       if (allowNeutralSort && ariaSortValue === 'descending') {
-        return 'Click to unsort';
+        return (
+          <EuiI18n
+            token="euiTableHeaderCell.clickForUnsort"
+            default="Click to unsort"
+          />
+        );
       }
 
-      return 'Click to sort in ascending order';
+      return (
+        <EuiI18n
+          token="euiTableHeaderCell.clickForAscending"
+          default="Click to sort in ascending order"
+        />
+      );
     }
 
     return (
@@ -130,14 +147,38 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
           onClick={onSort}
           data-test-subj="tableHeaderSortButton">
           <span className={contentClasses}>
-            <span className="euiTableCellContent__text">{children}</span>
+            <EuiInnerText>
+              {(ref, innerText) => (
+                <EuiI18n
+                  token="euiTableHeaderCell.titleTextWithSort"
+                  default="{innerText}; Sorted in {ariaSortValue} order"
+                  values={{ innerText, ariaSortValue }}>
+                  {(titleTextWithSort: string) => (
+                    <span
+                      title={isSorted ? titleTextWithSort : innerText}
+                      ref={ref}
+                      className="euiTableCellContent__text">
+                      {children}
+                    </span>
+                  )}
+                </EuiI18n>
+              )}
+            </EuiInnerText>
+
             {isSorted && (
-              <EuiIcon
-                className="euiTableSortIcon"
-                type={isSortAscending ? 'sortUp' : 'sortDown'}
-                size="m"
-                aria-label={`Sorted in ${ariaSortValue} order`}
-              />
+              <EuiI18n
+                token="euiTableHeaderCell.sortedAriaLabel"
+                default="Sorted in {ariaSortValue} order"
+                values={{ ariaSortValue }}>
+                {(sortedAriaLabel: string) => (
+                  <EuiIcon
+                    className="euiTableSortIcon"
+                    type={isSortAscending ? 'sortUp' : 'sortDown'}
+                    size="m"
+                    aria-label={sortedAriaLabel}
+                  />
+                )}
+              </EuiI18n>
             )}
             <EuiScreenReaderOnly>
               <span>{getScreenCasterDirection()}</span>
@@ -156,7 +197,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>
   );