Skip to content

Commit

Permalink
Change EuiBasicTable to support explicitly setting truncateText and t…
Browse files Browse the repository at this point in the history
…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.
  • Loading branch information
cjcenizal authored Mar 22, 2018
1 parent 670da9f commit 23f87e5
Show file tree
Hide file tree
Showing 14 changed files with 95 additions and 38 deletions.
7 changes: 5 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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)

Expand Down
4 changes: 3 additions & 1 deletion src-docs/src/views/tables/actions/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
15 changes: 8 additions & 7 deletions src-docs/src/views/tables/basic/basic.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
9 changes: 3 additions & 6 deletions src-docs/src/views/tables/custom/custom.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/views/tables/data_store.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)),
Expand Down
6 changes: 4 additions & 2 deletions src-docs/src/views/tables/in_memory/in_memory.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
6 changes: 4 additions & 2 deletions src-docs/src/views/tables/in_memory/in_memory_search.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
6 changes: 4 additions & 2 deletions src-docs/src/views/tables/in_memory/in_memory_selection.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
6 changes: 4 additions & 2 deletions src-docs/src/views/tables/paginated/paginated.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
6 changes: 4 additions & 2 deletions src-docs/src/views/tables/selection/selection.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
6 changes: 4 additions & 2 deletions src-docs/src/views/tables/sorting/sorting.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
40 changes: 35 additions & 5 deletions src/components/basic_table/basic_table.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
12 changes: 11 additions & 1 deletion src/components/table/_table.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 */
}
}

0 comments on commit 23f87e5

Please sign in to comment.