Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple fixes for mobile tables #1462

Merged
merged 15 commits into from
Feb 25, 2019
11 changes: 10 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
## [`master`](https://github.com/elastic/eui/tree/master)

No public interface changes since `8.0.0`.
- Added `mobileOptions` object prop for handling of all the mobile specific options of `EuiBasicTable` ([#1462](https://github.com/elastic/eui/pull/1462))
- Table headers now accept `React.node` types ([#1462](https://github.com/elastic/eui/pull/1462))

**Bug fixes**

- `EuiBasicTable` select all shows up on mobile ([#1462](https://github.com/elastic/eui/pull/1462))

**Breaking changes**

- `EuiBasicTable`'s select all checkbox appends a `makeId` string to the id ([#1462](https://github.com/elastic/eui/pull/1462))

## [`8.0.0`](https://github.com/elastic/eui/tree/v8.0.0)

Expand Down
21 changes: 12 additions & 9 deletions src-docs/src/views/tables/actions/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -218,19 +218,22 @@ export class Table extends Component {
name: 'First Name',
truncateText: true,
sortable: true,
hideForMobile: true,
mobileOptions: {
render: (item) => (
<span>{item.firstName} {item.lastName}</span>
),
header: false,
truncateText: false,
enlarge: true,
fullWidth: true,
}
}, {
field: 'lastName',
name: 'Last Name',
truncateText: true,
hideForMobile: true,
}, {
field: 'firstName',
name: 'Full Name',
isMobileHeader: true,
render: (name, item) => (
<span>{item.firstName} {item.lastName}</span>
),
mobileOptions: {
show: false,
}
}, {
field: 'github',
name: 'Github',
Expand Down
21 changes: 12 additions & 9 deletions src-docs/src/views/tables/basic/basic.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,23 +37,26 @@ export const Table = () => {
field: 'firstName',
name: 'First Name',
sortable: true,
hideForMobile: 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,
hideForMobile: true,
render: (name) => (
<EuiLink href="#" target="_blank">{name}</EuiLink>
),
}, {
field: 'firstName',
name: 'Full Name',
isMobileHeader: true,
render: (name, item) => (
<span>{item.firstName} <EuiLink href="#" target="_blank">{item.lastName}</EuiLink></span>
),
mobileOptions: {
show: false,
}
}, {
field: 'github',
name: 'Github',
Expand Down
50 changes: 48 additions & 2 deletions src-docs/src/views/tables/basic/props_info.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,20 @@ export const propsInfo = {
type: { name: 'object[]' }
},
itemId: {
description: 'describes how to extract a unique ID from each item, used for selections & expanded rows',
description: 'Describes how to extract a unique ID from each item, used for selections & expanded rows',
required: false,
type: { name: 'string | (item) => string' }
},
itemIdToExpandedRowMap: {
description: 'Row expansion uses the `itemId` prop to identify each row',
required: false,
type: { name: 'object[]' }
},
cellProps: {
description: 'Applied to `EuiTableRowCell`',
required: false,
type: { name: 'func | object[]' }
},
compressed: {
description: 'Makes the font and padding smaller for the entire table',
type: { name: 'bool' }
Expand All @@ -22,11 +32,47 @@ export const propsInfo = {
required: true,
type: { name: '(#FieldDataColumn | #ComputedColumn | #ActionsColumn)[]' }
},
error: {
description: 'Error message to display',
required: false,
type: { name: 'string' }
},
hasActions: {
description: 'Needed at the top level for responsive positioning',
type: { name: 'bool' }
},
isExpandable: {
description: 'Needed at the top level for responsive positioning',
type: { name: 'bool' }
},
isSelectable: {
description: 'Needed at the top level for responsive positioning',
type: { name: 'bool' }
},
loading: {
description: 'Provides an infinite loading indicator',
type: { name: 'bool' }
},
noItemsMessage: {
description: 'Message to display if table is empty',
required: false,
type: { name: 'node' }
},
pagination: {
description: 'Configures pagination',
required: false,
type: { name: '#Pagination' }
},
responsive: {
description: 'If `true`, will convert table to cards in mobile view',
type: { name: 'bool' },
defaultValue: { value: 'true' },
},
rowProps: {
description: 'Applied to `EuiTableRow`',
required: false,
type: { name: 'func | object[]' }
},
sorting: {
description: 'Configures sorting',
required: false,
Expand All @@ -38,7 +84,7 @@ export const propsInfo = {
type: { name: '#Selection' }
},
onChange: {
description: 'Called whenever pagination or sorting changes (this property is required when either' +
description: 'Called whenever pagination or sorting changes (this property is required when either ' +
'pagination or sorting is configured',
required: false,
type: { name: '(criteria: #Criteria) => void' }
Expand Down
24 changes: 17 additions & 7 deletions src-docs/src/views/tables/custom/custom.js
Original file line number Diff line number Diff line change
Expand Up @@ -221,18 +221,27 @@ export default class extends Component {
alignment: LEFT_ALIGNMENT,
width: '24px',
cellProvider: cell => <EuiIcon type={cell} size="m" />,
hideForMobile: true,
mobileOptions: {
show: false,
}
}, {
id: 'title',
label: 'Title',
footer: <em>Title</em>,
alignment: LEFT_ALIGNMENT,
isSortable: true,
hideForMobile: true,
mobileOptions: {
show: false,
}
}, {
id: 'title_type',
label: 'Title',
isMobileHeader: true,
mobileOptions: {
only: true,
header: false,
enlarge: true,
fullWidth: true,
},
render: (title, item) => (
<span><EuiIcon type={item.type} size="m" style={{ verticalAlign: 'text-top' }} /> {title}</span>
),
Expand Down Expand Up @@ -420,7 +429,7 @@ export default class extends Component {
onSort={column.isSortable ? this.onSort.bind(this, column.id) : undefined}
isSorted={this.state.sortedColumn === column.id}
isSortAscending={this.sortableProperties.isAscendingByName(column.id)}
isMobileHeader={column.isMobileHeader}
mobileOptions={column.mobileOptions}
>
{column.label}
</EuiTableHeaderCell>
Expand Down Expand Up @@ -527,12 +536,13 @@ export default class extends Component {
return (
<EuiTableRowCell
key={column.id}
header={column.label}
align={column.alignment}
truncateText={cell && cell.truncateText}
textOnly={cell ? cell.textOnly : true}
hideForMobile={column.hideForMobile}
isMobileHeader={column.isMobileHeader}
mobileOptions={{
header: column.label,
...column.mobileOptions
}}
>
{child}
</EuiTableRowCell>
Expand Down
8 changes: 4 additions & 4 deletions src-docs/src/views/tables/custom/custom_section.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
EuiTableHeaderCellCheckbox,
EuiTablePagination,
EuiTableRow,
EuiTableRowCell,
EuiTableRowCellCheckbox,
EuiTableHeaderMobile,
EuiTableSortMobile,
Expand All @@ -22,6 +21,7 @@ import { renderToHtml } from '../../../services';
import Custom from './custom';
const source = require('!!raw-loader!./custom');
const html = renderToHtml(Custom);
import { cellPropsInfo } from './props_info';

export const section = {
title: 'Build a custom table from individual components',
Expand Down Expand Up @@ -50,12 +50,12 @@ export const section = {
Responsive extras
</h3>
<p>
You must supply a <EuiCode>header</EuiCode> prop equivalent to the column header
You must supply a <EuiCode>mobileOptions.header</EuiCode> prop equivalent to the column header
on each <EuiCode>EuiTableRowCell</EuiCode> so that the mobile version will use that
to populate the per cell headers.
</p>
<p>
Also, custom table implementation <strong>will not</strong> auto-populate any header level functions
Also, custom table implementations <strong>will not</strong> auto-populate any header level functions
like selection and filtering. In order to add mobile support for these functions,
you will need to implement the <EuiCode>EuiTableHeaderMobile</EuiCode> component
as a wrapper around these and use <EuiCode>EuiTableSortMobile</EuiCode>
Expand All @@ -73,8 +73,8 @@ export const section = {
EuiTableHeaderCellCheckbox,
EuiTablePagination,
EuiTableRow,
EuiTableRowCell,
EuiTableRowCellCheckbox,
...cellPropsInfo,
EuiTableHeaderMobile,
EuiTableSortMobile,
EuiTableSortMobileItem,
Expand Down
128 changes: 128 additions & 0 deletions src-docs/src/views/tables/custom/props_info.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
export const cellPropsInfo = {

EuiTableRowCell: {
__docgenInfo: {
props: {
sharedProps: {
description: 'These props can be passed at the top level or within #mobileOptions',
type: { name: '#sharedProps' },
},
colSpan: {
description: 'Number of columns to span',
required: false,
type: { name: 'number' },
},
hasActions: {
description: 'Indicates if the column is dedicated to icon-only actions (currently affects mobile only)',
required: false,
type: { name: 'bool' }
},
isExpander: {
description: 'Indicates if the column is dedicated as the expandable row toggle',
required: false,
type: { name: 'bool' }
},
mobileOptions: {
description: 'Object of mobile specific options for displaying differently at small screens',
required: false,
type: { name: '#mobileOptions' },
},
header: {
description: 'DEPRECATED: use `mobileOptions.header`',
required: false,
type: { name: 'bool' }
},
isMobileHeader: {
description: 'DEPRECATED: use `mobileOptions.only = true & mobileOptions.header = false`',
required: false,
type: { name: 'bool' }
},
hideForMobile: {
description: 'DEPRECATED: use `mobileOptions.show = false`',
required: false,
type: { name: 'bool' }
},
isMobileFullWidth: {
description: 'DEPRECATED: use `mobileOptions.fullWidth`',
required: false,
type: { name: 'bool' }
},
}
}
},

sharedProps: {
__docgenInfo: {
_euiObjectType: 'type',
props: {
align: {
description: 'Horizontal alignment of the text in the cell',
required: false,
type: { name: 'left | right | center' },
defaultValue: { value: 'left' },
},
truncateText: {
description: 'Don\'t allow line breaks within cells',
required: false,
type: { name: 'bool' }
},
textOnly: {
description: 'Setting `textOnly` to `false` will break words unnecessarily on FF and IE. ' +
'To combat this problem on FF, wrap contents with the css utility `.eui-textBreakWord`.',
required: false,
type: { name: 'bool' }
},
showOnHover: {
description: '_Should only be used for action cells_',
required: false,
type: { name: 'bool' }
},
}
}
},

mobileOptions: {
__docgenInfo: {
_euiObjectType: 'type',
props: {
show: {
description: 'If false, will not render the cell at all for mobile',
required: false,
type: { name: 'bool' },
defaultValue: { value: 'true' },
},
only: {
description: 'Only show for mobile? If true, will not render the column at all for desktop',
required: false,
type: { name: 'bool' }
},
render: {
description: 'Custom render/children if different from desktop',
required: false,
type: { name: 'node' }
},
header: {
description: 'The column\'s header for use in mobile view (automatically passed down when using `EuiBasicTable`). ' +
'Or pass `false` to not show a header at all.',
required: false,
type: { name: 'node | bool' }
},
enlarge: {
description: 'Increase text size compared to rest of cells',
required: false,
type: { name: 'bool' }
},
fullWidth: {
description: 'Allocates 100% of the width of the container in mobile view (typically cells are contained to 50%)',
required: false,
type: { name: 'bool' }
},
sharedProps: {
description: 'These props will only work if a mobile specific `render` function is also passed',
type: { name: '#sharedProps' },
},
}
}
},

};
Loading