Add tableLayout prop to EuiTable, EuiBasicTable and EuiInMemoryTable #2697
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| import React, { Component } from 'react'; | ||
|
|
||
| import { createDataStore } from '../data_store'; | ||
|
|
||
| import { | ||
| EuiBasicTable, | ||
| EuiLink, | ||
| EuiSpacer, | ||
| EuiSwitch, | ||
| } from '../../../../../src/components'; | ||
|
|
||
| /* | ||
| Example user object: | ||
|
|
||
| { | ||
| id: '1', | ||
| firstName: 'john', | ||
| lastName: 'doe', | ||
| github: 'johndoe', | ||
| dateOfBirth: Date.now(), | ||
| nationality: 'NL', | ||
| online: true | ||
| } | ||
|
|
||
| Example country object: | ||
|
|
||
| { | ||
| code: 'NL', | ||
| name: 'Netherlands', | ||
| flag: '🇳🇱' | ||
| } | ||
| */ | ||
|
|
||
| const store = createDataStore(); | ||
|
|
||
| const columns = [ | ||
| { | ||
| field: 'firstName', | ||
| name: 'First Name', | ||
| sortable: true, | ||
| 'data-test-subj': 'firstNameCell', | ||
| mobileOptions: { | ||
| render: item => ( | ||
| <span> | ||
| {item.firstName}{' '} | ||
| <EuiLink href="#" target="_blank"> | ||
| {item.lastName} | ||
| </EuiLink> | ||
| </span> | ||
| ), | ||
| header: false, | ||
| truncateText: false, | ||
| enlarge: true, | ||
| fullWidth: true, | ||
| }, | ||
| }, | ||
| { | ||
| field: 'lastName', | ||
| name: 'Last Name', | ||
| truncateText: true, | ||
| render: name => ( | ||
| <EuiLink href="#" target="_blank"> | ||
| {name} | ||
| </EuiLink> | ||
| ), | ||
| mobileOptions: { | ||
| show: false, | ||
| }, | ||
| }, | ||
| { | ||
| field: 'github', | ||
| name: 'Github', | ||
| }, | ||
| ]; | ||
|
|
||
| const items = store.users.filter((user, index) => index < 10); | ||
|
|
||
| const getRowProps = item => { | ||
| const { id } = item; | ||
| return { | ||
| 'data-test-subj': `row-${id}`, | ||
| className: 'customRowClass', | ||
| onClick: () => console.log(`Clicked row ${id}`), | ||
| }; | ||
| }; | ||
|
|
||
| const getCellProps = (item, column) => { | ||
| const { id } = item; | ||
| const { field } = column; | ||
| return { | ||
| className: 'customCellClass', | ||
| 'data-test-subj': `cell-${id}-${field}`, | ||
| textOnly: true, | ||
| }; | ||
| }; | ||
|
|
||
| export class Table extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| autoLayout: true, | ||
| }; | ||
| } | ||
|
|
||
| toggleTableLayout = () => { | ||
| this.setState(prevState => ({ autoLayout: !prevState.autoLayout })); | ||
| }; | ||
|
|
||
| render() { | ||
| return ( | ||
| <div> | ||
| <EuiSwitch | ||
| label="Show auto layout" | ||
| checked={this.state.autoLayout} | ||
| onChange={this.toggleTableLayout} | ||
| /> | ||
| <EuiSpacer size="m" /> | ||
| <EuiBasicTable | ||
| items={items} | ||
| columns={columns} | ||
| tableLayout={this.state.autoLayout ? 'auto' : 'fixed'} | ||
| rowProps={getRowProps} | ||
| cellProps={getCellProps} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,32 @@ | ||||||
| import React from 'react'; | ||||||
| import { GuideSectionTypes } from '../../../components'; | ||||||
| import { renderToHtml } from '../../../services'; | ||||||
| import { EuiCode } from '../../../../../src/components'; | ||||||
|
|
||||||
| import { Table } from './auto'; | ||||||
|
|
||||||
| const source = require('!!raw-loader!./auto'); | ||||||
| const html = renderToHtml(Table); | ||||||
|
|
||||||
| export const section = { | ||||||
| title: 'A BasicTable with auto layout', | ||||||
|
There was a problem hiding this comment. This section is no longer about just
Suggested change
|
||||||
| source: [ | ||||||
| { | ||||||
| type: GuideSectionTypes.JS, | ||||||
| code: source, | ||||||
| }, | ||||||
| { | ||||||
| type: GuideSectionTypes.HTML, | ||||||
| code: html, | ||||||
| }, | ||||||
| ], | ||||||
| text: ( | ||||||
| <div> | ||||||
| <p> | ||||||
| <EuiCode>EuiBasicTable</EuiCode> has a fixed layout by default. You can | ||||||
| change it to auto using the <EuiCode>tableLayout</EuiCode> prop. | ||||||
|
There was a problem hiding this comment. Seems like this description isn't enough to warrant an entire example in the docs? Consider beefing up this explanation or removing the example and just relying on props comments to explain the prop. There was a problem hiding this comment. Agree that a props comment is likely enough and this concept doesn't need a full example. Only alternative (which should be handled in a separate PR) would be to do something similar to There was a problem hiding this comment. That was going to be my third suggestion, but figured it out of scope of this PR. So probably best to just remove this example for now. |
||||||
| </p> | ||||||
| </div> | ||||||
| ), | ||||||
| demo: <Table />, | ||||||
cchaos marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
| }; | ||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { section } from './auto_section'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.