Fix isMobileHeader prop

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

@@ -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>

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

@@ -51,7 +51,7 @@ export const cellPropsInfo = {
           type: { name: 'bool' }
         },
         isMobileHeader: {
-          description: 'DEPRECATED: use `mobileOptions.only = true`',
+          description: 'DEPRECATED: use `mobileOptions.only = true & mobileOptions.header = false`',
           required: false,
           type: { name: 'bool' }
         },

src-docs/src/views/tables/mobile/mobile_section.js

@@ -28,52 +28,53 @@ export const section = {
     {
       type: GuideSectionTypes.JS,
       code: source,
-    }, {
+    },
+    {
       type: GuideSectionTypes.HTML,
       code: html,
-    }
+    },
   ],
   text: (
     <div>
       <p>
-        Allowing a table to be responsive means breaking each row down into it&apos;s 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>responsive = false</EuiCode>.
+        Allowing a table to be responsive means breaking each row down into it&apos;s 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>responsive = false</EuiCode>.
       </p>
       <h4>
-        To make your table works responsively, please make sure you add
-        the following <EuiTextColor color="danger">additional</EuiTextColor> props to the top level
-        table component (<EuiCode>EuiBasicTable</EuiCode> or <EuiCode>EuiTable</EuiCode>):
+        To make your table works responsively, please make sure you add the following{' '}
+        <EuiTextColor color="danger">additional</EuiTextColor> props to the top level table
+        component (<EuiCode>EuiBasicTable</EuiCode> or <EuiCode>EuiInMemoryTable</EuiCode>):
       </h4>
       <ul>
         <li>
-          <EuiCode>isSelectable</EuiCode>: if the table has a single column of checkboxes for selecting rows
+          <EuiCode>isSelectable</EuiCode>: if the table has a single column of checkboxes for
+          selecting rows
         </li>
         <li>
           <EuiCode>isExpandable</EuiCode>: if the table has rows that can expand
         </li>
         <li>
-          <EuiCode>hasActions</EuiCode>: if the table has a column for actions which may/may not be hidden in hover
+          <EuiCode>hasActions</EuiCode>: if the table has a column for actions which may/may not be
+          hidden in hover
         </li>
       </ul>
       <h4>
-        The <EuiCode>mobileOptions</EuiCode> object can be passed to the <EuiCode>EuiTableRowCell</EuiCode> directly or
-        with each column item provided to <EuiCode>EuiBasicTable</EuiCode>.
-      </h4>
-      <EuiCodeBlock lang="javascript">
-        {exampleItem}
-      </EuiCodeBlock>
-      <h4>
-        Note:
+        The <EuiCode>mobileOptions</EuiCode> object can be passed to the{' '}
+        <EuiCode>EuiTableRowCell</EuiCode> directly or with each column item provided to{' '}
+        <EuiCode>EuiBasicTable</EuiCode>.
       </h4>
+      <EuiCodeBlock lang="javascript">{exampleItem}</EuiCodeBlock>
+      <h4>Note:</h4>
       <p>
-        You can also change basic table row cell props like `truncateText` and `textOnly` for mobile layouts, though you
-        must also be passing a mobile specific render function.
+        You can also change basic table row cell props like <EuiCode>truncateText</EuiCode> and{' '}
+        <EuiCode>textOnly</EuiCode> for mobile layouts, though you must also be passing a mobile
+        specific render function.
       </p>
     </div>
   ),
   props: propsInfo,
-  demo: <Table/>,
+  demo: <Table />,
 };

src/components/table/table_header_cell.js

@@ -35,7 +35,7 @@ export const EuiTableHeaderCell = ({
 }) => {
   const classes = classNames('euiTableHeaderCell', className, {
     'euiTableHeaderCell--hideForDesktop': mobileOptions.only || isMobileHeader,
-    'euiTableHeaderCell--hideForMobile': hideForMobile,
+    'euiTableHeaderCell--hideForMobile': !mobileOptions.show || hideForMobile,
   });
 
   const contentClasses = classNames('euiTableCellContent', className, {

src/components/table/table_row_cell.js

@@ -102,7 +102,7 @@ export const EuiTableRowCell = ({
     cellRender = (
       <td className={cellClasses} colSpan={colSpan} {...rest}>
         {/* Mobile-only header */}
-        {(mobileOptions.header || header) &&
+        {(mobileOptions.header || header) && !isMobileHeader &&
           <div className={`euiTableRowCell__mobileHeader ${showForMobileClasses}`}>{mobileOptions.header || header}</div>
         }
 
@@ -163,9 +163,9 @@ EuiTableRowCell.propTypes = {
    */
   header: PropTypes.string,
   /**
-   * _DEPRECATED: use `mobileOptions.only = true`_
-   * Indicates if the column was created to be the row's heading in mobile view
-   * (this column will be hidden at larger screens)
+   * _DEPRECATED: use `mobileOptions.only = true & mobileOptions.header = false`_
+   * Indicates if the column was created to be the row's heading in mobile view.
+   * It won't display column's header inline and it the column will be hidden at larger screens)
    */
   isMobileHeader: PropTypes.bool,
   /**