Convert table cell header into undefined if it's been provided to EuiBasicTable as a non-string node.

CHANGELOG.md

@@ -1,8 +1,11 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added support for nodes as "Action" column headers in `EuiBasicTable`, which was overlooked in the original change in `4.5.0` ([#1312](https://github.com/elastic/eui/pull/1312))
+
 **Bug fixes**
 
-- Fixed `fullWidth` size of `EuiComboBox` ([#1314](https://github.com/elastic/eui/pull/1314))
+- `EuiBasicTable` now converts the `EuiTableRowCell` `header` into `undefined` if it's been provided as a non-string node, hiding the header and preventing the node from being rendered as `[object Object]` on narrow screens ([#1312](https://github.com/elastic/eui/pull/1312))
+- Fixed `fullWidth` size of `EuiComboBox`, a regression introduced in `4.7.0` ([#1314](https://github.com/elastic/eui/pull/1314))
 
 ## [`5.1.0`](https://github.com/elastic/eui/tree/v5.1.0)
 
@@ -98,7 +101,7 @@
 
 - Added export for `TYPES` to `EuiAvatar` ([#1238](https://github.com/elastic/eui/pull/1238))
 - Updated node-sass dependency to support OSX Mojave ([#1238](https://github.com/elastic/eui/pull/1238))
-- Added TypeScript definitions for `EuiFieldNumber, `EuiFormLabel` and `EuiSelect`, and fix the `EuiTextColor` definition. ([#1240](https://github.com/elastic/eui/pull/1240))
+- Added TypeScript definitions for `EuiFieldNumber`, `EuiFormLabel` and `EuiSelect`, and fix the `EuiTextColor` definition. ([#1240](https://github.com/elastic/eui/pull/1240))
 - Added support for nodes as column headers in `EuiBasicTable` for supporting things like tooltips and localized text. ([#1234](https://github.com/elastic/eui/pull/1234))
 
 ## [`4.4.1`](https://github.com/elastic/eui/tree/v4.4.1)

src/components/basic_table/basic_table.js

@@ -91,7 +91,7 @@ const SupportedItemActionType = PropTypes.oneOfType([
 
 export const ActionsColumnType = PropTypes.shape({
   actions: PropTypes.arrayOf(SupportedItemActionType).isRequired,
-  name: PropTypes.string,
+  name: PropTypes.node,
   description: PropTypes.string,
   width: PropTypes.string
 });
@@ -829,12 +829,16 @@ export class EuiBasicTable extends Component {
     const columnAlign = align || this.getAlignForDataType(dataType);
     const { cellProps: cellPropsCallback } = this.props;
     const cellProps = getCellProps(item, column, cellPropsCallback);
+    // Name can also be an array or an element, so we need to convert it to undefined. We can't
+    // stringify the value, because this value is rendered directly in the mobile layout. So the
+    // best thing we can do is render no header at all.
+    const header = typeof name === 'string' ? name : undefined;
 
     return (
       <EuiTableRowCell
         key={key}
         align={columnAlign}
-        header={name}
+        header={header}
         isExpander={isExpander}
         textOnly={textOnly || !render}
         {...cellProps}

src/components/table/_responsive.scss

@@ -113,8 +113,8 @@
       min-width: 50%;
       border: none;
 
-      // Prepend the data attribute "data-header" to each cell
-      &::before {
+      // Prepend the data attribute "data-header" to each cell, if the data-header exists.
+      &[data-header]::before {
         @include fontSize($euiFontSize * .6875);
 
         content: attr(data-header);

src/components/table/table_row_cell.js

@@ -115,5 +115,5 @@ EuiTableRowCell.propTypes = {
 
 EuiTableRowCell.defaultProps = {
   align: LEFT_ALIGNMENT,
-  textOnly: true
+  textOnly: true,
 };