diff --git a/CHANGELOG.md b/CHANGELOG.md
index 943bc61dff9..d059ac22ed0 100644
--- a/CHANGELOG.md
+++ b/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**
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
index 626acbbb17a..ca1efc513cd 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -163,11 +163,14 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
-
- Name
-
+
+
+ Name
+
+
diff --git a/src/components/table/table_header_button.tsx b/src/components/table/table_header_button.tsx
index bf305e6d943..09003089881 100644
--- a/src/components/table/table_header_button.tsx
+++ b/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 = ({
return (
);
diff --git a/src/components/table/table_header_cell.tsx b/src/components/table/table_header_cell.tsx
index db0e2dcdb88..9ddb2694118 100644
--- a/src/components/table/table_header_cell.tsx
+++ b/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,
@@ -16,6 +17,7 @@ import {
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 = ({
function getScreenCasterDirection() {
if (ariaSortValue === 'ascending') {
- return 'Click to sort in descending order';
+ return (
+
+ );
}
if (allowNeutralSort && ariaSortValue === 'descending') {
- return 'Click to unsort';
+ return (
+
+ );
}
- return 'Click to sort in ascending order';
+ return (
+
+ );
}
return (
@@ -130,14 +147,38 @@ export const EuiTableHeaderCell: FunctionComponent = ({
onClick={onSort}
data-test-subj="tableHeaderSortButton">
- {children}
+
+ {(ref, innerText) => (
+
+ {(titleTextWithSort: string) => (
+
+ {children}
+
+ )}
+
+ )}
+
+
{isSorted && (
-
+
+ {(sortedAriaLabel: string) => (
+
+ )}
+
)}
{getScreenCasterDirection()}
@@ -156,7 +197,16 @@ export const EuiTableHeaderCell: FunctionComponent = ({
style={styleObj}
{...rest}>
- {children}
+
+ {(ref, innerText) => (
+
+ {children}
+
+ )}
+
);