diff --git a/changelogs/upcoming/7625.md b/changelogs/upcoming/7625.md new file mode 100644 index 00000000000..c22e06a2608 --- /dev/null +++ b/changelogs/upcoming/7625.md @@ -0,0 +1,7 @@ +- 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` + +**Deprecations** + +- Deprecated the `responsive` prop from `EuiTable`, `EuiBasicTable`, and `EuiInMemoryTable`. Use the new `responsiveBreakpoint` prop instead +- `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/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 = ` { 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..ee5e2629c7b 100644 --- a/src-docs/src/views/tables/mobile/mobile_section.js +++ b/src-docs/src/views/tables/mobile/mobile_section.js @@ -1,4 +1,5 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import { GuideSectionTypes } from '../../../components'; import Table from './mobile'; @@ -32,14 +33,26 @@ 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. + 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"'}).

+ 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. +

+

+ {/* TODO: This shouldn't be true by the end of the Emotion conversion */} To make your table work responsively, please make sure you add the following additional props to the top level table component (EuiBasicTable or{' '} 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 17104f245e4..d5b80dc5add 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -6,127 +6,111 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = ` class="euiBasicTable testClass1 testClass2 emotion-euiTestCss" data-test-subj="test subject string" > -

-
-
-
-
-
-
- - - - + + - - - + description + + + + + + + - - - - + + + + + - - + + + + + - - -
-
+
+
+ - - Name - - - description - + Name -
-
- Name -
-
+
+ - - name1 - -
-
- -
- Name -
-
+
+ - - name2 - -
-
- -
- Name -
-
+
+ - - name3 - -
-
-
+ name3 + +
+ + + +
`; @@ -134,630 +118,567 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
-
-
-
-
-
- -
- -
-
-
+ + + +
- -
-
-
-
-
- - - - - - + - + - + - - - + your age + + + + + + + + - - - + - - + + - + - - + + + + + + + - + - - + + - + - - + + + + + + + - + - - + + - + - - - - - + + + + + - + - + - + - + - - -
-
-
+
- -
-
+ class="euiCheckbox__square" + />
-
- - + + + + - - Age - - - your age - + ID + + + your id - + + - - Actions - + Age -
+ + + Actions + + +
+
- -
-
+ class="euiCheckbox__square" + />
-
+ +
-
- Name -
-
- NAME1 -
-
+
-
- ID -
-
- - 1 - -
-
+ +
-
+
+ - Age -
-
+
+
+
+ Age +
+
+ - - 20 - -
- 		+ + +
-
- - - - + + + + - -
-
-
+
- -
-
+ class="euiCheckbox__square" + />
-
+ +
-
- Name -
-
- NAME2 -
-
+
-
- ID -
-
- - 2 - -
-
+ +
-
+
+ - Age -
-
+
+
+
+ Age +
+
+ - - 21 - -
- 		+ + +
-
- - - - + + + + - -
-
-
+
- -
-
+ class="euiCheckbox__square" + />
-
+ +
-
- Name -
-
- NAME3 -
-
+
-
- ID -
-
- - 3 - -
-
+ +
-
+
+ - Age -
-
+
+
+
+ Age +
+
+ - - 22 - -
- 		+ + +
-
- - - - + + + + - -
-
+ + + +
+
-
- -
-
+ + +
-
- -
-
+ + +
-
- - - Total items: - 5 - - -
-
+ Total items: + 5 + + + + +
-
- -
-
+ + +
-
- -
-
-
+ +
+ + + +
+
+ +
+ +
+
+
+ +
+
+
+`; + exports[`EuiInMemoryTable behavior pagination 1`] = `