From aa3537fc76b37e2f50ca205097f9c910c9fb79dc Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 22 Jan 2019 17:34:27 -0500
Subject: [PATCH] Fixes #1036

---
 .../__snapshots__/basic_table.test.js.snap    | 787 +++++++++++++++---
 .../in_memory_table.test.js.snap              |  33 +-
 src/components/basic_table/basic_table.js     |  80 +-
 3 files changed, 752 insertions(+), 148 deletions(-)

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
index a4a18ced71dc..686c0f68f5d3 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -5,7 +5,26 @@ exports[`EuiBasicTable cellProps renders cells with custom props from a callback
   className="euiBasicTable"
 >
   <div>
-    <EuiTableHeaderMobile />
+    <EuiTableHeaderMobile>
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+      </EuiFlexGroup>
+    </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
     >
@@ -119,7 +138,26 @@ exports[`EuiBasicTable cellProps renders rows with custom props from an object 1
   className="euiBasicTable"
 >
   <div>
-    <EuiTableHeaderMobile />
+    <EuiTableHeaderMobile>
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+      </EuiFlexGroup>
+    </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
     >
@@ -235,7 +273,26 @@ exports[`EuiBasicTable empty is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <div>
-    <EuiTableHeaderMobile />
+    <EuiTableHeaderMobile>
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+      </EuiFlexGroup>
+    </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
     >
@@ -292,7 +349,26 @@ exports[`EuiBasicTable empty renders a node as a custom message 1`] = `
   className="euiBasicTable"
 >
   <div>
-    <EuiTableHeaderMobile />
+    <EuiTableHeaderMobile>
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+      </EuiFlexGroup>
+    </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
     >
@@ -357,7 +433,26 @@ exports[`EuiBasicTable empty renders a string as a custom message 1`] = `
   className="euiBasicTable"
 >
   <div>
-    <EuiTableHeaderMobile />
+    <EuiTableHeaderMobile>
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+      </EuiFlexGroup>
+    </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
     >
@@ -414,7 +509,26 @@ exports[`EuiBasicTable footers do not render without a column footer definition
   className="euiBasicTable"
 >
   <div>
-    <EuiTableHeaderMobile />
+    <EuiTableHeaderMobile>
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+      </EuiFlexGroup>
+    </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
     >
@@ -624,19 +738,51 @@ exports[`EuiBasicTable footers render with pagination, selection, sorting, and f
 >
   <div>
     <EuiTableHeaderMobile>
-      <EuiTableSortMobile
-        items={
-          Array [
-            Object {
-              "isSortAscending": true,
-              "isSorted": true,
-              "key": "_data_s_name_0",
-              "name": "Name",
-              "onSort": [Function],
-            },
-          ]
-        }
-      />
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiCheckbox
+            aria-label="Select all rows"
+            checked={false}
+            compressed={false}
+            data-test-subj={null}
+            disabled={false}
+            id="_selection_column-checkbox"
+            indeterminate={false}
+            label="Select all rows"
+            onChange={[Function]}
+            type={null}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiTableSortMobile
+            items={
+              Array [
+                Object {
+                  "isSortAscending": true,
+                  "isSorted": true,
+                  "key": "_data_s_name_0",
+                  "name": "Name",
+                  "onSort": [Function],
+                },
+              ]
+            }
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
@@ -666,6 +812,7 @@ exports[`EuiBasicTable footers render with pagination, selection, sorting, and f
             disabled={false}
             id="_selection_column-checkbox"
             indeterminate={false}
+            label={null}
             onChange={[Function]}
             type="inList"
           />
@@ -957,7 +1104,26 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
   className="euiBasicTable"
 >
   <div>
-    <EuiTableHeaderMobile />
+    <EuiTableHeaderMobile>
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+      </EuiFlexGroup>
+    </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
     >
@@ -1082,7 +1248,26 @@ exports[`EuiBasicTable rowProps renders rows with custom props from a callback 1
   className="euiBasicTable"
 >
   <div>
-    <EuiTableHeaderMobile />
+    <EuiTableHeaderMobile>
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+      </EuiFlexGroup>
+    </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
     >
@@ -1202,7 +1387,26 @@ exports[`EuiBasicTable rowProps renders rows with custom props from an object 1`
   className="euiBasicTable"
 >
   <div>
-    <EuiTableHeaderMobile />
+    <EuiTableHeaderMobile>
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+      </EuiFlexGroup>
+    </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
     >
@@ -1322,7 +1526,26 @@ exports[`EuiBasicTable with pagination - 2nd page 1`] = `
   className="euiBasicTable"
 >
   <div>
-    <EuiTableHeaderMobile />
+    <EuiTableHeaderMobile>
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+      </EuiFlexGroup>
+    </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
     >
@@ -1417,7 +1640,26 @@ exports[`EuiBasicTable with pagination 1`] = `
   className="euiBasicTable"
 >
   <div>
-    <EuiTableHeaderMobile />
+    <EuiTableHeaderMobile>
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+      </EuiFlexGroup>
+    </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
     >
@@ -1533,7 +1775,26 @@ exports[`EuiBasicTable with pagination and error 1`] = `
   className="euiBasicTable"
 >
   <div>
-    <EuiTableHeaderMobile />
+    <EuiTableHeaderMobile>
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+      </EuiFlexGroup>
+    </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
     >
@@ -1596,7 +1857,39 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
   className="euiBasicTable"
 >
   <div>
-    <EuiTableHeaderMobile />
+    <EuiTableHeaderMobile>
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiCheckbox
+            aria-label="Select all rows"
+            checked={false}
+            compressed={false}
+            data-test-subj={null}
+            disabled={false}
+            id="_selection_column-checkbox"
+            indeterminate={false}
+            label="Select all rows"
+            onChange={[Function]}
+            type={null}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+      </EuiFlexGroup>
+    </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
     >
@@ -1625,6 +1918,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
             disabled={false}
             id="_selection_column-checkbox"
             indeterminate={false}
+            label={null}
             onChange={[Function]}
             type="inList"
           />
@@ -1777,7 +2071,26 @@ exports[`EuiBasicTable with pagination, hiding the per page options 1`] = `
   className="euiBasicTable"
 >
   <div>
-    <EuiTableHeaderMobile />
+    <EuiTableHeaderMobile>
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+      </EuiFlexGroup>
+    </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
     >
@@ -1895,19 +2208,51 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
 >
   <div>
     <EuiTableHeaderMobile>
-      <EuiTableSortMobile
-        items={
-          Array [
-            Object {
-              "isSortAscending": true,
-              "isSorted": true,
-              "key": "_data_s_name_0",
-              "name": "Name",
-              "onSort": [Function],
-            },
-          ]
-        }
-      />
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiCheckbox
+            aria-label="Select all rows"
+            checked={false}
+            compressed={false}
+            data-test-subj={null}
+            disabled={false}
+            id="_selection_column-checkbox"
+            indeterminate={false}
+            label="Select all rows"
+            onChange={[Function]}
+            type={null}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiTableSortMobile
+            items={
+              Array [
+                Object {
+                  "isSortAscending": true,
+                  "isSorted": true,
+                  "key": "_data_s_name_0",
+                  "name": "Name",
+                  "onSort": [Function],
+                },
+              ]
+            }
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
@@ -1937,6 +2282,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
             disabled={false}
             id="_selection_column-checkbox"
             indeterminate={false}
+            label={null}
             onChange={[Function]}
             type="inList"
           />
@@ -2093,19 +2439,51 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
 >
   <div>
     <EuiTableHeaderMobile>
-      <EuiTableSortMobile
-        items={
-          Array [
-            Object {
-              "isSortAscending": true,
-              "isSorted": true,
-              "key": "_data_s_name_0",
-              "name": "Name",
-              "onSort": [Function],
-            },
-          ]
-        }
-      />
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiCheckbox
+            aria-label="Select all rows"
+            checked={false}
+            compressed={false}
+            data-test-subj={null}
+            disabled={false}
+            id="_selection_column-checkbox"
+            indeterminate={false}
+            label="Select all rows"
+            onChange={[Function]}
+            type={null}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiTableSortMobile
+            items={
+              Array [
+                Object {
+                  "isSortAscending": true,
+                  "isSorted": true,
+                  "key": "_data_s_name_0",
+                  "name": "Name",
+                  "onSort": [Function],
+                },
+              ]
+            }
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
@@ -2135,6 +2513,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
             disabled={false}
             id="_selection_column-checkbox"
             indeterminate={false}
+            label={null}
             onChange={[Function]}
             type="inList"
           />
@@ -2405,19 +2784,51 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
 >
   <div>
     <EuiTableHeaderMobile>
-      <EuiTableSortMobile
-        items={
-          Array [
-            Object {
-              "isSortAscending": true,
-              "isSorted": true,
-              "key": "_data_s_count_0",
-              "name": "Count",
-              "onSort": [Function],
-            },
-          ]
-        }
-      />
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiCheckbox
+            aria-label="Select all rows"
+            checked={false}
+            compressed={false}
+            data-test-subj={null}
+            disabled={false}
+            id="_selection_column-checkbox"
+            indeterminate={false}
+            label="Select all rows"
+            onChange={[Function]}
+            type={null}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiTableSortMobile
+            items={
+              Array [
+                Object {
+                  "isSortAscending": true,
+                  "isSorted": true,
+                  "key": "_data_s_count_0",
+                  "name": "Count",
+                  "onSort": [Function],
+                },
+              ]
+            }
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
@@ -2447,6 +2858,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
             disabled={false}
             id="_selection_column-checkbox"
             indeterminate={false}
+            label={null}
             onChange={[Function]}
             type="inList"
           />
@@ -2603,19 +3015,51 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
 >
   <div>
     <EuiTableHeaderMobile>
-      <EuiTableSortMobile
-        items={
-          Array [
-            Object {
-              "isSortAscending": true,
-              "isSorted": true,
-              "key": "_data_s_name_0",
-              "name": "Name",
-              "onSort": [Function],
-            },
-          ]
-        }
-      />
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiCheckbox
+            aria-label="Select all rows"
+            checked={false}
+            compressed={false}
+            data-test-subj={null}
+            disabled={false}
+            id="_selection_column-checkbox"
+            indeterminate={false}
+            label="Select all rows"
+            onChange={[Function]}
+            type={null}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiTableSortMobile
+            items={
+              Array [
+                Object {
+                  "isSortAscending": true,
+                  "isSorted": true,
+                  "key": "_data_s_name_0",
+                  "name": "Name",
+                  "onSort": [Function],
+                },
+              ]
+            }
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
@@ -2645,6 +3089,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
             disabled={false}
             id="_selection_column-checkbox"
             indeterminate={false}
+            label={null}
             onChange={[Function]}
             type="inList"
           />
@@ -2801,19 +3246,51 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
 >
   <div>
     <EuiTableHeaderMobile>
-      <EuiTableSortMobile
-        items={
-          Array [
-            Object {
-              "isSortAscending": true,
-              "isSorted": true,
-              "key": "_data_s_name_0",
-              "name": "Name",
-              "onSort": [Function],
-            },
-          ]
-        }
-      />
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiCheckbox
+            aria-label="Select all rows"
+            checked={false}
+            compressed={false}
+            data-test-subj={null}
+            disabled={false}
+            id="_selection_column-checkbox"
+            indeterminate={false}
+            label="Select all rows"
+            onChange={[Function]}
+            type={null}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiTableSortMobile
+            items={
+              Array [
+                Object {
+                  "isSortAscending": true,
+                  "isSorted": true,
+                  "key": "_data_s_name_0",
+                  "name": "Name",
+                  "onSort": [Function],
+                },
+              ]
+            }
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
@@ -2843,6 +3320,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
             disabled={false}
             id="_selection_column-checkbox"
             indeterminate={false}
+            label={null}
             onChange={[Function]}
             type="inList"
           />
@@ -3131,19 +3609,51 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
 >
   <div>
     <EuiTableHeaderMobile>
-      <EuiTableSortMobile
-        items={
-          Array [
-            Object {
-              "isSortAscending": true,
-              "isSorted": true,
-              "key": "_data_s_count_0",
-              "name": "Count",
-              "onSort": [Function],
-            },
-          ]
-        }
-      />
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiCheckbox
+            aria-label="Select all rows"
+            checked={false}
+            compressed={false}
+            data-test-subj={null}
+            disabled={false}
+            id="_selection_column-checkbox"
+            indeterminate={false}
+            label="Select all rows"
+            onChange={[Function]}
+            type={null}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiTableSortMobile
+            items={
+              Array [
+                Object {
+                  "isSortAscending": true,
+                  "isSorted": true,
+                  "key": "_data_s_count_0",
+                  "name": "Count",
+                  "onSort": [Function],
+                },
+              ]
+            }
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
@@ -3173,6 +3683,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
             disabled={false}
             id="_selection_column-checkbox"
             indeterminate={false}
+            label={null}
             onChange={[Function]}
             type="inList"
           />
@@ -3328,7 +3839,26 @@ exports[`EuiBasicTable with sortable columns and sorting disabled 1`] = `
   className="euiBasicTable"
 >
   <div>
-    <EuiTableHeaderMobile />
+    <EuiTableHeaderMobile>
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+      </EuiFlexGroup>
+    </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
     >
@@ -3434,19 +3964,38 @@ exports[`EuiBasicTable with sorting 1`] = `
 >
   <div>
     <EuiTableHeaderMobile>
-      <EuiTableSortMobile
-        items={
-          Array [
-            Object {
-              "isSortAscending": true,
-              "isSorted": true,
-              "key": "_data_s_name_0",
-              "name": "Name",
-              "onSort": [Function],
-            },
-          ]
-        }
-      />
+      <EuiFlexGroup
+        alignItems="baseline"
+        component="div"
+        direction="row"
+        gutterSize="l"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        />
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiTableSortMobile
+            items={
+              Array [
+                Object {
+                  "isSortAscending": true,
+                  "isSorted": true,
+                  "key": "_data_s_name_0",
+                  "name": "Name",
+                  "onSort": [Function],
+                },
+              ]
+            }
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiTableHeaderMobile>
     <EuiTable
       responsive={true}
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
index 53eafec9146c..e445db573832 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
@@ -99,7 +99,38 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
         <EuiTableHeaderMobile>
           <div
             className="euiTableHeaderMobile"
-          />
+          >
+            <EuiFlexGroup
+              alignItems="baseline"
+              component="div"
+              direction="row"
+              gutterSize="l"
+              justifyContent="spaceBetween"
+              responsive={false}
+              wrap={false}
+            >
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+              >
+                <EuiFlexItem
+                  component="div"
+                  grow={false}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem
+                  component="div"
+                  grow={false}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  />
+                </EuiFlexItem>
+              </div>
+            </EuiFlexGroup>
+          </div>
         </EuiTableHeaderMobile>
         <EuiTable
           responsive={true}
diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js
index 427922407311..63d0c86fe512 100644
--- a/src/components/basic_table/basic_table.js
+++ b/src/components/basic_table/basic_table.js
@@ -11,6 +11,7 @@ import {
 } from '../../services';
 import { isFunction } from '../../services/predicate';
 import { get } from '../../services/objects';
+import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiTable } from '../table/table';
 import { EuiTableHeaderCellCheckbox } from '../table/table_header_cell_checkbox';
 import { EuiCheckbox } from '../form/checkbox/checkbox';
@@ -364,7 +365,16 @@ export class EuiBasicTable extends Component {
 
     const { compressed, responsive } = this.props;
 
-    const mobileHeader = responsive ? (<EuiTableHeaderMobile>{this.renderTableMobileSort()}</EuiTableHeaderMobile>) : undefined;
+    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();
@@ -422,42 +432,56 @@ export class EuiBasicTable extends Component {
     );
   }
 
-  renderTableHead() {
+  renderSelectAll = isMobile => {
+    const { items, selection } = this.props;
 
-    const { items, columns, selection } = this.props;
+    if (!selection) {
+      return;
+    }
 
-    const headers = [];
+    const selectableItems = items.filter(item => (
+      !selection.selectable || selection.selectable(item)
+    ));
 
-    if (selection) {
-      const selectableItems = items.filter(item => (
-        !selection.selectable || selection.selectable(item)
-      ));
+    const checked = this.state.selection &&
+      selectableItems.length > 0 &&
+      this.state.selection.length === selectableItems.length;
+
+    const disabled = selectableItems.length === 0;
+
+    const onChange = (event) => {
+      if (event.target.checked) {
+        this.changeSelection(selectableItems);
+      } else {
+        this.changeSelection([]);
+      }
+    };
+
+    return (
+      <EuiCheckbox
+        id="_selection_column-checkbox"
+        type={isMobile ? null : 'inList'}
+        checked={checked}
+        disabled={disabled}
+        onChange={onChange}
+        // Only add data-test-subj to one of the checkboxes
+        data-test-subj={isMobile ? null : 'checkboxSelectAll'}
+        aria-label="Select all rows"
+        label={isMobile ? 'Select all rows' : null}
+      />
+    );
+  }
 
-      const checked = this.state.selection &&
-        selectableItems.length > 0 &&
-        this.state.selection.length === selectableItems.length;
+  renderTableHead() {
 
-      const disabled = selectableItems.length === 0;
+    const { columns, selection } = this.props;
 
-      const onChange = (event) => {
-        if (event.target.checked) {
-          this.changeSelection(selectableItems);
-        } else {
-          this.changeSelection([]);
-        }
-      };
+    const headers = [];
 
+    if (selection) {
       headers.push(
         <EuiTableHeaderCellCheckbox key="_selection_column_h" width="24px">
-          <EuiCheckbox
-            id="_selection_column-checkbox"
-            type="inList"
-            checked={checked}
-            disabled={disabled}
-            onChange={onChange}
-            data-test-subj="checkboxSelectAll"
-            aria-label="Select all rows"
-          />
+          {this.renderSelectAll()}
         </EuiTableHeaderCellCheckbox>
       );
     }