Skip to content
Permalink
Browse files

fix(data-tables): Add column wrap support (#2921)

* fix(data-tables): Add column wrap support

* Bump column support to 15

* Remove striped support
  • Loading branch information...
brandonferrua committed Nov 16, 2017
1 parent d6259b8 commit b8419612322679e542e1e0d59f541281b640987e
Showing with 34 additions and 1 deletion.
  1. +32 −0 ui/components/data-tables/base/_index.scss
  2. +2 −1 ui/components/data-tables/index.jsx
@@ -421,6 +421,38 @@
}
}

$max-column-support: 15;

@for $i from 1 through $max-column-support {

.slds-table_column-#{$i}-wrap tbody tr > *:nth-child(#{$i}) .slds-truncate {
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: none;
white-space: normal;
}
}

[class*="slds-table_column-"] tr td .slds-truncate {
overflow: hidden;
position: relative;
max-height: 3.25rem;

&:after {
content: '';
position: absolute;
top: 2.25rem;
bottom: 0;
right: 0;
width: 50%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 69%);
}
}

[class*="slds-table_column-"] tr:hover td .slds-truncate:after {
background: linear-gradient(to right, rgba(250, 250, 249, 0) 0%, rgba(250, 250, 249, 1) 69%);
}

/**
* Resizable data table columns
*
@@ -37,7 +37,8 @@ export const AdvancedDataTable = props => (
'slds-table slds-table_bordered slds-table_resizable-cols slds-table_fixed-layout',
props.className,
{
'slds-table_edit': props.isEditable
'slds-table_edit': props.isEditable,
'slds-table_column-3-wrap': props.columnWrap
}
)}
role="grid"

0 comments on commit b841961

Please sign in to comment.
You can’t perform that action at this time.