Multiple fixes for mobile tables

CHANGELOG.md

@@ -1,6 +1,15 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `8.0.0`.
+- Added `mobileOptions` object prop for handling of all the mobile specific options of `EuiBasicTable` ([#1462](https://github.com/elastic/eui/pull/1462))
+- Table headers now accept `React.node` types ([#1462](https://github.com/elastic/eui/pull/1462))
+
+**Bug fixes**
+
+- `EuiBasicTable` select all shows up on mobile ([#1462](https://github.com/elastic/eui/pull/1462))
+
+**Breaking changes**
+
+- `EuiBasicTable`'s select all checkbox appends a `makeId` string to the id ([#1462](https://github.com/elastic/eui/pull/1462))
 
 ## [`8.0.0`](https://github.com/elastic/eui/tree/v8.0.0)
 

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',

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',

src-docs/src/views/tables/basic/props_info.js

@@ -9,10 +9,20 @@ export const propsInfo = {
           type: { name: 'object[]' }
         },
         itemId: {
-          description: 'describes how to extract a unique ID from each item, used for selections & expanded rows',
+          description: 'Describes how to extract a unique ID from each item, used for selections & expanded rows',
           required: false,
           type: { name: 'string | (item) => string' }
         },
+        itemIdToExpandedRowMap: {
+          description: 'Row expansion uses the `itemId` prop to identify each row',
+          required: false,
+          type: { name: 'object[]' }
+        },
+        cellProps: {
+          description: 'Applied to `EuiTableRowCell`',
+          required: false,
+          type: { name: 'func | object[]' }
+        },
         compressed: {
           description: 'Makes the font and padding smaller for the entire table',
           type: { name: 'bool' }
@@ -22,11 +32,47 @@ export const propsInfo = {
           required: true,
           type: { name: '(#FieldDataColumn | #ComputedColumn | #ActionsColumn)[]' }
         },
+        error: {
+          description: 'Error message to display',
+          required: false,
+          type: { name: 'string' }
+        },
+        hasActions: {
+          description: 'Needed at the top level for responsive positioning',
+          type: { name: 'bool' }
+        },
+        isExpandable: {
+          description: 'Needed at the top level for responsive positioning',
+          type: { name: 'bool' }
+        },
+        isSelectable: {
+          description: 'Needed at the top level for responsive positioning',
+          type: { name: 'bool' }
+        },
+        loading: {
+          description: 'Provides an infinite loading indicator',
+          type: { name: 'bool' }
+        },
+        noItemsMessage: {
+          description: 'Message to display if table is empty',
+          required: false,
+          type: { name: 'node' }
+        },
         pagination: {
           description: 'Configures pagination',
           required: false,
           type: { name: '#Pagination' }
         },
+        responsive: {
+          description: 'If `true`, will convert table to cards in mobile view',
+          type: { name: 'bool' },
+          defaultValue: { value: 'true' },
+        },
+        rowProps: {
+          description: 'Applied to `EuiTableRow`',
+          required: false,
+          type: { name: 'func | object[]' }
+        },
         sorting: {
           description: 'Configures sorting',
           required: false,
@@ -38,7 +84,7 @@ export const propsInfo = {
           type: { name: '#Selection' }
         },
         onChange: {
-          description: 'Called whenever pagination or sorting changes (this property is required when either' +
+          description: 'Called whenever pagination or sorting changes (this property is required when either ' +
             'pagination or sorting is configured',
           required: false,
           type: { name: '(criteria: #Criteria) => void' }

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>

src-docs/src/views/tables/custom/custom_section.js

@@ -9,7 +9,6 @@ import {
   EuiTableHeaderCellCheckbox,
   EuiTablePagination,
   EuiTableRow,
-  EuiTableRowCell,
   EuiTableRowCellCheckbox,
   EuiTableHeaderMobile,
   EuiTableSortMobile,
@@ -22,6 +21,7 @@ import { renderToHtml } from '../../../services';
 import Custom from './custom';
 const source = require('!!raw-loader!./custom');
 const html = renderToHtml(Custom);
+import { cellPropsInfo } from './props_info';
 
 export const section = {
   title: 'Build a custom table from individual components',
@@ -50,12 +50,12 @@ export const section = {
         Responsive extras
       </h3>
       <p>
-        You must supply a <EuiCode>header</EuiCode> prop equivalent to the column header
+        You must supply a <EuiCode>mobileOptions.header</EuiCode> prop equivalent to the column header
         on each <EuiCode>EuiTableRowCell</EuiCode> so that the mobile version will use that
         to populate the per cell headers.
       </p>
       <p>
-        Also, custom table implementation <strong>will not</strong> auto-populate any header level functions
+        Also, custom table implementations <strong>will not</strong> auto-populate any header level functions
         like selection and filtering. In order to add mobile support for these functions,
         you will need to implement the <EuiCode>EuiTableHeaderMobile</EuiCode> component
         as a wrapper around these and use <EuiCode>EuiTableSortMobile</EuiCode>
@@ -73,8 +73,8 @@ export const section = {
     EuiTableHeaderCellCheckbox,
     EuiTablePagination,
     EuiTableRow,
-    EuiTableRowCell,
     EuiTableRowCellCheckbox,
+    ...cellPropsInfo,
     EuiTableHeaderMobile,
     EuiTableSortMobile,
     EuiTableSortMobileItem,

src-docs/src/views/tables/custom/props_info.js

@@ -0,0 +1,128 @@
+export const cellPropsInfo = {
+
+  EuiTableRowCell: {
+    __docgenInfo: {
+      props: {
+        sharedProps: {
+          description: 'These props can be passed at the top level or within #mobileOptions',
+          type: { name: '#sharedProps' },
+        },
+        colSpan: {
+          description: 'Number of columns to span',
+          required: false,
+          type: { name: 'number' },
+        },
+        hasActions: {
+          description: 'Indicates if the column is dedicated to icon-only actions (currently affects mobile only)',
+          required: false,
+          type: { name: 'bool' }
+        },
+        isExpander: {
+          description: 'Indicates if the column is dedicated as the expandable row toggle',
+          required: false,
+          type: { name: 'bool' }
+        },
+        mobileOptions: {
+          description: 'Object of mobile specific options for displaying differently at small screens',
+          required: false,
+          type: { name: '#mobileOptions' },
+        },
+        header: {
+          description: 'DEPRECATED: use `mobileOptions.header`',
+          required: false,
+          type: { name: 'bool' }
+        },
+        isMobileHeader: {
+          description: 'DEPRECATED: use `mobileOptions.only = true & mobileOptions.header = false`',
+          required: false,
+          type: { name: 'bool' }
+        },
+        hideForMobile: {
+          description: 'DEPRECATED: use `mobileOptions.show = false`',
+          required: false,
+          type: { name: 'bool' }
+        },
+        isMobileFullWidth: {
+          description: 'DEPRECATED: use `mobileOptions.fullWidth`',
+          required: false,
+          type: { name: 'bool' }
+        },
+      }
+    }
+  },
+
+  sharedProps: {
+    __docgenInfo: {
+      _euiObjectType: 'type',
+      props: {
+        align: {
+          description: 'Horizontal alignment of the text in the cell',
+          required: false,
+          type: { name: 'left | right | center' },
+          defaultValue: { value: 'left' },
+        },
+        truncateText: {
+          description: 'Don\'t allow line breaks within cells',
+          required: false,
+          type: { name: 'bool' }
+        },
+        textOnly: {
+          description: 'Setting `textOnly` to `false` will break words unnecessarily on FF and IE. ' +
+            'To combat this problem on FF, wrap contents with the css utility `.eui-textBreakWord`.',
+          required: false,
+          type: { name: 'bool' }
+        },
+        showOnHover: {
+          description: '_Should only be used for action cells_',
+          required: false,
+          type: { name: 'bool' }
+        },
+      }
+    }
+  },
+
+  mobileOptions: {
+    __docgenInfo: {
+      _euiObjectType: 'type',
+      props: {
+        show: {
+          description: 'If false, will not render the cell at all for mobile',
+          required: false,
+          type: { name: 'bool' },
+          defaultValue: { value: 'true' },
+        },
+        only: {
+          description: 'Only show for mobile? If true, will not render the column at all for desktop',
+          required: false,
+          type: { name: 'bool' }
+        },
+        render: {
+          description: 'Custom render/children if different from desktop',
+          required: false,
+          type: { name: 'node' }
+        },
+        header: {
+          description: 'The column\'s header for use in mobile view (automatically passed down when using `EuiBasicTable`). ' +
+            'Or pass `false` to not show a header at all.',
+          required: false,
+          type: { name: 'node | bool' }
+        },
+        enlarge: {
+          description: 'Increase text size compared to rest of cells',
+          required: false,
+          type: { name: 'bool' }
+        },
+        fullWidth: {
+          description: 'Allocates 100% of the width of the container in mobile view (typically cells are contained to 50%)',
+          required: false,
+          type: { name: 'bool' }
+        },
+        sharedProps: {
+          description: 'These props will only work if a mobile specific `render` function is also passed',
+          type: { name: '#sharedProps' },
+        },
+      }
+    }
+  },
+
+};