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):

- 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, /**