[EuiTable] New responsiveBreakpoint prop + initial setup for mobile vs desktop styles

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.

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 = `<EuiProvider
   componentDefaults={{
+    EuiTable: { responsiveBreakpoint: 's', },
     EuiTablePagination: { itemsPerPage: 20, },
     EuiFocusTrap: { crossFrame: true },
     EuiPortal: { insert },

src-docs/src/views/tables/mobile/mobile.tsx

@@ -302,7 +302,7 @@ export default () => {
         selection={selection}
         isSelectable={true}
         hasActions={true}
-        responsive={isResponsive}
+        responsiveBreakpoint={isResponsive}
         onChange={onTableChange}
       />
     </>

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: (
     <>
       <p>
-        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 <EuiCode language="js">responsive=false</EuiCode>.
+        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{' '}
+        <Link to="/theming/breakpoints/values">
+          <EuiCode>m</EuiCode> window size
+        </Link>
+        , which can be customized with the{' '}
+        <EuiCode>responsiveBreakpoint</EuiCode> prop (e.g.,{' '}
+        <EuiCode language="js">{'responsiveBreakpoint="s"'}</EuiCode>).
       </p>
       <p>
+        To never render your table responsively (e.g. for tables with very few
+        columns), you may set{' '}
+        <EuiCode language="js">{'responsiveBreakpoint={false}'}</EuiCode>.
+        Inversely, if you always want your table to render in a mobile-friendly
+        manner, pass <EuiCode>true</EuiCode>.
+      </p>
+      <p>
+        {/* 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 <EuiTextColor color="danger">additional</EuiTextColor> props
         to the top level table component (<strong>EuiBasicTable</strong> or{' '}

src/components/basic_table/__snapshots__/basic_table.test.tsx.snap

@@ -6,23 +6,8 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
   class="euiBasicTable testClass1 testClass2 emotion-euiTestCss"
   data-test-subj="test subject string"
 >
-  <div>
-    <div
-      class="euiTableHeaderMobile"
-    >
-      <div
-        class="euiFlexGroup emotion-euiFlexGroup-l-spaceBetween-baseline-row"
-      >
-        <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
-        />
-        <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
-        />
-      </div>
-    </div>
   <table
-      class="euiTable euiTable--responsive emotion-euiTable-fixed-uncompressed"
+    class="euiTable euiTable--responsive emotion-euiTable-fixed-uncompressed-desktop"
     id="__table_generated-id"
     tabindex="-1"
   >
@@ -127,77 +112,14 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
     </tbody>
   </table>
 </div>
-</div>
 `;
 
 exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sorting, actions, and footer 1`] = `
 <div
   class="euiBasicTable"
 >
-  <div>
-    <div
-      class="euiTableHeaderMobile"
-    >
-      <div
-        class="euiFlexGroup emotion-euiFlexGroup-l-spaceBetween-baseline-row"
-      >
-        <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
-        >
-          <div
-            class="euiCheckbox emotion-euiCheckbox"
-          >
-            <input
-              aria-label="Select all rows"
-              class="euiCheckbox__input"
-              id="_selection_column-checkbox_generated-id_mobile"
-              type="checkbox"
-            />
-            <div
-              class="euiCheckbox__square"
-            />
-            <label
-              class="euiCheckbox__label"
-              for="_selection_column-checkbox_generated-id_mobile"
-            >
-              Select all rows
-            </label>
-          </div>
-        </div>
-        <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
-        >
-          <div
-            class="euiTableSortMobile"
-          >
-            <div
-              class="euiPopover emotion-euiPopover-inline-block"
-            >
-              <button
-                class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-flush-right"
-                type="button"
-              >
-                <span
-                  class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
-                >
-                  <span
-                    class="eui-textTruncate euiButtonEmpty__text"
-                  >
-                    Sorting
-                  </span>
-                  <span
-                    color="inherit"
-                    data-euiicon-type="arrowDown"
-                  />
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
   <table
-      class="euiTable euiTable--responsive emotion-euiTable-fixed-uncompressed"
+    class="euiTable euiTable--responsive emotion-euiTable-fixed-uncompressed-desktop"
     id="__table_generated-id"
     tabindex="-1"
   >
@@ -757,7 +679,6 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
       </tr>
     </tfoot>
   </table>
-  </div>
   <div>
     <div
       class="euiSpacer euiSpacer--m emotion-euiSpacer-m"

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`] = `
+<div
+  class="euiTableHeaderMobile emotion-euiTableHeaderMobile"
+>
+  <div
+    class="euiCheckbox emotion-euiCheckbox"
+  >
+    <input
+      aria-label="Select all rows"
+      class="euiCheckbox__input"
+      id="_selection_column-checkbox_generated-id_mobile"
+      type="checkbox"
+    />
+    <div
+      class="euiCheckbox__square"
+    />
+    <label
+      class="euiCheckbox__label"
+      for="_selection_column-checkbox_generated-id_mobile"
+    >
+      Select all rows
+    </label>
+  </div>
+  <div
+    class="euiTableSortMobile emotion-euiTableSortMobile"
+  >
+    <div
+      class="euiPopover emotion-euiPopover-inline-block"
+    >
+      <button
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-flush-right"
+        type="button"
+      >
+        <span
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+        >
+          <span
+            class="eui-textTruncate euiButtonEmpty__text"
+          >
+            Sorting
+          </span>
+          <span
+            color="inherit"
+            data-euiicon-type="arrowDown"
+          />
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiInMemoryTable behavior pagination 1`] = `
 <nav
   aria-label="Pagination for table: "
@@ -102,23 +154,8 @@ exports[`EuiInMemoryTable empty array 1`] = `
   class="euiBasicTable testClass1 testClass2 emotion-euiTestCss"
   data-test-subj="test subject string"
 >
-  <div>
-    <div
-      class="euiTableHeaderMobile"
-    >
-      <div
-        class="euiFlexGroup emotion-euiFlexGroup-l-spaceBetween-baseline-row"
-      >
-        <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
-        />
-        <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
-        />
-      </div>
-    </div>
   <table
-      class="euiTable euiTable--responsive emotion-euiTable-fixed-uncompressed"
+    class="euiTable euiTable--responsive emotion-euiTable-fixed-uncompressed-desktop"
     id="__table_generated-id"
     tabindex="-1"
   >
@@ -175,7 +212,6 @@ exports[`EuiInMemoryTable empty array 1`] = `
     </tbody>
   </table>
 </div>
-</div>
 `;
 
 exports[`EuiInMemoryTable with executeQueryOptions 1`] = `
@@ -211,23 +247,8 @@ exports[`EuiInMemoryTable with items 1`] = `
   class="euiBasicTable testClass1 testClass2 emotion-euiTestCss"
   data-test-subj="test subject string"
 >
-  <div>
-    <div
-      class="euiTableHeaderMobile"
-    >
-      <div
-        class="euiFlexGroup emotion-euiFlexGroup-l-spaceBetween-baseline-row"
-      >
-        <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
-        />
-        <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
-        />
-      </div>
-    </div>
   <table
-      class="euiTable euiTable--responsive emotion-euiTable-fixed-uncompressed"
+    class="euiTable euiTable--responsive emotion-euiTable-fixed-uncompressed-desktop"
     id="__table_generated-id"
     tabindex="-1"
   >
@@ -332,5 +353,4 @@ exports[`EuiInMemoryTable with items 1`] = `
     </tbody>
   </table>
 </div>
-</div>
 `;

src/components/basic_table/basic_table.tsx

@@ -30,7 +30,6 @@ import {
 import { CommonProps } from '../common';
 import { isFunction } from '../../services/predicate';
 import { get } from '../../services/objects';
-import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiCheckbox } from '../form';
 
 import { EuiComponentDefaultsContext } from '../provider/component_defaults';
@@ -261,10 +260,6 @@ interface BasicTableProps<T extends object>
    * Configures #Pagination
    */
   pagination?: undefined;
-  /**
-   * If true, will convert table to cards in mobile view
-   */
-  responsive?: boolean;
   /**
    * Applied to `EuiTableRow`
    */
@@ -529,6 +524,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
       compressed,
       itemIdToExpandedRowMap,
       responsive,
+      responsiveBreakpoint,
       isSelectable,
       isExpandable,
       hasActions,
@@ -558,40 +554,37 @@ export class EuiBasicTable<T extends object = any> extends Component<
   }
 
   renderTable() {
-    const { compressed, responsive, tableLayout, loading } = this.props;
-
-    const mobileHeader = responsive ? (
-      <EuiTableHeaderMobile>
-        <EuiFlexGroup
-          responsive={false}
-          justifyContent="spaceBetween"
-          alignItems="baseline"
-        >
-          <EuiFlexItem grow={false}>{this.renderSelectAll(true)}</EuiFlexItem>
-          <EuiFlexItem grow={false}>{this.renderTableMobileSort()}</EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiTableHeaderMobile>
-    ) : undefined;
-    const caption = this.renderTableCaption();
-    const head = this.renderTableHead();
-    const body = this.renderTableBody();
-    const footer = this.renderTableFooter();
+    const {
+      compressed,
+      responsive,
+      responsiveBreakpoint,
+      tableLayout,
+      loading,
+    } = this.props;
+
     return (
-      <div>
-        {mobileHeader}
+      <>
+        {/* TODO: Remove conditional once `responsive` prop is deprecated */}
+        {responsive && (
+          <EuiTableHeaderMobile responsiveBreakpoint={responsiveBreakpoint}>
+            {this.renderSelectAll(true)}
+            {this.renderTableMobileSort()}
+          </EuiTableHeaderMobile>
+        )}
         <EuiTable
           id={this.tableId}
           tableLayout={tableLayout}
+          responsiveBreakpoint={responsiveBreakpoint}
           responsive={responsive}
           compressed={compressed}
           css={loading && safariLoadingWorkaround}
         >
-          {caption}
-          {head}
-          {body}
-          {footer}
+          {this.renderTableCaption()}
+          {this.renderTableHead()}
+          {this.renderTableBody()}
+          {this.renderTableFooter()}
         </EuiTable>
-      </div>
+      </>
     );
   }