diff --git a/changelogs/upcoming/7621.md b/changelogs/upcoming/7621.md new file mode 100644 index 00000000000..548a7ad74dc --- /dev/null +++ b/changelogs/upcoming/7621.md @@ -0,0 +1,3 @@ +**Breaking changes** + +- Removed unused `EuiTableHeaderButton` component diff --git a/changelogs/upcoming/7625.md b/changelogs/upcoming/7625.md new file mode 100644 index 00000000000..359270b08d7 --- /dev/null +++ b/changelogs/upcoming/7625.md @@ -0,0 +1,10 @@ +- Updated `EuiTable`, `EuiBasicTable`, and `EuiInMemoryTable` with a new `responsiveBreakpoint` prop, which allows customizing the point at which the table collapses into a mobile-friendly view with cards +- Updated `EuiProvider`'s `componentDefaults` prop to allow configuring `EuiTable.responsiveBreakpoint` + +**Breaking changes** + +- Removed the `responsive` prop from `EuiTable`, `EuiBasicTable`, and `EuiInMemoryTable`. Use the new `responsiveBreakpoint` prop instead + +**DOM changes** + +- `EuiTable` mobile headers no longer render in the DOM when not visible (previously rendered with `display: none`). This may affect DOM testing assertions. diff --git a/changelogs/upcoming/7631.md b/changelogs/upcoming/7631.md new file mode 100644 index 00000000000..f2647c0b2d3 --- /dev/null +++ b/changelogs/upcoming/7631.md @@ -0,0 +1,3 @@ +**DOM changes** + +- `EuiTableRowCell` now applies passed `className`s to the parent `` element, instead of to the inner cell content `
`. diff --git a/changelogs/upcoming/7632.md b/changelogs/upcoming/7632.md new file mode 100644 index 00000000000..4bcdfa32ca4 --- /dev/null +++ b/changelogs/upcoming/7632.md @@ -0,0 +1,10 @@ +**Breaking changes** + +- The following props are no longer needed by `EuiBasicTable` or `EuiInMemoryTable` for responsive table behavior to work correctly, and can be removed: + - `isSelectable` + - `isExpandable` + - `hasActions` + +**DOM changes** + +- `EuiTableRow`s rendered by basic and memory tables now only render a `.euiTableRow-isSelectable` className if the selection checkbox is not disabled diff --git a/changelogs/upcoming/7640.md b/changelogs/upcoming/7640.md new file mode 100644 index 00000000000..a24b726ba53 --- /dev/null +++ b/changelogs/upcoming/7640.md @@ -0,0 +1,7 @@ +**Bug fixes** + +- `EuiBasicTable` & `EuiInMemoryTable` `isPrimary` actions are now correctly shown on mobile views + +**Breaking changes** + +- Removed the `showOnHover` prop from `EuiTableRowCell` / `EuiBasicTable`/`EuiInMemoryTable`'s `columns` API. Use the new actions `columns[].actions[].showOnHover` API instead. diff --git a/changelogs/upcoming/7641.md b/changelogs/upcoming/7641.md new file mode 100644 index 00000000000..7a007a7b5b9 --- /dev/null +++ b/changelogs/upcoming/7641.md @@ -0,0 +1,3 @@ +**DOM changes** + +- `EuiTableRowCell`s with `textOnly` set to `false` will no longer attempt to apply the `.euiTableCellContent__text` className to child elements. diff --git a/changelogs/upcoming/7642.md b/changelogs/upcoming/7642.md new file mode 100644 index 00000000000..ca6038416d5 --- /dev/null +++ b/changelogs/upcoming/7642.md @@ -0,0 +1,15 @@ +**Bug fixes** + +- Table `mobileOptions`: + - `mobileOptions.align` is now respected instead of all cells being forced to left alignment + - `textTruncate` and `textOnly` are now respected even if a `render` function is not passed + +**Breaking changes** + +- Removed top-level `textOnly` prop from `EuiBasicTable` and `EuiInMemoryTable`. Use `columns[].textOnly` instead. + +**DOM changes** + +- `EuiTableRowCell` no longer renders mobile headers to the DOM unless the current table is displaying its responsive view. +- `EuiTableHeaderCell` and `EuiTableRowCell` will no longer render in the DOM at all on mobile if their columns' `mobileOptions.show` is set to `false`. +- `EuiTableHeaderCell` and `EuiTableRowCell` will no longer render in the DOM at all on desktop if their columns' `mobileOptions.only` is set to `true`. diff --git a/changelogs/upcoming/7654.md b/changelogs/upcoming/7654.md new file mode 100644 index 00000000000..a5f1b4baf5e --- /dev/null +++ b/changelogs/upcoming/7654.md @@ -0,0 +1,17 @@ +**CSS-in-JS conversions** + +- Converted `EuiTable`, `EuiTableRow`, `EuiTableRowCell`, and all other table subcomponents to Emotion +- Removed the following `EuiTable` Sass variables: + - `$euiTableCellContentPadding` + - `$euiTableCellContentPaddingCompressed` + - `$euiTableCellCheckboxWidth` + - `$euiTableHoverColor` + - `$euiTableSelectedColor` + - `$euiTableHoverSelectedColor` + - `$euiTableActionsBorderColor` + - `$euiTableHoverClickableColor` + - `$euiTableFocusClickableColor` +- Removed the following `EuiTable` Sass mixins: + - `euiTableActionsBackgroundMobile` + - `euiTableCellCheckbox` + - `euiTableCell` diff --git a/src-docs/src/views/provider/provider_component_defaults.tsx b/src-docs/src/views/provider/provider_component_defaults.tsx index f2561c5a6f1..bcfd198dcd7 100644 --- a/src-docs/src/views/provider/provider_component_defaults.tsx +++ b/src-docs/src/views/provider/provider_component_defaults.tsx @@ -12,6 +12,7 @@ export const EuiComponentDefaultsProps: FunctionComponent< // Exported in one place for DRYness export const euiProviderComponentDefaultsSnippet = `> = [ sortable: true, mobileOptions: { render: (user: User) => ( - + <> {user.firstName} {user.lastName} - + ), header: false, truncateText: false, @@ -162,6 +162,11 @@ export default () => { ]; if (multiAction) { actions = [ + { + ...actions[0], + isPrimary: true, + showOnHover: true, + }, { render: (user: User) => { return ( @@ -176,7 +181,6 @@ export default () => { return {}}>Edit; }, }, - ...actions, ]; } return actions; @@ -198,7 +202,7 @@ export default () => { if (multiAction) { actions = [ { - name: Clone, + name: <>Clone, description: 'Clone this user', icon: 'copy', type: 'icon', @@ -396,7 +400,6 @@ export default () => { pagination={pagination} sorting={sorting} selection={selection} - hasActions={customAction ? false : true} onChange={onTableChange} /> diff --git a/src-docs/src/views/tables/auto/auto.tsx b/src-docs/src/views/tables/auto/auto.tsx index 80c861df198..e0f98b12dc5 100644 --- a/src-docs/src/views/tables/auto/auto.tsx +++ b/src-docs/src/views/tables/auto/auto.tsx @@ -46,9 +46,9 @@ const columns: Array> = [ truncateText: true, mobileOptions: { render: (user: User) => ( - + <> {user.firstName} {user.lastName} - + ), header: false, truncateText: false, diff --git a/src-docs/src/views/tables/basic/basic.tsx b/src-docs/src/views/tables/basic/basic.tsx index 4e58f781fe5..743c8b81fc3 100644 --- a/src-docs/src/views/tables/basic/basic.tsx +++ b/src-docs/src/views/tables/basic/basic.tsx @@ -48,9 +48,9 @@ export default () => { 'data-test-subj': 'firstNameCell', mobileOptions: { render: (user: User) => ( - + <> {user.firstName} {user.lastName} - + ), header: false, truncateText: false, diff --git a/src-docs/src/views/tables/basic/basic_section.js b/src-docs/src/views/tables/basic/basic_section.js index 3bee817ff28..93c1aaba256 100644 --- a/src-docs/src/views/tables/basic/basic_section.js +++ b/src-docs/src/views/tables/basic/basic_section.js @@ -10,13 +10,15 @@ import { import { Pagination } from '../paginated/_props'; import { EuiTableFieldDataColumnType, - EuiTableComputedColumnType, - EuiTableActionsColumnType, EuiTableSelectionType, EuiTableSortingType, } from '!!prop-loader!../../../../../src/components/basic_table/table_types'; import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types'; -import { DefaultItemActionProps as DefaultItemAction } from '../props/props'; +import { + EuiTableComputedColumnType, + EuiTableActionsColumnType, + DefaultItemActionProps as DefaultItemAction, +} from '../props/props'; const source = require('!!raw-loader!./basic'); diff --git a/src-docs/src/views/tables/custom/custom.tsx b/src-docs/src/views/tables/custom/custom.tsx index aad9499ad03..62186127dfa 100644 --- a/src-docs/src/views/tables/custom/custom.tsx +++ b/src-docs/src/views/tables/custom/custom.tsx @@ -113,10 +113,10 @@ export default class extends Component<{}, State> { { id: 2, title: ( - + <> A very long line in an ELEMENT which will wrap on narrower screens and NOT become truncated and replaced by an ellipsis - + ), type: 'user', dateCreated: 'Tue Dec 01 2016', @@ -127,11 +127,11 @@ export default class extends Component<{}, State> { id: 3, title: { value: ( - + <> A very long line in an ELEMENT which will not wrap on narrower screens and instead will become truncated and replaced by an ellipsis - + ), truncateText: true, }, @@ -290,14 +290,14 @@ export default class extends Component<{}, State> { width: '100%', }, render: (title: DataItem['title'], item: DataItem) => ( - + <> {' '} {title as ReactNode} - + ), }, { @@ -686,7 +686,7 @@ export default class extends Component<{}, State> { {cells} diff --git a/src-docs/src/views/tables/custom/custom_section.js b/src-docs/src/views/tables/custom/custom_section.js index d666fad7edf..038d5f254ac 100644 --- a/src-docs/src/views/tables/custom/custom_section.js +++ b/src-docs/src/views/tables/custom/custom_section.js @@ -29,7 +29,7 @@ export const section = { }, ], text: ( -
+ <>

As an alternative to EuiBasicTable you can instead construct a table from individual{' '} @@ -58,7 +58,7 @@ export const section = {  and EuiTableSortMobileItem components to supply mobile sorting. See demo below.

-
+ ), components: { EuiTable }, props: { diff --git a/src-docs/src/views/tables/expanding_rows/expanding_rows.tsx b/src-docs/src/views/tables/expanding_rows/expanding_rows.tsx index 5bc6b62a6bd..e2837373ebb 100644 --- a/src-docs/src/views/tables/expanding_rows/expanding_rows.tsx +++ b/src-docs/src/views/tables/expanding_rows/expanding_rows.tsx @@ -52,9 +52,9 @@ const columns: Array> = [ truncateText: true, mobileOptions: { render: (user: User) => ( - + <> {user.firstName} {user.lastName} - + ), header: false, truncateText: false, @@ -134,9 +134,10 @@ export default () => { isExpander: true, name: ( - Expand rows + Expand row ), + mobileOptions: { header: false }, render: (user: User) => { const itemIdToExpandedRowMapValues = { ...itemIdToExpandedRowMap }; @@ -260,12 +261,9 @@ export default () => { items={pageOfItems} itemId="id" itemIdToExpandedRowMap={itemIdToExpandedRowMap} - isExpandable={true} - hasActions={true} columns={columnsWithExpandingRowToggle} pagination={pagination} sorting={sorting} - isSelectable={true} selection={selection} onChange={onTableChange} /> diff --git a/src-docs/src/views/tables/footer/footer.tsx b/src-docs/src/views/tables/footer/footer.tsx index f6c2aec479a..fab97bb010e 100644 --- a/src-docs/src/views/tables/footer/footer.tsx +++ b/src-docs/src/views/tables/footer/footer.tsx @@ -51,9 +51,9 @@ const columns: Array> = [ truncateText: true, mobileOptions: { render: (user: User) => ( - + <> {user.firstName} {user.lastName} - + ), header: false, truncateText: false, @@ -72,7 +72,7 @@ const columns: Array> = [ { field: 'github', name: 'Github', - footer: ({ items }: { items: User[] }) => {items.length} users, + footer: ({ items }: { items: User[] }) => <>{items.length} users, render: (username: User['github']) => ( {username} @@ -96,7 +96,7 @@ const columns: Array> = [ const uniqueCountries = new Set( items.map((user) => user.location.country) ); - return {uniqueCountries.size} countries; + return <>{uniqueCountries.size} countries; }, render: (location: User['location']) => { return `${location.city}, ${location.country}`; @@ -106,9 +106,7 @@ const columns: Array> = [ field: 'online', name: 'Online', footer: ({ items }: { items: User[] }) => { - return ( - {items.filter((user: User) => !!user.online).length} online - ); + return <>{items.filter((user: User) => !!user.online).length} online; }, dataType: 'boolean', render: (online: User['online']) => { @@ -221,7 +219,6 @@ export default () => { columns={columns} pagination={pagination} sorting={sorting} - isSelectable={true} selection={selection} onChange={onTableChange} /> diff --git a/src-docs/src/views/tables/in_memory/in_memory.tsx b/src-docs/src/views/tables/in_memory/in_memory.tsx index 8bfe861bf6a..c1b7a6ae175 100644 --- a/src-docs/src/views/tables/in_memory/in_memory.tsx +++ b/src-docs/src/views/tables/in_memory/in_memory.tsx @@ -47,9 +47,9 @@ const columns: Array> = [ truncateText: true, mobileOptions: { render: (user: User) => ( - + <> {user.firstName} {user.lastName} - + ), header: false, truncateText: false, diff --git a/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination.tsx b/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination.tsx index 0f6a4004073..6d99d7b47c8 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination.tsx +++ b/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination.tsx @@ -49,9 +49,9 @@ const columns: Array> = [ truncateText: true, mobileOptions: { render: (user: User) => ( - + <> {user.firstName} {user.lastName} - + ), header: false, truncateText: false, diff --git a/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js b/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js index e7da5170060..9a3a5c445b0 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js +++ b/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js @@ -12,13 +12,13 @@ import { import { Pagination } from '../paginated/_props'; import { EuiTableFieldDataColumnType, - EuiTableComputedColumnType, - EuiTableActionsColumnType, EuiTableSelectionType, EuiTableSortingType, } from '!!prop-loader!../../../../../src/components/basic_table/table_types'; import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types'; import { + EuiTableComputedColumnType, + EuiTableActionsColumnType, DefaultItemActionProps as DefaultItemAction, SearchProps as Search, SearchFilterConfigProps as SearchFilterConfig, @@ -37,14 +37,14 @@ export const controlledPaginationSection = { }, ], text: ( -
+ <>

By default EuiInMemoryTable resets its page index when receiving a new EuiInMemoryTable array. To avoid - this behavior the pagination object optionally takes a + this behavior the pagination object optionally takes a{' '} pageIndex value to control this yourself. Additionally, pageSize can also be controlled the - same way. Both of these are provided to your app during the + same way. Both of these are provided to your app during the{' '} onTableChange callback.

@@ -52,7 +52,7 @@ export const controlledPaginationSection = { toggling their online status. Pagination state is maintained by the app, preventing it from being reset by the updates.

-
+ ), props: { EuiInMemoryTable, diff --git a/src-docs/src/views/tables/in_memory/in_memory_custom_sorting_section.js b/src-docs/src/views/tables/in_memory/in_memory_custom_sorting_section.js index 50505712592..3cfc81e7d77 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_custom_sorting_section.js +++ b/src-docs/src/views/tables/in_memory/in_memory_custom_sorting_section.js @@ -12,13 +12,13 @@ import { import { Pagination } from '../paginated/_props'; import { EuiTableFieldDataColumnType, - EuiTableComputedColumnType, - EuiTableActionsColumnType, EuiTableSelectionType, EuiTableSortingType, } from '!!prop-loader!../../../../../src/components/basic_table/table_types'; import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types'; import { + EuiTableComputedColumnType, + EuiTableActionsColumnType, DefaultItemActionProps as DefaultItemAction, SearchProps as Search, SearchFilterConfigProps as SearchFilterConfig, @@ -37,16 +37,14 @@ export const customSortingSection = { }, ], text: ( -
-

- Sometimes the value displayed in a column is not appropriate to use for - sorting, such as pre-formatting values to be human-readable. In these - cases it's possible to pass the sortable prop as - a function instead of true or{' '} - false. The function is used to extract or calculate - the intended sort value for each item. -

-
+

+ Sometimes the value displayed in a column is not appropriate to use for + sorting, such as pre-formatting values to be human-readable. In these + cases it's possible to pass the sortable prop as a + function instead of true or false. + The function is used to extract or calculate the intended sort value for + each item. +

), props: { EuiInMemoryTable, diff --git a/src-docs/src/views/tables/in_memory/in_memory_search.tsx b/src-docs/src/views/tables/in_memory/in_memory_search.tsx index f92b3558736..1be5219eed6 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search.tsx +++ b/src-docs/src/views/tables/in_memory/in_memory_search.tsx @@ -54,9 +54,9 @@ const columns: Array> = [ truncateText: true, mobileOptions: { render: (user: User) => ( - + <> {user.firstName} {user.lastName} - + ), header: false, truncateText: false, diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_callback.tsx b/src-docs/src/views/tables/in_memory/in_memory_search_callback.tsx index a0e70f63780..daad7e56417 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search_callback.tsx +++ b/src-docs/src/views/tables/in_memory/in_memory_search_callback.tsx @@ -48,9 +48,9 @@ const columns: Array> = [ truncateText: true, mobileOptions: { render: (user: User) => ( - + <> {user.firstName} {user.lastName} - + ), header: false, truncateText: false, diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js b/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js index ad702b45f06..520ee05e7bd 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js +++ b/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js @@ -11,13 +11,13 @@ import { import { Pagination } from '../paginated/_props'; import { EuiTableFieldDataColumnType, - EuiTableComputedColumnType, - EuiTableActionsColumnType, EuiTableSelectionType, EuiTableSortingType, } from '!!prop-loader!../../../../../src/components/basic_table/table_types'; import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types'; import { + EuiTableComputedColumnType, + EuiTableActionsColumnType, DefaultItemActionProps as DefaultItemAction, SearchProps as Search, SearchFilterConfigProps as SearchFilterConfig, diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_external.tsx b/src-docs/src/views/tables/in_memory/in_memory_search_external.tsx index 6cdc9d690ae..a200174eaa0 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search_external.tsx +++ b/src-docs/src/views/tables/in_memory/in_memory_search_external.tsx @@ -77,9 +77,9 @@ const columns: Array> = [ truncateText: true, mobileOptions: { render: (user: User) => ( - + <> {user.firstName} {user.lastName} - + ), header: false, truncateText: false, diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_external_section.js b/src-docs/src/views/tables/in_memory/in_memory_search_external_section.js index 553bab0a679..d6b83ba21d0 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search_external_section.js +++ b/src-docs/src/views/tables/in_memory/in_memory_search_external_section.js @@ -11,13 +11,13 @@ import { import { Pagination } from '../paginated/_props'; import { EuiTableFieldDataColumnType, - EuiTableComputedColumnType, - EuiTableActionsColumnType, EuiTableSelectionType, EuiTableSortingType, } from '!!prop-loader!../../../../../src/components/basic_table/table_types'; import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types'; import { + EuiTableComputedColumnType, + EuiTableActionsColumnType, DefaultItemActionProps as DefaultItemAction, SearchProps as Search, SearchFilterConfigProps as SearchFilterConfig, @@ -36,12 +36,10 @@ export const searchExternalSection = { }, ], text: ( -
-

- The example shows how to configure EuiInMemoryTable{' '} - when both external and internal search/filter states are in use. -

-
+

+ The example shows how to configure EuiInMemoryTable when + both external and internal search/filter states are in use. +

), props: { EuiInMemoryTable, diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_section.js b/src-docs/src/views/tables/in_memory/in_memory_search_section.js index 7a74191d70c..0380ed6ad9a 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search_section.js +++ b/src-docs/src/views/tables/in_memory/in_memory_search_section.js @@ -12,13 +12,13 @@ import { import { Pagination } from '../paginated/_props'; import { EuiTableFieldDataColumnType, - EuiTableComputedColumnType, - EuiTableActionsColumnType, EuiTableSelectionType, EuiTableSortingType, } from '!!prop-loader!../../../../../src/components/basic_table/table_types'; import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types'; import { + EuiTableComputedColumnType, + EuiTableActionsColumnType, DefaultItemActionProps as DefaultItemAction, SearchProps as Search, SearchFilterConfigProps as SearchFilterConfig, @@ -37,17 +37,15 @@ export const searchSection = { }, ], text: ( -
-

- The example shows how to configure EuiInMemoryTable - to display a search bar by passing the search prop. You can read more - about the search bar's properties and its syntax{' '} - - here - {' '} - . -

-
+

+ The example shows how to configure EuiInMemoryTable + to display a search bar by passing the search prop. You can read more + about the search bar's properties and its syntax{' '} + + here + {' '} + . +

), props: { EuiInMemoryTable, diff --git a/src-docs/src/views/tables/in_memory/in_memory_section.js b/src-docs/src/views/tables/in_memory/in_memory_section.js index 2fc8a6d732a..5948ba2840d 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_section.js +++ b/src-docs/src/views/tables/in_memory/in_memory_section.js @@ -12,13 +12,13 @@ import { import { Pagination } from '../paginated/_props'; import { EuiTableFieldDataColumnType, - EuiTableComputedColumnType, - EuiTableActionsColumnType, EuiTableSelectionType, EuiTableSortingType, } from '!!prop-loader!../../../../../src/components/basic_table/table_types'; import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types'; import { + EuiTableComputedColumnType, + EuiTableActionsColumnType, DefaultItemActionProps as DefaultItemAction, SearchProps as Search, SearchFilterConfigProps as SearchFilterConfig, @@ -36,7 +36,7 @@ export const section = { }, ], text: ( -
+ <>

The EuiInMemoryTable is a higher level component wrapper around EuiBasicTable aimed at displaying tables @@ -57,7 +57,7 @@ export const section = { and preserved between renders.

-
+ ), props: { EuiInMemoryTable, diff --git a/src-docs/src/views/tables/in_memory/in_memory_selection_controlled.tsx b/src-docs/src/views/tables/in_memory/in_memory_selection_controlled.tsx index 6fb5fe5f0b7..dfa4c30eced 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_selection_controlled.tsx +++ b/src-docs/src/views/tables/in_memory/in_memory_selection_controlled.tsx @@ -46,9 +46,9 @@ const columns: Array> = [ truncateText: true, mobileOptions: { render: (user: User) => ( - + <> {user.firstName} {user.lastName} - + ), header: false, truncateText: false, @@ -258,7 +258,6 @@ export default () => { pagination={pagination} sorting={true} selection={selectionValue} - isSelectable={true} /> ); diff --git a/src-docs/src/views/tables/in_memory/in_memory_selection_uncontrolled.tsx b/src-docs/src/views/tables/in_memory/in_memory_selection_uncontrolled.tsx index 6b497e46b14..6f24553b974 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_selection_uncontrolled.tsx +++ b/src-docs/src/views/tables/in_memory/in_memory_selection_uncontrolled.tsx @@ -47,9 +47,9 @@ const columns: Array> = [ truncateText: true, mobileOptions: { render: (user: User) => ( - + <> {user.firstName} {user.lastName} - + ), header: false, truncateText: false, @@ -250,7 +250,6 @@ export default () => { pagination={pagination} sorting={true} selection={selectionValue} - isSelectable={true} /> ); }; diff --git a/src-docs/src/views/tables/mobile/mobile.tsx b/src-docs/src/views/tables/mobile/mobile.tsx index 8f50d211256..0b6b4a9fd7f 100644 --- a/src-docs/src/views/tables/mobile/mobile.tsx +++ b/src-docs/src/views/tables/mobile/mobile.tsx @@ -79,9 +79,9 @@ export default () => { mobileOptions: { render: customHeader ? (user: User) => ( - + <> {user.firstName} {user.lastName} - + ) : undefined, header: customHeader ? false : true, @@ -193,7 +193,7 @@ export default () => { * Pagination & sorting */ const [pageIndex, setPageIndex] = useState(0); - const [pageSize, setPageSize] = useState(5); + const [pageSize, setPageSize] = useState(3); const [sortField, setSortField] = useState('firstName'); const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc'); @@ -300,9 +300,7 @@ export default () => { pagination={pagination} sorting={sorting} selection={selection} - isSelectable={true} - hasActions={true} - responsive={isResponsive} + responsiveBreakpoint={isResponsive} onChange={onTableChange} /> diff --git a/src-docs/src/views/tables/mobile/mobile_section.js b/src-docs/src/views/tables/mobile/mobile_section.js index 1575e5c81da..1f9862ab9b6 100644 --- a/src-docs/src/views/tables/mobile/mobile_section.js +++ b/src-docs/src/views/tables/mobile/mobile_section.js @@ -1,23 +1,24 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import { GuideSectionTypes } from '../../../components'; +import { EuiCode } from '../../../../../src/components/code'; + import Table from './mobile'; -import { EuiTextColor } from '../../../../../src/components/text'; -import { EuiCode, EuiCodeBlock } from '../../../../../src/components/code'; const source = require('!!raw-loader!./mobile'); import { EuiTableRowCellMobileOptionsShape } from '../props/props'; /* eslint-disable local/css-logical-properties */ -const exampleItem = `{ +const exampleColumnSnippet = `{ field: 'firstName', name: 'First Name', truncateText: true, mobileOptions: { - render: (item) => ({item.firstName} {item.lastName}), // Custom renderer for mobile view only - header: false, // Won't show inline header in mobile view + render: (item) => (<>{item.firstName} {item.lastName}), // Custom renderer for mobile view only + header: false, // Won't show inline header in mobile view width: '100%', // Applies a specific width - enlarge: true, // Increase text size compared to rest of cells - truncateText: false, // Only works if a 'render()' is also provided + enlarge: true, // Increase text size compared to rest of cells + truncateText: false, // Text will wrap instead of truncating to one line } }`; @@ -32,46 +33,37 @@ export const section = { text: ( <>

- Allowing a table to be responsive means breaking each row down into its - own section and individually displaying each table header above the cell - contents. There are few times when you may want to exclude this behavior - from your table, for instance, when the table has very few columns or - the table does not break down easily into this format. For these use - cases, you may set responsive=false. -

-

- To make your table work responsively, please make sure you add the - following additional props - to the top level table component (EuiBasicTable or{' '} - EuiInMemoryTable): + Tables will be mobile-responsive by default, breaking down each row into + its own card section and individually displaying each table header above + the cell contents. The default breakpoint at which the table will + responsively shift into cards is the{' '} + + m window size + + , which can be customized with the{' '} + responsiveBreakpoint prop (e.g.,{' '} + {'responsiveBreakpoint="s"'}).

-
    -
  • - isSelectable: if the table has a single column of - checkboxes for selecting rows -
    • -
  • - isExpandable: if the table has rows that can expand -
    • -
  • - hasActions: if the table has a column for actions - which may/may not be hidden in hover -
    • -

- The mobileOptions object can be passed to the{' '} - EuiTableRowCell directly or with each column item - provided to EuiBasicTable. + To never render your table responsively (e.g. for tables with very few + columns), you may set{' '} + {'responsiveBreakpoint={false}'}. + Inversely, if you always want your table to render in a mobile-friendly + manner, pass true. The below example table switches + between true/false for quick/easy preview between + mobile and desktop table UIs at all breakpoints.

- {exampleItem}

- Note: You can also change basic table row cell props - like truncateText and textOnly for - mobile layouts, though you must also be passing a mobile specific render - function. + To customize your cell's appearance/rendering in mobile vs. desktop + view, use the mobileOptions configuration. This + object can be passed to each column item in{' '} + EuiBasicTable or to EuiTableRowCell{' '} + directly. See the "Snippet" tab in the below example, or the "Props" tab + for a full list of configuration options.

), props: { EuiTableRowCellMobileOptionsShape }, + snippet: exampleColumnSnippet, demo: , }; diff --git a/src-docs/src/views/tables/paginated/paginated.tsx b/src-docs/src/views/tables/paginated/paginated.tsx index 75cc28fc5d7..88bf5e45280 100644 --- a/src-docs/src/views/tables/paginated/paginated.tsx +++ b/src-docs/src/views/tables/paginated/paginated.tsx @@ -52,9 +52,9 @@ const columns: Array> = [ truncateText: true, mobileOptions: { render: (user: User) => ( - + <> {user.firstName} {user.lastName} - + ), header: false, truncateText: false, @@ -169,10 +169,10 @@ export default () => { + <> Hide per page options with{' '} pagination.showPerPageOptions = false - + } onChange={togglePerPageOptions} /> diff --git a/src-docs/src/views/tables/props/props.tsx b/src-docs/src/views/tables/props/props.tsx index 05a4af848db..8f9c8752b6e 100644 --- a/src-docs/src/views/tables/props/props.tsx +++ b/src-docs/src/views/tables/props/props.tsx @@ -1,4 +1,8 @@ import React, { FunctionComponent } from 'react'; +import { + EuiTableComputedColumnType as _EuiTableComputedColumnType, + EuiTableActionsColumnType as _EuiTableActionsColumnType, +} from '../../../../../src/components/basic_table/table_types'; import { DefaultItemAction } from '../../../../../src/components/basic_table/action_types'; import { Search } from '../../../../../src/components/basic_table/in_memory_table'; import { SearchFilterConfig } from '../../../../../src/components/search_bar/filters'; @@ -20,3 +24,11 @@ export const SearchFilterConfigProps: FunctionComponent< export const EuiTableRowCellMobileOptionsShape: FunctionComponent< _EuiTableRowCellMobileOptionsShape > = () =>
; + +export const EuiTableComputedColumnType: FunctionComponent< + _EuiTableComputedColumnType +> = () =>
; + +export const EuiTableActionsColumnType: FunctionComponent< + _EuiTableActionsColumnType +> = () =>
; diff --git a/src-docs/src/views/tables/selection/selection_controlled.tsx b/src-docs/src/views/tables/selection/selection_controlled.tsx index b7b544d7ba8..115541f6a9b 100644 --- a/src-docs/src/views/tables/selection/selection_controlled.tsx +++ b/src-docs/src/views/tables/selection/selection_controlled.tsx @@ -60,9 +60,9 @@ const columns: Array> = [ truncateText: true, mobileOptions: { render: (user: User) => ( - + <> {user.firstName} {user.lastName} - + ), header: false, truncateText: false, @@ -236,7 +236,6 @@ export default () => { columns={columns} pagination={pagination} sorting={sorting} - isSelectable={true} selection={selection} onChange={onTableChange} rowHeader="firstName" diff --git a/src-docs/src/views/tables/selection/selection_uncontrolled.tsx b/src-docs/src/views/tables/selection/selection_uncontrolled.tsx index 9358b7ffa35..5c544fc5aba 100644 --- a/src-docs/src/views/tables/selection/selection_uncontrolled.tsx +++ b/src-docs/src/views/tables/selection/selection_uncontrolled.tsx @@ -58,9 +58,9 @@ const columns: Array> = [ truncateText: true, mobileOptions: { render: (user: User) => ( - + <> {user.firstName} {user.lastName} - + ), header: false, truncateText: false, @@ -226,7 +226,6 @@ export default () => { columns={columns} pagination={pagination} sorting={sorting} - isSelectable={true} selection={selection} onChange={onTableChange} rowHeader="firstName" diff --git a/src-docs/src/views/tables/sorting/sorting.tsx b/src-docs/src/views/tables/sorting/sorting.tsx index bd0d1b73f3f..ac67d9a9ecf 100644 --- a/src-docs/src/views/tables/sorting/sorting.tsx +++ b/src-docs/src/views/tables/sorting/sorting.tsx @@ -56,9 +56,9 @@ const columns: Array> = [ truncateText: true, mobileOptions: { render: (user: User) => ( - + <> {user.firstName} {user.lastName} - + ), header: false, truncateText: false, @@ -78,7 +78,7 @@ const columns: Array> = [ field: 'github', name: ( - + <> Github{' '} > = [ type="questionInCircle" className="eui-alignTop" /> - + ), render: (username: User['github']) => ( @@ -99,7 +99,7 @@ const columns: Array> = [ field: 'dateOfBirth', name: ( - + <> Date of Birth{' '} > = [ type="questionInCircle" className="eui-alignTop" /> - + ), render: (dateOfBirth: User['dateOfBirth']) => @@ -117,7 +117,7 @@ const columns: Array> = [ field: 'location', name: ( - + <> Nationality{' '} > = [ type="questionInCircle" className="eui-alignTop" /> - + ), render: (location: User['location']) => { @@ -138,7 +138,7 @@ const columns: Array> = [ field: 'online', name: ( - + <> Online{' '} > = [ type="questionInCircle" className="eui-alignTop" /> - + ), render: (online: User['online']) => { diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap index 5fd31c9d627..4ed70fc8a71 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -1,132 +1,125 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EuiBasicTable renders (bare-bones) 1`] = ` -
-
+
+ + +
-
-
+
- - - - +`; + +exports[`EuiBasicTable renders (bare-bones) 1`] = ` +
+
-
+
+ + + - - - + description + + + + + + + - - - - + + + + + - - + + + + + - - -
+
+
- - Name - - - description - + Name -
-
- Name -
-
- - name1 - -
-
- -
- Name -
-
- - name2 - -
-
- -
- Name -
-
- - name3 - -
-
-
+ name3 + +
+
`; @@ -134,630 +127,522 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
-
-
-
-
-
- -
- -
-
-
+ + + +
- + +
-
-
-
- - - - - - + - + - + - - - + + + + + - - - + - + - + - + - - + + + + + + + - + - + - + - + - - + + + + + + + - + - + - + - + - - - - - + + + + + - + - + - + - + - - -
-
+ + - - - - ID + Name - your id + your name + + + + +
+ + ID -
+ your id + + + +
- - Age - - - your age - + Age -
+ your age + + + +
- - Actions - + Actions -
+
- -
-
+ class="euiCheckbox__square" + />
-
+ +
-
- Name -
-
- NAME1 -
-
+ +
-
- ID -
-
- - 1 - -
-
+ + +
-
- Age -
-
- - 20 - -
-
+ + +
-
- - - - + + + + - -
-
-
+
- -
-
+ class="euiCheckbox__square" + />
-
+ +
-
- Name -
-
- NAME2 -
-
+ +
-
- ID -
-
- - 2 - -
-
+ + +
-
- Age -
-
- - 21 - -
-
+ + +
-
- - - - + + + + - -
-
-
+
- -
-
+ class="euiCheckbox__square" + />
-
+ +
-
- Name -
-
- NAME3 -
-
+ +
-
- ID -
-
- - 3 - -
-
+ + +
-
- Age -
-
- - 22 - -
-
+ + +
-
- - - - + + + + - -
-
+ + + +
+
-
- -
-
+ + +
-
- -
-
+ + +
-
- - - Total items: - 5 - - -
-
+ Total items: + 5 + + + + +
-
- -
-
+ + +
-
- -
-
-
+ +
+ + + +
- + + + + `; diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap index 4d786deea65..918fd7179f7 100644 --- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap @@ -1,5 +1,57 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`EuiInMemoryTable behavior mobile header 1`] = ` +
+
+ +
+ +
+
+
+ +
+
+
+`; + exports[`EuiInMemoryTable behavior pagination 1`] = `