[EuiBasicTable] Fixed clickable rows not highlighting in sub-tables

src-docs/src/views/tables/in_memory/in_memory.js

@@ -1,11 +1,5 @@
-import React from 'react';
-import { formatDate } from '../../../../../src/services/format';
-import { createDataStore } from '../data_store';
-import {
-  EuiInMemoryTable,
-  EuiLink,
-  EuiHealth,
-} from '../../../../../src/components';
+import React, { useState, useMemo } from 'react';
+import { EuiInMemoryTable, EuiButtonIcon } from '../../../../../src/components';
 
 /*
 Example user object:
@@ -29,71 +23,59 @@ Example country object:
 }
 */
 
-const store = createDataStore();
+let tableCounter = 0;
 
 export const Table = () => {
+  const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState({});
+
+  const toggleDetails = (item) => {
+    const itemIdToExpandedRowMapValues = { ...itemIdToExpandedRowMap };
+    if (itemIdToExpandedRowMapValues[item.id]) {
+      delete itemIdToExpandedRowMapValues[item.id];
+    } else {
+      itemIdToExpandedRowMapValues[item.id] = <Table />;
+    }
+    setItemIdToExpandedRowMap(itemIdToExpandedRowMapValues);
+  };
+
   const columns = [
     {
-      field: 'firstName',
-      name: 'First Name',
-      sortable: true,
-      truncateText: true,
+      field: 'row',
+      name: 'Row Name',
+      width: '4em',
     },
     {
-      field: 'lastName',
-      name: 'Last Name',
-      truncateText: true,
-    },
-    {
-      field: 'github',
-      name: 'Github',
-      render: (username) => (
-        <EuiLink href={`https://github.com/${username}`} target="_blank">
-          {username}
-        </EuiLink>
+      isExpander: true,
+      width: '1em',
+      render: (item) => (
+        <EuiButtonIcon
+          aria-label={itemIdToExpandedRowMap[item.id] ? 'Collapse' : 'Expand'}
+          iconType={itemIdToExpandedRowMap[item.id] ? 'arrowUp' : 'arrowDown'}
+        />
       ),
     },
-    {
-      field: 'dateOfBirth',
-      name: 'Date of Birth',
-      dataType: 'date',
-      render: (date) => formatDate(date, 'dobLong'),
-      sortable: true,
-    },
-    {
-      field: 'nationality',
-      name: 'Nationality',
-      render: (countryCode) => {
-        const country = store.getCountry(countryCode);
-        return `${country.flag} ${country.name}`;
-      },
-    },
-    {
-      field: 'online',
-      name: 'Online',
-      dataType: 'boolean',
-      render: (online) => {
-        const color = online ? 'success' : 'danger';
-        const label = online ? 'Online' : 'Offline';
-        return <EuiHealth color={color}>{label}</EuiHealth>;
-      },
-      sortable: true,
-    },
   ];
 
-  const sorting = {
-    sort: {
-      field: 'dateOfBirth',
-      direction: 'desc',
-    },
-  };
+  const items = useMemo(() => {
+    function createItems(count) {
+      let index = 0;
+      tableCounter++;
+      return Array.apply(0, Array(count)).map(() => ({
+        id: `${++index}`,
+        row: `row ${index} in table ${tableCounter}`,
+      }));
+    }
+    return createItems(5);
+  }, []);
 
   return (
     <EuiInMemoryTable
-      items={store.users}
+      items={items}
+      itemId="id"
+      itemIdToExpandedRowMap={itemIdToExpandedRowMap}
+      isExpandable={true}
       columns={columns}
-      pagination={true}
-      sorting={sorting}
+      rowProps={(row) => ({ onClick: () => toggleDetails(row) })}
     />
   );
 };

src/components/table/_table.scss

@@ -86,10 +86,22 @@
     background-color: $euiTableHoverColor;
   }
 
-  &.euiTableRow-isExpandedRow {
-    .euiTableRowCell {
-      background-color: $euiTableHoverColor;
+
+  &.euiTableRow-isClickable {
+    background-color: $euiColorEmptyShade !important; // sass-lint:disable-line no-important
+
+    &:hover {
+      background-color: $euiTableHoverClickableColor !important; // sass-lint:disable-line no-important
+      cursor: pointer;
+    }
+
+    &:focus {
+      background-color: $euiTableFocusClickableColor !important; // sass-lint:disable-line no-important
     }
+  }
+
+  &.euiTableRow-isExpandedRow {
+    background-color: $euiTableHoverColor;
 
     &.euiTableRow-isSelectable .euiTableCellContent {
       padding-left: $euiTableCellCheckboxWidth + $euiTableCellContentPadding;
@@ -235,13 +247,4 @@
   }
 }
 
-.euiTableRow-isClickable {
-  &:hover {
-    background-color: $euiTableHoverClickableColor;
-    cursor: pointer;
-  }
 
-  &:focus {
-    background-color: $euiTableFocusClickableColor;
-  }
-}