diff --git a/packages/react-components/source/react/library/table/Table.js b/packages/react-components/source/react/library/table/Table.js
index c64694cac..d1bc8e017 100644
--- a/packages/react-components/source/react/library/table/Table.js
+++ b/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 (
{cellRenderer({
diff --git a/packages/react-components/source/react/library/table/Table.md b/packages/react-components/source/react/library/table/Table.md
index 1dc388673..429c116d0 100644
--- a/packages/react-components/source/react/library/table/Table.md
+++ b/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 = [
```
+## 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.
+
+
+```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' },
+];
+
+;
+```
diff --git a/packages/react-components/source/scss/library/components/_table.scss b/packages/react-components/source/scss/library/components/_table.scss
index ab0514600..35b29e6b2 100644
--- a/packages/react-components/source/scss/library/components/_table.scss
+++ b/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;
+ }
}
|