Support nodes in EuiBasicTable column headers (#1234)

elastic · Oct 10, 2018 · aa50e32 · aa50e32
1 parent 0cf8fde
commit aa50e32
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 241 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `4.4.1`.
+- Added support for nodes as column headers in `EuiBasicTable` for supporting things like tooltips and localized text. ([#1234](https://github.com/elastic/eui/pull/1234))
 
 ## [`4.4.1`](https://github.com/elastic/eui/tree/v4.4.1)
 

diff --git a/src-docs/src/views/tables/basic/props_info.js b/src-docs/src/views/tables/basic/props_info.js
@@ -150,7 +150,7 @@ export const propsInfo = {
         name: {
           description: 'The display name of the column',
           required: true,
-          type: { name: 'string' }
+          type: { name: 'PropTypes.node' }
         },
         description: {
           description: 'A description of the column (will be presented as a title over the column header',
@@ -213,7 +213,7 @@ export const propsInfo = {
         name: {
           description: 'The display name of the column',
           required: false,
-          type: { name: 'string' }
+          type: { name: 'PropTypes.node' }
         },
         description: {
           description: 'A description of the column (will be presented as a title over the column header',
@@ -248,7 +248,7 @@ export const propsInfo = {
         name: {
           description: 'The display name of the column',
           required: false,
-          type: { name: 'string' }
+          type: { name: 'PropTypes.node' }
         },
         description: {
           description: 'A description of the column (will be presented as a title over the column header',

diff --git a/src-docs/src/views/tables/custom/compressed.js b/src-docs/src/views/tables/custom/compressed.js
diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js
@@ -581,7 +581,6 @@ export default class extends Component {
         footers.push(
           <EuiTableFooterCell
             key={`footer_${column.id}`}
-            header={column.title}
             align={column.alignment}
           >
             {footer}
@@ -591,7 +590,6 @@ export default class extends Component {
         footers.push(
           <EuiTableFooterCell
             key={`footer_empty_${footers.length - 1}`}
-            header={column.title}
             align={column.alignment}
           >
             {undefined}

diff --git a/src-docs/src/views/tables/sorting/sorting.js b/src-docs/src/views/tables/sorting/sorting.js
@@ -1,13 +1,15 @@
 import React, {
-  Component
+  Component,
 } from 'react';
 import { formatDate } from '../../../../../src/services/format';
 import { createDataStore } from '../data_store';
 
 import {
   EuiBasicTable,
-  EuiLink,
   EuiHealth,
+  EuiIcon,
+  EuiLink,
+  EuiToolTip,
 } from '../../../../../src/components';
 
 /*
@@ -99,28 +101,52 @@ export class Table extends Component {
       )
     }, {
       field: 'github',
-      name: 'Github',
+      name: (
+        <EuiToolTip content="Their mascot is the Octokitty">
+          <span>
+            Github <EuiIcon size="s" color="subdued" type="questionInCircle" />
+          </span>
+        </EuiToolTip>
+      ),
       render: (username) => (
         <EuiLink href={`https://github.com/${username}`} target="_blank">
           {username}
         </EuiLink>
       )
     }, {
       field: 'dateOfBirth',
-      name: 'Date of Birth',
+      name: (
+        <EuiToolTip content="Colloquially known as a 'birthday'">
+          <span>
+            Date of Birth <EuiIcon size="s" color="subdued" type="questionInCircle" />
+          </span>
+        </EuiToolTip>
+      ),
       dataType: 'date',
       render: (date) => formatDate(date, 'dobLong'),
       sortable: true
     }, {
       field: 'nationality',
-      name: 'Nationality',
+      name: (
+        <EuiToolTip content="The nation in which this person resides">
+          <span>
+            Nationality <EuiIcon size="s" color="subdued" type="questionInCircle" />
+          </span>
+        </EuiToolTip>
+      ),
       render: (countryCode) => {
         const country = store.getCountry(countryCode);
         return `${country.flag} ${country.name}`;
       }
     }, {
       field: 'online',
-      name: 'Online',
+      name: (
+        <EuiToolTip content="Free to talk or busy with business">
+          <span>
+            Online <EuiIcon size="s" color="subdued" type="questionInCircle" />
+          </span>
+        </EuiToolTip>
+      ),
       dataType: 'boolean',
       render: (online) => {
         const color = online ? 'success' : 'danger';

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -721,7 +721,6 @@ exports[`EuiBasicTable footers render with pagination, selection, sorting, and f
         />
         <EuiTableFooterCell
           align="left"
-          header="Name"
           key="footer_name"
         >
           <strong>
@@ -730,14 +729,12 @@ exports[`EuiBasicTable footers render with pagination, selection, sorting, and f
         </EuiTableFooterCell>
         <EuiTableFooterCell
           align="left"
-          header="ID"
           key="footer_id"
         >
           ID
         </EuiTableFooterCell>
         <EuiTableFooterCell
           align="left"
-          header="Age"
           key="footer_age"
         >
           <strong>