Merge pull request #207 from puppetlabs/pds-378-add-truncate-table-content-option

Allow cell content to be truncated with ellipses

Author: vine77

packages/react-components/source/react/library/table/Table.js

@@ -20,6 +20,8 @@ const propTypes = {
       dataKey: PropTypes.string.isRequired,
       /** Column header text */
       label: PropTypes.node,
+      /** Truncate long cell content with ellipses. Must also specify a maxWidth in either the style prop or through a className. Default: false */
+      hideOverflow: PropTypes.bool,
       /** Column header text */
       style: PropTypes.shape({}),
     }),
@@ -94,6 +96,7 @@ const Table = ({
               cellRenderer,
               columnData,
               dataKey,
+              hideOverflow,
               className: cellClassName,
               style,
             } = {
@@ -104,7 +107,11 @@ const Table = ({
             return (
               <td
                 key={dataKey}
-                className={classNames('rc-table-cell', cellClassName)}
+                className={classNames(
+                  'rc-table-cell',
+                  { 'rc-table-cell-hide-overflow': hideOverflow },
+                  cellClassName,
+                )}
                 style={style}
               >
                 {cellRenderer({

packages/react-components/source/react/library/table/Table.md

@@ -7,7 +7,7 @@ Tables display data and sometimes allow users to take action on that data. Table
 - Use headings to eliminate redundant words in columns. For example, instead of Version 3.8.4 and Version 3.8.5, title the column Version, and use only the version numbers in the table cells. This makes it easier for users to scan the options and reduces word count for Localization. Use sentence case capitalization.
 - Use capitalization appropriate to the item named in the cell. For example, if the cell lists an environment, use the same capitalization as the environment name.
 
-### Basic use
+## Basic use
 
 A basic table displays content and doesn't add additional capabilities.
 
@@ -32,6 +32,8 @@ const columns = [
 ```
 <!-- prettier-ignore-end -->
 
+## Variations
+
 ### Fixed layouts
 
 The `fixed` prop allows the table to be used in fixed layout mode. Provide explicit widths with the inline `style` parameter on each column or with an additional className.
@@ -185,3 +187,24 @@ A unique key can also be provided via a function:
   rowKey={rowData => rowdata.nested.uniqueKey}
 />
 ```
+
+### Hidden Overflow
+
+Use the `hideOverflow` flag if you want to hide long cell content with an ellipses. The flag only affects the column it is turned on for. You must provide explicit widths with the inline `style` parameter on each column you want to use it on or with an additional className.
+
+<!-- prettier-ignore-start -->
+```jsx
+const data = [
+  { id: 1, type: 'Lorem ipsum', passage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', characters: 123 },
+  { id: 2, type: 'Cicero', passage: 'Sed ut perspiciatis', characters: 19 },
+  { id: 3, type: '1914', passage: 'But I must explain to you how all this mistaken idea', characters: 52 },
+];
+
+const columns = [
+  { label: 'Types', dataKey: 'type' },
+  { label: 'Passage', dataKey: 'passage', style: { width: '50%'}, hideOverflow: true },
+  { label: 'Character Length', dataKey: 'characters' },
+];
+
+<Table fixed data={data} columns={columns} />;
+```

packages/react-components/source/scss/library/components/_table.scss

@@ -16,7 +16,7 @@
   border-radius: $puppet-common-border-radius;
   box-shadow: $puppet-common-elevation-50;
   overflow: hidden;
-  
+
   .rc-table-row:last-of-type .rc-table-cell {
     border-bottom: 0;
   }
@@ -55,4 +55,10 @@
 .rc-table-cell {
   @include puppet-type-small();
   padding: 15px 16px;
+
+  &.rc-table-cell-hide-overflow {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }