diff --git a/src-docs/src/views/tables/actions/actions.js b/src-docs/src/views/tables/actions/actions.js
index a037e58d7fac..02a8152c8ec9 100644
--- a/src-docs/src/views/tables/actions/actions.js
+++ b/src-docs/src/views/tables/actions/actions.js
@@ -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',
diff --git a/src-docs/src/views/tables/basic/basic.js b/src-docs/src/views/tables/basic/basic.js
index 93d020ed4862..f9e4ffd4743a 100644
--- a/src-docs/src/views/tables/basic/basic.js
+++ b/src-docs/src/views/tables/basic/basic.js
@@ -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',
diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js
index 064698e564f0..d235d95c5c1c 100644
--- a/src-docs/src/views/tables/custom/custom.js
+++ b/src-docs/src/views/tables/custom/custom.js
@@ -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>
       ),
@@ -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>
@@ -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>
diff --git a/src-docs/src/views/tables/expanding_rows/expanding_rows.js b/src-docs/src/views/tables/expanding_rows/expanding_rows.js
index 5dd89ee47c93..2d3e7b9962f4 100644
--- a/src-docs/src/views/tables/expanding_rows/expanding_rows.js
+++ b/src-docs/src/views/tables/expanding_rows/expanding_rows.js
@@ -151,20 +151,22 @@ export class Table extends Component {
       name: 'First Name',
       sortable: true,
       truncateText: 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',
-      sortable: true,
-      isMobileHeader: true,
-      render: (name, item) => (
-        <span>{item.firstName} {item.lastName}</span>
-      )
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'dateOfBirth',
       name: 'Date of Birth',
diff --git a/src-docs/src/views/tables/footer/footer.js b/src-docs/src/views/tables/footer/footer.js
index 5ee172b6c60b..e8329491dea0 100644
--- a/src-docs/src/views/tables/footer/footer.js
+++ b/src-docs/src/views/tables/footer/footer.js
@@ -132,16 +132,23 @@ export class Table extends Component {
       footer: <em>Page totals:</em>,
       sortable: true,
       truncateText: true,
-      hideForMobile: true,
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'lastName',
       name: 'Last Name',
       truncateText: true,
-      hideForMobile: true,
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'firstName',
       name: 'Full Name',
-      isMobileHeader: true,
+      mobileOptions: {
+        only: true,
+        fullWidth: true,
+      },
       render: (name, item) => (
         <EuiFlexGroup responsive={false} alignItems="center">
           <EuiFlexItem>{item.firstName} {item.lastName}</EuiFlexItem>
diff --git a/src-docs/src/views/tables/paginated/paginated.js b/src-docs/src/views/tables/paginated/paginated.js
index cd8ee1f8924a..ca90621d4350 100644
--- a/src-docs/src/views/tables/paginated/paginated.js
+++ b/src-docs/src/views/tables/paginated/paginated.js
@@ -87,15 +87,25 @@ export class Table extends Component {
       name: 'First Name',
       truncateText: true,
       hideForMobile: true,
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'lastName',
       name: 'Last Name',
       truncateText: true,
-      hideForMobile: true,
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'firstName',
       name: 'Full Name',
-      isMobileHeader: true,
+      mobileOptions: {
+        header: false,
+        only: true,
+        enlarge: true,
+        fullWidth: true,
+      },
       render: (name, item) => (
         <EuiFlexGroup responsive={false} alignItems="center">
           <EuiFlexItem>{item.firstName} {item.lastName}</EuiFlexItem>
diff --git a/src-docs/src/views/tables/selection/selection.js b/src-docs/src/views/tables/selection/selection.js
index f2269a2002f2..aad0baa8ce91 100644
--- a/src-docs/src/views/tables/selection/selection.js
+++ b/src-docs/src/views/tables/selection/selection.js
@@ -129,16 +129,25 @@ export class Table extends Component {
       name: 'First Name',
       sortable: true,
       truncateText: true,
-      hideForMobile: true,
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'lastName',
       name: 'Last Name',
       truncateText: true,
-      hideForMobile: true,
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'firstName',
       name: 'Full Name',
-      isMobileHeader: true,
+      mobileOptions: {
+        only: true,
+        header: false,
+        enlarge: true,
+        fullWidth: true,
+      },
       render: (name, item) => (
         <EuiFlexGroup responsive={false} alignItems="center">
           <EuiFlexItem>{item.firstName} {item.lastName}</EuiFlexItem>
@@ -174,7 +183,9 @@ export class Table extends Component {
         this.renderStatus(online)
       ),
       sortable: true,
-      hideForMobile: true,
+      mobileOptions: {
+        show: false,
+      }
     }];
 
     const pagination = {
diff --git a/src-docs/src/views/tables/sorting/sorting.js b/src-docs/src/views/tables/sorting/sorting.js
index dcdfdfa833c5..1aeca18cedd0 100644
--- a/src-docs/src/views/tables/sorting/sorting.js
+++ b/src-docs/src/views/tables/sorting/sorting.js
@@ -85,21 +85,23 @@ export class Table extends Component {
       name: 'First Name',
       sortable: true,
       truncateText: 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',
       sortable: true,
       truncateText: true,
-      hideForMobile: true,
-    }, {
-      field: 'firstName',
-      name: 'Full Name',
-      sortable: true,
-      isMobileHeader: true,
-      render: (name, item) => (
-        <span>{item.firstName} {item.lastName}</span>
-      )
+      mobileOptions: {
+        show: false,
+      }
     }, {
       field: 'github',
       name: (