diff --git a/src-docs/src/views/tables/custom/custom_section.js b/src-docs/src/views/tables/custom/custom_section.js
index c555d497a039..092d2fd35289 100644
--- a/src-docs/src/views/tables/custom/custom_section.js
+++ b/src-docs/src/views/tables/custom/custom_section.js
@@ -50,12 +50,12 @@ export const section = {
Responsive extras
- You must supply a header prop equivalent to the column header
+ You must supply a mobileOptions.header prop equivalent to the column header
on each EuiTableRowCell so that the mobile version will use that
to populate the per cell headers.
- Also, custom table implementation will not auto-populate any header level functions
+ Also, custom table implementations will not 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 EuiTableHeaderMobile component
as a wrapper around these and use EuiTableSortMobile
diff --git a/src-docs/src/views/tables/custom/props_info.js b/src-docs/src/views/tables/custom/props_info.js
index 1b79bac23c39..4503bc541149 100644
--- a/src-docs/src/views/tables/custom/props_info.js
+++ b/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' }
},
diff --git a/src-docs/src/views/tables/mobile/mobile_section.js b/src-docs/src/views/tables/mobile/mobile_section.js
index 7c9aab5ecdfa..a23e3fa75109 100644
--- a/src-docs/src/views/tables/mobile/mobile_section.js
+++ b/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: (
- Allowing a table to be responsive means breaking each row down into it'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 responsive = false.
+ Allowing a table to be responsive means breaking each row down into it'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 responsive = false.
- To make your table works responsively, please make sure you add
- the following additional props to the top level
- table component (EuiBasicTable or EuiTable):
+ To make your table works responsively, please make sure you add the following{' '}
+ additional props to the top level table
+ component (EuiBasicTable or EuiInMemoryTable):
-
- isSelectable: if the table has a single column of checkboxes for selecting rows
+ isSelectable: if the table has a single column of checkboxes for
+ selecting rows
-
isExpandable: if the table has rows that can expand
-
- hasActions: if the table has a column for actions which may/may not be hidden in hover
+ hasActions: if the table has a column for actions which may/may not be
+ hidden in hover
- The mobileOptions object can be passed to the EuiTableRowCell directly or
- with each column item provided to EuiBasicTable.
-
-
- {exampleItem}
-
-
- Note:
+ The mobileOptions object can be passed to the{' '}
+ EuiTableRowCell directly or with each column item provided to{' '}
+ EuiBasicTable.
+
{exampleItem}
+
Note:
- 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 truncateText and{' '}
+ textOnly for mobile layouts, though you must also be passing a mobile
+ specific render function.
),
props: propsInfo,
- demo: ,
+ demo: ,
};
diff --git a/src/components/table/table_header_cell.js b/src/components/table/table_header_cell.js
index 6db722934652..caaa212a79b1 100644
--- a/src/components/table/table_header_cell.js
+++ b/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, {
diff --git a/src/components/table/table_row_cell.js b/src/components/table/table_row_cell.js
index a3dd62238505..53c7e3fd111b 100644
--- a/src/components/table/table_row_cell.js
+++ b/src/components/table/table_row_cell.js
@@ -102,7 +102,7 @@ export const EuiTableRowCell = ({
cellRender = (
{/* Mobile-only header */}
- {(mobileOptions.header || header) &&
+ {(mobileOptions.header || header) && !isMobileHeader &&
{mobileOptions.header || header}
}
@@ -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,
/**
|