Change EuiBasicTable to support explicitly setting truncateText and t…

…extOnly on column definitions, and support passing through unrecognized props to the cell. (#565) - Update CSS so that long single-word cell content will break and wrap mid-word.
elastic · Mar 22, 2018 · 23f87e5 · 23f87e5
1 parent 670da9f
commit 23f87e5
Show file tree

Hide file tree

Showing 14 changed files with 95 additions and 38 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,13 +1,16 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
 - Adjust `EuiCallOut` and dark theme warning coloring ([#563](https://github.com/elastic/eui/pull/563))
+- Added a `buttonColor` prop to `EuiConfirmModal` ([#546](https://github.com/elastic/eui/pull/546))
+- Added 'baseline' as option to `EuiFlexGroup`'s `alignItems` prop ([#546](https://github.com/elastic/eui/pull/546))
 
 **Bug fixes**
 
 - Fixed `EuiToolTip` bug which caused the tooltip to hide when moving the mouse around inside of the trigger element ([#557](https://github.com/elastic/eui/pull/557), [#564](https://github.com/elastic/eui/pull/564))
-- Added a `buttonColor` prop to `EuiConfirmModal` ([#546](https://github.com/elastic/eui/pull/546))
-- Added 'baseline' as option to `EuiFlexGroup`'s `alignItems` prop ([#546](https://github.com/elastic/eui/pull/546))
 - Fixed a bug where `EuiButtonEmpty` would offer a white background on hover when it was disabled, even when there was no such background transition on hover when the buttons are not disabled ([#561](https://github.com/elastic/eui/pull/561))
+- Fixed table cell bugs ([#565](https://github.com/elastic/eui/pull/565))
+  - `EuiBasicTable`  now supports explicitly setting `truncateText` and `textOnly` on column definitions, and supports passing through unrecognized props to the cell (e.g. `data-test-subj`).
+  - Updated table cell CSS so that long single-word cell content will break and wrap mid-word.
 
 # [`0.0.33`](https://github.com/elastic/eui/tree/v0.0.33)
 

diff --git a/src-docs/src/views/tables/actions/actions.js b/src-docs/src/views/tables/actions/actions.js
@@ -129,10 +129,12 @@ export class Table extends Component {
     const columns = [{
       field: 'firstName',
       name: 'First Name',
+      truncateText: true,
       sortable: true
     }, {
       field: 'lastName',
-      name: 'Last Name'
+      name: 'Last Name',
+      truncateText: true,
     }, {
       field: 'github',
       name: 'Github',

diff --git a/src-docs/src/views/tables/basic/basic.js b/src-docs/src/views/tables/basic/basic.js
@@ -35,18 +35,19 @@ const store = createDataStore();
 export const Table = () => {
   const columns = [{
     field: 'firstName',
-    name: 'First Name'
+    name: 'First Name',
+    sortable: true,
+    'data-test-subj': 'firstNameCell',
   }, {
     field: 'lastName',
-    name: 'Last Name'
+    name: 'Last Name',
+    truncateText: true,
+    render: (name) => (
+      <EuiLink href="#" target="_blank">{name}</EuiLink>
+    )
   }, {
     field: 'github',
     name: 'Github',
-    render: (username) => (
-      <EuiLink href={`https://github.com/${username}`} target="_blank">
-        {username}
-      </EuiLink>
-    )
   }, {
     field: 'dateOfBirth',
     name: 'Date of Birth',

diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js
@@ -65,19 +65,16 @@ export default class extends Component {
       health: <EuiHealth color="success">Healthy</EuiHealth>,
     }, {
       id: 2,
-      title: {
-        value: 'Boomerang',
-        isLink: true,
-      },
+      title: <span>A very long line in an ELEMENT which will wrap on narrower screens and NOT become truncated and replaced by an ellipsis</span>,
       type: 'user',
       dateCreated: <span>Tue Dec 01 2016 &nbsp; <EuiBadge color="secondary">New!</EuiBadge></span>,
       magnitude: 10,
       health: <EuiHealth color="warning">Warning</EuiHealth>,
     }, {
       id: 3,
       title: {
-        value: 'Celebration',
-        isLink: true,
+        value: <span>A very long line in an ELEMENT which will not wrap on narrower screens and instead will become truncated and replaced by an ellipsis</span>,
+        truncateText: true,
       },
       type: 'user',
       dateCreated: 'Tue Dec 16 2016',

diff --git a/src-docs/src/views/tables/data_store.js b/src-docs/src/views/tables/data_store.js
@@ -35,8 +35,8 @@ const createUsers = (countries) => {
   return times(20, (index) => {
     return {
       id: index,
-      firstName: random.oneOf(['Martijn', 'Elissa', 'Clinton', 'Igor', 'Karl', 'Drew', 'Honza', 'Rashid', 'Jordan']),
-      lastName: random.oneOf(['van Groningen', 'Weve', 'Gormley', 'Motov', 'Minarik', 'Raines', 'Král', 'Khan', 'Sissel']),
+      firstName: random.oneOf(['Very long first name that will wrap or be truncated', 'Another very long first name which will wrap or be truncated', 'Clinton', 'Igor', 'Karl', 'Drew', 'Honza', 'Rashid', 'Jordan']),
+      lastName: random.oneOf(['Very long last name that will wrap or be truncated', 'Another very long last name which will wrap or be truncated', 'Gormley', 'Motov', 'Minarik', 'Raines', 'Král', 'Khan', 'Sissel']),
       github: random.oneOf(['martijnvg', 'elissaw', 'clintongormley', 'imotov', 'karmi', 'drewr', 'HonzaKral', 'rashidkpc', 'jordansissel']),
       dateOfBirth: random.date({ min: new Date(1971, 0, 0), max: new Date(1990, 0, 0) }),
       nationality: random.oneOf(countries.map(country => country.code)),

diff --git a/src-docs/src/views/tables/in_memory/in_memory.js b/src-docs/src/views/tables/in_memory/in_memory.js
@@ -35,10 +35,12 @@ export const Table = () => {
   const columns = [{
     field: 'firstName',
     name: 'First Name',
-    sortable: true
+    sortable: true,
+    truncateText: true,
   }, {
     field: 'lastName',
-    name: 'Last Name'
+    name: 'Last Name',
+    truncateText: true,
   }, {
     field: 'github',
     name: 'Github',

diff --git a/src-docs/src/views/tables/in_memory/in_memory_search.js b/src-docs/src/views/tables/in_memory/in_memory_search.js
@@ -49,10 +49,12 @@ export class Table extends Component {
     const columns = [{
       field: 'firstName',
       name: 'First Name',
-      sortable: true
+      sortable: true,
+      truncateText: true,
     }, {
       field: 'lastName',
-      name: 'Last Name'
+      name: 'Last Name',
+      truncateText: true,
     }, {
       field: 'github',
       name: 'Github',

diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_callback.js b/src-docs/src/views/tables/in_memory/in_memory_search_callback.js
@@ -88,11 +88,13 @@ export class Table extends React.Component {
           {
             field: 'firstName',
             name: 'First Name',
-            sortable: true
+            sortable: true,
+            truncateText: true,
           },
           {
             field: 'lastName',
-            name: 'Last Name'
+            name: 'Last Name',
+            truncateText: true,
           },
           {
             field: 'github',

diff --git a/src-docs/src/views/tables/in_memory/in_memory_selection.js b/src-docs/src/views/tables/in_memory/in_memory_selection.js
@@ -144,10 +144,12 @@ export class Table extends Component {
     const columns = [{
       field: 'firstName',
       name: 'First Name',
-      sortable: true
+      sortable: true,
+      truncateText: true,
     }, {
       field: 'lastName',
-      name: 'Last Name'
+      name: 'Last Name',
+      truncateText: true,
     }, {
       field: 'github',
       name: 'Github',

diff --git a/src-docs/src/views/tables/paginated/paginated.js b/src-docs/src/views/tables/paginated/paginated.js
@@ -69,10 +69,12 @@ export class Table extends Component {
 
     const columns = [{
       field: 'firstName',
-      name: 'First Name'
+      name: 'First Name',
+      truncateText: true,
     }, {
       field: 'lastName',
-      name: 'Last Name'
+      name: 'Last Name',
+      truncateText: true,
     }, {
       field: 'github',
       name: 'Github',

diff --git a/src-docs/src/views/tables/selection/selection.js b/src-docs/src/views/tables/selection/selection.js
@@ -117,10 +117,12 @@ export class Table extends Component {
     const columns = [{
       field: 'firstName',
       name: 'First Name',
-      sortable: true
+      sortable: true,
+      truncateText: true,
     }, {
       field: 'lastName',
-      name: 'Last Name'
+      name: 'Last Name',
+      truncateText: true,
     }, {
       field: 'github',
       name: 'Github',

diff --git a/src-docs/src/views/tables/sorting/sorting.js b/src-docs/src/views/tables/sorting/sorting.js
@@ -81,10 +81,12 @@ export class Table extends Component {
     const columns = [{
       field: 'firstName',
       name: 'First Name',
-      sortable: true
+      sortable: true,
+      truncateText: true,
     }, {
       field: 'lastName',
-      name: 'Last Name'
+      name: 'Last Name',
+      truncateText: true,
     }, {
       field: 'github',
       name: 'Github',

diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js
@@ -557,26 +557,56 @@ export class EuiBasicTable extends Component {
   }
 
   renderItemFieldDataCell(itemId, item, column, columnIndex) {
-    const key = `_data_column_${column.field}_${itemId}_${columnIndex}`;
+    const {
+      field,
+      render,
+      textOnly,
+      name, // eslint-ignore-line no-unused-vars
+      description, // eslint-ignore-line no-unused-vars
+      dataType, // eslint-ignore-line no-unused-vars
+      sortable, // eslint-ignore-line no-unused-vars
+      ...rest
+    } = column;
+
+    const key = `_data_column_${field}_${itemId}_${columnIndex}`;
     const align = this.resolveColumnAlign(column);
-    const textOnly = !column.render;
-    const value = get(item, column.field);
+    const value = get(item, field);
     const contentRenderer = this.resolveContentRenderer(column);
     const content = contentRenderer(value, item);
     return (
-      <EuiTableRowCell key={key} align={align} truncateText={column.truncateText} textOnly={textOnly}>
+      <EuiTableRowCell
+        key={key}
+        align={align}
+        // If there's no render function defined then we're only going to render text.
+        textOnly={textOnly || !render}
+        {...rest}
+      >
         {content}
       </EuiTableRowCell>
     );
   }
 
   renderItemComputedCell(itemId, item, column, columnIndex) {
+    const {
+      field, // eslint-ignore-line no-unused-vars
+      render, // eslint-ignore-line no-unused-vars
+      name, // eslint-ignore-line no-unused-vars
+      description, // eslint-ignore-line no-unused-vars
+      dataType, // eslint-ignore-line no-unused-vars
+      sortable, // eslint-ignore-line no-unused-vars
+      ...rest
+    } = column;
+
     const key = `_computed_column_${itemId}_${columnIndex}`;
     const align = this.resolveColumnAlign(column);
     const contentRenderer = this.resolveContentRenderer(column);
     const content = contentRenderer(item);
     return (
-      <EuiTableRowCell key={key} align={align} truncateText={column.truncateText} textOnly={false}>
+      <EuiTableRowCell
+        key={key}
+        align={align}
+        {...rest}
+      >
         {content}
       </EuiTableRowCell>
     );

diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
@@ -104,9 +104,14 @@
   padding: $euiSizeS; /* 2 */
 }
 
+  /**
+   * 1. Prevent very long single words (e.g. the name of a field in a document) from overflowing
+   *    the cell.
+   */
   .euiTableCellContent__text {
     min-width: 0;
     text-overflow: ellipsis;
+    word-break: break-word; /* 1 */
   }
 
 .euiTableCellContent--alignRight {
@@ -128,8 +133,13 @@
 .euiTableCellContent--overflowingContent {
   overflow: visible;
   white-space: normal;
+  word-break: break-word;
 
+  /**
+   * 1. Prevent very long single words (e.g. the name of a field in a document) from overflowing
+   *    the cell.
+   */
   .euiTableCellContent__text {
-    overflow: visible;
+    overflow: visible; /* 1 */
   }
 }