From 981ad1ef7262b06a451345bb6567e9c60e1a684e Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Fri, 29 Mar 2024 16:16:02 -0700
Subject: [PATCH] Convert cell styles to Emotion (row cells, header/footer
 cells, & cell checkboxes) (#7631)

Co-authored-by: Jason Stoltzfus <jastoltz24@gmail.com>
---
 changelogs/upcoming/7631.md                   |   3 +
 changelogs/upcoming/TBD.md                    |   2 +
 .../__snapshots__/basic_table.test.tsx.snap   |  90 ++++++-------
 .../in_memory_table.test.tsx.snap             |  18 +--
 .../basic_table/basic_table.test.tsx          |  34 +++++
 src/components/basic_table/basic_table.tsx    |  24 ++--
 .../table/__snapshots__/table.test.tsx.snap   |   8 +-
 .../table_footer_cell.test.tsx.snap           |  16 +--
 .../table_header_cell.test.tsx.snap           |  28 ++--
 .../table_header_cell_checkbox.test.tsx.snap  |  10 +-
 .../__snapshots__/table_row.test.tsx.snap     |   4 +-
 .../table_row_cell.test.tsx.snap              |  36 ++---
 .../table_row_cell_checkbox.test.tsx.snap     |   2 +-
 src/components/table/_index.scss              |   1 -
 src/components/table/_mixins.scss             |  13 --
 src/components/table/_responsive.scss         |  51 -------
 src/components/table/_table.scss              |  76 +----------
 src/components/table/table.styles.ts          |   3 +
 .../table/table_cells_shared.styles.ts        |  84 ++++++++++++
 src/components/table/table_footer_cell.tsx    |  14 +-
 src/components/table/table_header_cell.tsx    |  25 ++--
 .../table/table_header_cell_checkbox.tsx      |  14 +-
 src/components/table/table_row.styles.ts      |  39 +-----
 src/components/table/table_row.tsx            |   2 -
 src/components/table/table_row_cell.styles.ts | 124 ++++++++++++++++++
 src/components/table/table_row_cell.tsx       |  28 +++-
 .../table/table_row_cell_checkbox.tsx         |  15 ++-
 27 files changed, 445 insertions(+), 319 deletions(-)
 create mode 100644 changelogs/upcoming/7631.md
 delete mode 100644 src/components/table/_mixins.scss
 create mode 100644 src/components/table/table_cells_shared.styles.ts
 create mode 100644 src/components/table/table_row_cell.styles.ts

diff --git a/changelogs/upcoming/7631.md b/changelogs/upcoming/7631.md
new file mode 100644
index 00000000000..f2647c0b2d3
--- /dev/null
+++ b/changelogs/upcoming/7631.md
@@ -0,0 +1,3 @@
+**DOM changes**
+
+- `EuiTableRowCell` now applies passed `className`s to the parent `<td>` element, instead of to the inner cell content `<div>`.
diff --git a/changelogs/upcoming/TBD.md b/changelogs/upcoming/TBD.md
index 14e262d98d2..4cf75777eba 100644
--- a/changelogs/upcoming/TBD.md
+++ b/changelogs/upcoming/TBD.md
@@ -9,3 +9,5 @@
   - `$euiTableFocusClickableColor`
 - Removed the following `EuiTable` Sass mixins:
   - `euiTableActionsBackgroundMobile`
+  - `euiTableCellCheckbox`
+  - `euiTableCell`
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
index f7c7e222ae1..1a0bfd7b09a 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
     <thead>
       <tr>
         <th
-          class="euiTableHeaderCell"
+          class="euiTableHeaderCell emotion-euiTableHeaderCell"
           data-test-subj="tableHeaderCell_name_0"
           role="columnheader"
           scope="col"
@@ -47,10 +47,10 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
         class="euiTableRow emotion-euiTableRow-desktop"
       >
         <td
-          class="euiTableRowCell euiTableRowCell--middle"
+          class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         >
           <div
-            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
           >
             Name
           </div>
@@ -69,10 +69,10 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
         class="euiTableRow emotion-euiTableRow-desktop"
       >
         <td
-          class="euiTableRowCell euiTableRowCell--middle"
+          class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         >
           <div
-            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
           >
             Name
           </div>
@@ -91,10 +91,10 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
         class="euiTableRow emotion-euiTableRow-desktop"
       >
         <td
-          class="euiTableRowCell euiTableRowCell--middle"
+          class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         >
           <div
-            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
           >
             Name
           </div>
@@ -129,7 +129,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
     <thead>
       <tr>
         <th
-          class="euiTableHeaderCellCheckbox"
+          class="euiTableHeaderCellCheckbox emotion-euiTableHeaderCellCheckbox"
           scope="col"
         >
           <div
@@ -154,13 +154,13 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
         <th
           aria-live="polite"
           aria-sort="ascending"
-          class="euiTableHeaderCell"
+          class="euiTableHeaderCell emotion-euiTableHeaderCell"
           data-test-subj="tableHeaderCell_name_0"
           role="columnheader"
           scope="col"
         >
           <button
-            class="euiTableHeaderButton euiTableHeaderButton-isSorted"
+            class="euiTableHeaderButton euiTableHeaderButton-isSorted emotion-euiTableHeaderCell__button"
             data-test-subj="tableHeaderSortButton"
             type="button"
           >
@@ -186,7 +186,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </button>
         </th>
         <th
-          class="euiTableHeaderCell"
+          class="euiTableHeaderCell emotion-euiTableHeaderCell"
           data-test-subj="tableHeaderCell_id_1"
           role="columnheader"
           scope="col"
@@ -208,7 +208,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </span>
         </th>
         <th
-          class="euiTableHeaderCell"
+          class="euiTableHeaderCell emotion-euiTableHeaderCell"
           data-test-subj="tableHeaderCell_age_2"
           role="columnheader"
           scope="col"
@@ -230,7 +230,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </span>
         </th>
         <th
-          class="euiTableHeaderCell"
+          class="euiTableHeaderCell emotion-euiTableHeaderCell"
           role="columnheader"
           scope="col"
         >
@@ -254,7 +254,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
         class="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions emotion-euiTableRow-desktop"
       >
         <td
-          class="euiTableRowCellCheckbox"
+          class="euiTableRowCellCheckbox emotion-euiTableRowCellCheckbox-desktop"
         >
           <div
             class="euiTableCellContent"
@@ -277,10 +277,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableRowCell euiTableRowCell--middle"
+          class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         >
           <div
-            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
           >
             Name
           </div>
@@ -291,10 +291,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableRowCell euiTableRowCell--middle"
+          class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         >
           <div
-            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
           >
             ID
           </div>
@@ -309,10 +309,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableRowCell euiTableRowCell--middle"
+          class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         >
           <div
-            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
           >
             Age
           </div>
@@ -327,10 +327,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
+          class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-middle-desktop-euiBasicTableActionsWrapper"
         >
           <div
-            class="euiTableCellContent emotion-euiBasicTableActionsWrapper euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
+            class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
           >
             <span
               class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
@@ -375,7 +375,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
         class="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions emotion-euiTableRow-desktop"
       >
         <td
-          class="euiTableRowCellCheckbox"
+          class="euiTableRowCellCheckbox emotion-euiTableRowCellCheckbox-desktop"
         >
           <div
             class="euiTableCellContent"
@@ -398,10 +398,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableRowCell euiTableRowCell--middle"
+          class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         >
           <div
-            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
           >
             Name
           </div>
@@ -412,10 +412,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableRowCell euiTableRowCell--middle"
+          class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         >
           <div
-            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
           >
             ID
           </div>
@@ -430,10 +430,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableRowCell euiTableRowCell--middle"
+          class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         >
           <div
-            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
           >
             Age
           </div>
@@ -448,10 +448,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
+          class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-middle-desktop-euiBasicTableActionsWrapper"
         >
           <div
-            class="euiTableCellContent emotion-euiBasicTableActionsWrapper euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
+            class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
           >
             <span
               class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
@@ -496,7 +496,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
         class="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions emotion-euiTableRow-desktop"
       >
         <td
-          class="euiTableRowCellCheckbox"
+          class="euiTableRowCellCheckbox emotion-euiTableRowCellCheckbox-desktop"
         >
           <div
             class="euiTableCellContent"
@@ -519,10 +519,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableRowCell euiTableRowCell--middle"
+          class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         >
           <div
-            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
           >
             Name
           </div>
@@ -533,10 +533,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableRowCell euiTableRowCell--middle"
+          class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         >
           <div
-            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
           >
             ID
           </div>
@@ -551,10 +551,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableRowCell euiTableRowCell--middle"
+          class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         >
           <div
-            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
           >
             Age
           </div>
@@ -569,10 +569,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
+          class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-middle-desktop-euiBasicTableActionsWrapper"
         >
           <div
-            class="euiTableCellContent emotion-euiBasicTableActionsWrapper euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
+            class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
           >
             <span
               class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
@@ -617,7 +617,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
     <tfoot>
       <tr>
         <td
-          class="euiTableFooterCell"
+          class="euiTableFooterCell emotion-euiTableFooterCell"
         >
           <div
             class="euiTableCellContent"
@@ -628,7 +628,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableFooterCell"
+          class="euiTableFooterCell emotion-euiTableFooterCell"
         >
           <div
             class="euiTableCellContent"
@@ -639,7 +639,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableFooterCell"
+          class="euiTableFooterCell emotion-euiTableFooterCell"
         >
           <div
             class="euiTableCellContent"
@@ -655,7 +655,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableFooterCell"
+          class="euiTableFooterCell emotion-euiTableFooterCell"
         >
           <div
             class="euiTableCellContent"
@@ -666,7 +666,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableFooterCell"
+          class="euiTableFooterCell emotion-euiTableFooterCell"
         >
           <div
             class="euiTableCellContent"
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
index 6bf50f9dba8..64c1d011447 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -165,7 +165,7 @@ exports[`EuiInMemoryTable empty array 1`] = `
     <thead>
       <tr>
         <th
-          class="euiTableHeaderCell"
+          class="euiTableHeaderCell emotion-euiTableHeaderCell"
           data-test-subj="tableHeaderCell_name_0"
           role="columnheader"
           scope="col"
@@ -195,7 +195,7 @@ exports[`EuiInMemoryTable empty array 1`] = `
         class="euiTableRow emotion-euiTableRow-desktop"
       >
         <td
-          class="euiTableRowCell euiTableRowCell--middle"
+          class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
           colspan="1"
         >
           <div
@@ -258,7 +258,7 @@ exports[`EuiInMemoryTable with items 1`] = `
     <thead>
       <tr>
         <th
-          class="euiTableHeaderCell"
+          class="euiTableHeaderCell emotion-euiTableHeaderCell"
           data-test-subj="tableHeaderCell_name_0"
           role="columnheader"
           scope="col"
@@ -288,10 +288,10 @@ exports[`EuiInMemoryTable with items 1`] = `
         class="euiTableRow emotion-euiTableRow-desktop"
       >
         <td
-          class="euiTableRowCell euiTableRowCell--middle"
+          class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         >
           <div
-            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
           >
             Name
           </div>
@@ -310,10 +310,10 @@ exports[`EuiInMemoryTable with items 1`] = `
         class="euiTableRow emotion-euiTableRow-desktop"
       >
         <td
-          class="euiTableRowCell euiTableRowCell--middle"
+          class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         >
           <div
-            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
           >
             Name
           </div>
@@ -332,10 +332,10 @@ exports[`EuiInMemoryTable with items 1`] = `
         class="euiTableRow emotion-euiTableRow-desktop"
       >
         <td
-          class="euiTableRowCell euiTableRowCell--middle"
+          class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         >
           <div
-            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
           >
             Name
           </div>
diff --git a/src/components/basic_table/basic_table.test.tsx b/src/components/basic_table/basic_table.test.tsx
index bf9513474ff..6239fdf69f1 100644
--- a/src/components/basic_table/basic_table.test.tsx
+++ b/src/components/basic_table/basic_table.test.tsx
@@ -692,6 +692,40 @@ describe('EuiBasicTable', () => {
       );
     });
 
+    test('custom item actions', () => {
+      const props: EuiBasicTableProps<BasicItem> = {
+        items: basicItems,
+        columns: [
+          ...basicColumns,
+          {
+            name: 'Actions',
+            actions: [
+              {
+                render: ({ id }) => (
+                  <button data-test-subj={`customAction-${id}`}>
+                    Custom action
+                  </button>
+                ),
+                available: ({ id }) => id !== '3',
+              },
+            ],
+          },
+        ],
+        responsiveBreakpoint: true, // Needs to be in mobile to render customAction cell CSS
+      };
+      const { queryByTestSubject, container } = render(
+        <EuiBasicTable {...props} />
+      );
+
+      expect(queryByTestSubject('customAction-1')).toBeInTheDocument();
+      expect(queryByTestSubject('customAction-2')).toBeInTheDocument();
+      expect(queryByTestSubject('customAction-3')).not.toBeInTheDocument();
+
+      expect(
+        container.querySelector('.euiTableRowCell--hasActions')!.className
+      ).toContain('-customActions');
+    });
+
     describe('are disabled on selection', () => {
       test('single action', () => {
         const props: EuiBasicTableProps<BasicItem> = {
diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx
index f3aeec4c963..d91076abe44 100644
--- a/src/components/basic_table/basic_table.tsx
+++ b/src/components/basic_table/basic_table.tsx
@@ -61,7 +61,7 @@ import { EuiI18n } from '../i18n';
 import { EuiDelayRender } from '../delay_render';
 
 import { htmlIdGenerator } from '../../services/accessibility';
-import { Action } from './action_types';
+import { Action, CustomItemAction } from './action_types';
 import {
   EuiTableActionsColumnType,
   EuiTableComputedColumnType,
@@ -1147,6 +1147,10 @@ export class EuiBasicTable<T extends object = any> extends Component<
     // Disable all actions if any row(s) are selected
     const allDisabled = this.state.selection.length > 0;
 
+    const hasCustomActions = column.actions.some(
+      (action: Action<T>) => !!(action as CustomItemAction<T>).render
+    );
+
     let actualActions = column.actions.filter(
       (action: Action<T>) => !action.available || action.available(item)
     );
@@ -1181,15 +1185,6 @@ export class EuiBasicTable<T extends object = any> extends Component<
       });
     }
 
-    const tools = (
-      <ExpandedItemActions
-        actions={actualActions}
-        actionsDisabled={allDisabled}
-        itemId={itemId}
-        item={item}
-      />
-    );
-
     const key = `record_actions_${itemId}_${columnIndex}`;
     return (
       <EuiTableRowCell
@@ -1197,10 +1192,15 @@ export class EuiBasicTable<T extends object = any> extends Component<
         key={key}
         align="right"
         textOnly={false}
-        hasActions={true}
+        hasActions={hasCustomActions ? 'custom' : true}
         css={euiBasicTableActionsWrapper}
       >
-        {tools}
+        <ExpandedItemActions
+          actions={actualActions}
+          actionsDisabled={allDisabled}
+          itemId={itemId}
+          item={item}
+        />
       </EuiTableRowCell>
     );
   }
diff --git a/src/components/table/__snapshots__/table.test.tsx.snap b/src/components/table/__snapshots__/table.test.tsx.snap
index 8fa9470b448..a62b8b6a99a 100644
--- a/src/components/table/__snapshots__/table.test.tsx.snap
+++ b/src/components/table/__snapshots__/table.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`EuiTable renders 1`] = `
   <thead>
     <tr>
       <th
-        class="euiTableHeaderCell"
+        class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
         scope="col"
       >
@@ -26,7 +26,7 @@ exports[`EuiTable renders 1`] = `
         </span>
       </th>
       <th
-        class="euiTableHeaderCell"
+        class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
         scope="col"
       >
@@ -48,7 +48,7 @@ exports[`EuiTable renders 1`] = `
       class="euiTableRow emotion-euiTableRow-desktop"
     >
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
       >
         <div
           class="euiTableCellContent"
@@ -65,7 +65,7 @@ exports[`EuiTable renders 1`] = `
       class="euiTableRow emotion-euiTableRow-desktop"
     >
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
       >
         <div
           class="euiTableCellContent"
diff --git a/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap b/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap
index 7381fc37986..fef148f13e3 100644
--- a/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap
+++ b/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`EuiTableFooterCell align defaults to left 1`] = `
   <tfoot>
     <tr>
       <td
-        class="euiTableFooterCell"
+        class="euiTableFooterCell emotion-euiTableFooterCell"
       >
         <div
           class="euiTableCellContent"
@@ -25,7 +25,7 @@ exports[`EuiTableFooterCell align renders center when specified 1`] = `
   <tfoot>
     <tr>
       <td
-        class="euiTableFooterCell"
+        class="euiTableFooterCell emotion-euiTableFooterCell"
       >
         <div
           class="euiTableCellContent euiTableCellContent--alignCenter"
@@ -45,7 +45,7 @@ exports[`EuiTableFooterCell align renders right when specified 1`] = `
   <tfoot>
     <tr>
       <td
-        class="euiTableFooterCell"
+        class="euiTableFooterCell emotion-euiTableFooterCell"
       >
         <div
           class="euiTableCellContent euiTableCellContent--alignRight"
@@ -66,7 +66,7 @@ exports[`EuiTableFooterCell is rendered 1`] = `
     <tr>
       <td
         aria-label="aria-label"
-        class="euiTableFooterCell testClass1 testClass2 emotion-euiTestCss"
+        class="euiTableFooterCell testClass1 testClass2 emotion-euiTableFooterCell-euiTestCss"
         data-test-subj="test subject string"
       >
         <div
@@ -89,7 +89,7 @@ exports[`EuiTableFooterCell width and style accepts style attribute 1`] = `
   <tfoot>
     <tr>
       <td
-        class="euiTableFooterCell"
+        class="euiTableFooterCell emotion-euiTableFooterCell"
         style="width: 20%;"
       >
         <div
@@ -112,7 +112,7 @@ exports[`EuiTableFooterCell width and style accepts width attribute 1`] = `
   <tfoot>
     <tr>
       <td
-        class="euiTableFooterCell"
+        class="euiTableFooterCell emotion-euiTableFooterCell"
         style="width: 10%;"
       >
         <div
@@ -135,7 +135,7 @@ exports[`EuiTableFooterCell width and style accepts width attribute as number 1`
   <tfoot>
     <tr>
       <td
-        class="euiTableFooterCell"
+        class="euiTableFooterCell emotion-euiTableFooterCell"
         style="width: 100px;"
       >
         <div
@@ -158,7 +158,7 @@ exports[`EuiTableFooterCell width and style resolves style and width attribute 1
   <tfoot>
     <tr>
       <td
-        class="euiTableFooterCell"
+        class="euiTableFooterCell emotion-euiTableFooterCell"
         style="width: 10%;"
       >
         <div
diff --git a/src/components/table/__snapshots__/table_header_cell.test.tsx.snap b/src/components/table/__snapshots__/table_header_cell.test.tsx.snap
index e60c0af7ec8..afc9ac71e65 100644
--- a/src/components/table/__snapshots__/table_header_cell.test.tsx.snap
+++ b/src/components/table/__snapshots__/table_header_cell.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`align defaults to left 1`] = `
   <thead>
     <tr>
       <td
-        class="euiTableHeaderCell"
+        class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
       >
         <span
@@ -26,7 +26,7 @@ exports[`align renders center when specified 1`] = `
   <thead>
     <tr>
       <td
-        class="euiTableHeaderCell"
+        class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
       >
         <span
@@ -47,7 +47,7 @@ exports[`align renders right when specified 1`] = `
   <thead>
     <tr>
       <td
-        class="euiTableHeaderCell"
+        class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
       >
         <span
@@ -69,7 +69,7 @@ exports[`renders EuiTableHeaderCell 1`] = `
     <tr>
       <th
         aria-label="aria-label"
-        class="euiTableHeaderCell testClass1 testClass2 emotion-euiTestCss"
+        class="euiTableHeaderCell testClass1 testClass2 emotion-euiTableHeaderCell-euiTestCss"
         data-test-subj="test subject string"
         role="columnheader"
         scope="col"
@@ -96,7 +96,7 @@ exports[`renders td when children is null/undefined 1`] = `
     <tr>
       <td
         aria-label="aria-label"
-        class="euiTableHeaderCell testClass1 testClass2 emotion-euiTestCss"
+        class="euiTableHeaderCell testClass1 testClass2 emotion-euiTableHeaderCell-euiTestCss"
         data-test-subj="test subject string"
         role="columnheader"
       >
@@ -120,7 +120,7 @@ exports[`sorting does not render a button with readOnly 1`] = `
       <th
         aria-live="polite"
         aria-sort="descending"
-        class="euiTableHeaderCell"
+        class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
         scope="col"
       >
@@ -151,7 +151,7 @@ exports[`sorting is rendered with isSortAscending 1`] = `
       <th
         aria-live="polite"
         aria-sort="ascending"
-        class="euiTableHeaderCell"
+        class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
         scope="col"
       >
@@ -182,7 +182,7 @@ exports[`sorting is rendered with isSorted 1`] = `
       <th
         aria-live="polite"
         aria-sort="descending"
-        class="euiTableHeaderCell"
+        class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
         scope="col"
       >
@@ -213,12 +213,12 @@ exports[`sorting renders a button with onSort 1`] = `
       <th
         aria-live="polite"
         aria-sort="descending"
-        class="euiTableHeaderCell"
+        class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
         scope="col"
       >
         <button
-          class="euiTableHeaderButton euiTableHeaderButton-isSorted"
+          class="euiTableHeaderButton euiTableHeaderButton-isSorted emotion-euiTableHeaderCell__button"
           data-test-subj="tableHeaderSortButton"
           type="button"
         >
@@ -248,7 +248,7 @@ exports[`width and style accepts style attribute 1`] = `
   <thead>
     <tr>
       <th
-        class="euiTableHeaderCell"
+        class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
         scope="col"
         style="width: 20%;"
@@ -274,7 +274,7 @@ exports[`width and style accepts width attribute 1`] = `
   <thead>
     <tr>
       <th
-        class="euiTableHeaderCell"
+        class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
         scope="col"
         style="width: 10%;"
@@ -300,7 +300,7 @@ exports[`width and style accepts width attribute as number 1`] = `
   <thead>
     <tr>
       <th
-        class="euiTableHeaderCell"
+        class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
         scope="col"
         style="width: 100px;"
@@ -326,7 +326,7 @@ exports[`width and style resolves style and width attribute 1`] = `
   <thead>
     <tr>
       <th
-        class="euiTableHeaderCell"
+        class="euiTableHeaderCell emotion-euiTableHeaderCell"
         role="columnheader"
         scope="col"
         style="width: 10%;"
diff --git a/src/components/table/__snapshots__/table_header_cell_checkbox.test.tsx.snap b/src/components/table/__snapshots__/table_header_cell_checkbox.test.tsx.snap
index ecb526bbd67..7ef9dd15316 100644
--- a/src/components/table/__snapshots__/table_header_cell_checkbox.test.tsx.snap
+++ b/src/components/table/__snapshots__/table_header_cell_checkbox.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`EuiTableHeaderCellCheckbox is rendered 1`] = `
     <tr>
       <th
         aria-label="aria-label"
-        class="euiTableHeaderCellCheckbox testClass1 testClass2 emotion-euiTestCss"
+        class="euiTableHeaderCellCheckbox testClass1 testClass2 emotion-euiTableHeaderCellCheckbox-euiTestCss"
         data-test-subj="test subject string"
         scope="col"
       >
@@ -24,7 +24,7 @@ exports[`EuiTableHeaderCellCheckbox width and style accepts style attribute 1`]
   <thead>
     <tr>
       <th
-        class="euiTableHeaderCellCheckbox"
+        class="euiTableHeaderCellCheckbox emotion-euiTableHeaderCellCheckbox"
         scope="col"
         style="width: 20%;"
       >
@@ -44,7 +44,7 @@ exports[`EuiTableHeaderCellCheckbox width and style accepts width attribute 1`]
   <thead>
     <tr>
       <th
-        class="euiTableHeaderCellCheckbox"
+        class="euiTableHeaderCellCheckbox emotion-euiTableHeaderCellCheckbox"
         scope="col"
         style="width: 10%;"
       >
@@ -64,7 +64,7 @@ exports[`EuiTableHeaderCellCheckbox width and style accepts width attribute as n
   <thead>
     <tr>
       <th
-        class="euiTableHeaderCellCheckbox"
+        class="euiTableHeaderCellCheckbox emotion-euiTableHeaderCellCheckbox"
         scope="col"
         style="width: 100px;"
       >
@@ -84,7 +84,7 @@ exports[`EuiTableHeaderCellCheckbox width and style resolves style and width att
   <thead>
     <tr>
       <th
-        class="euiTableHeaderCellCheckbox"
+        class="euiTableHeaderCellCheckbox emotion-euiTableHeaderCellCheckbox"
         scope="col"
         style="width: 10%;"
       >
diff --git a/src/components/table/__snapshots__/table_row.test.tsx.snap b/src/components/table/__snapshots__/table_row.test.tsx.snap
index e2fec8aee8f..85309f355bd 100644
--- a/src/components/table/__snapshots__/table_row.test.tsx.snap
+++ b/src/components/table/__snapshots__/table_row.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`isSelected renders true when specified 1`] = `
       class="euiTableRow euiTableRow-isSelected emotion-euiTableRow-desktop-selected"
     >
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
       >
         <div
           class="euiTableCellContent"
@@ -31,7 +31,7 @@ exports[`renders EuiTableRow 1`] = `
       data-test-subj="test subject string"
     >
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
       >
         <div
           class="euiTableCellContent"
diff --git a/src/components/table/__snapshots__/table_row_cell.test.tsx.snap b/src/components/table/__snapshots__/table_row_cell.test.tsx.snap
index 863bc72681c..38fd06c3fe9 100644
--- a/src/components/table/__snapshots__/table_row_cell.test.tsx.snap
+++ b/src/components/table/__snapshots__/table_row_cell.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`align defaults to left 1`] = `
   <tbody>
     <tr>
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
       >
         <div
           class="euiTableCellContent"
@@ -25,7 +25,7 @@ exports[`align renders center when specified 1`] = `
   <tbody>
     <tr>
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
       >
         <div
           class="euiTableCellContent euiTableCellContent--alignCenter"
@@ -45,7 +45,7 @@ exports[`align renders right when specified 1`] = `
   <tbody>
     <tr>
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
       >
         <div
           class="euiTableCellContent euiTableCellContent--alignRight"
@@ -65,7 +65,7 @@ exports[`children's className merges new classnames into existing ones 1`] = `
   <tbody>
     <tr>
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
       >
         <div
           class="euiTableCellContent euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
@@ -86,11 +86,11 @@ exports[`renders EuiTableRowCell 1`] = `
     <tr>
       <td
         aria-label="aria-label"
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell testClass1 testClass2 emotion-euiTableRowCell-middle-desktop-euiTestCss"
         data-test-subj="test subject string"
       >
         <div
-          class="euiTableCellContent testClass1 testClass2 emotion-euiTestCss"
+          class="euiTableCellContent"
         >
           <span
             class="euiTableCellContent__text"
@@ -109,7 +109,7 @@ exports[`textOnly defaults to true 1`] = `
   <tbody>
     <tr>
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
       >
         <div
           class="euiTableCellContent"
@@ -129,7 +129,7 @@ exports[`textOnly is rendered when specified 1`] = `
   <tbody>
     <tr>
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
       >
         <div
           class="euiTableCellContent euiTableCellContent--overflowingContent"
@@ -145,7 +145,7 @@ exports[`truncateText defaults to false 1`] = `
   <tbody>
     <tr>
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
       >
         <div
           class="euiTableCellContent"
@@ -165,7 +165,7 @@ exports[`truncateText renders lines configuration 1`] = `
   <tbody>
     <tr>
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
       >
         <div
           class="euiTableCellContent"
@@ -185,7 +185,7 @@ exports[`truncateText renders true 1`] = `
   <tbody>
     <tr>
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
       >
         <div
           class="euiTableCellContent euiTableCellContent--truncateText"
@@ -205,7 +205,7 @@ exports[`valign defaults to middle 1`] = `
   <tbody>
     <tr>
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
       >
         <div
           class="euiTableCellContent"
@@ -225,7 +225,7 @@ exports[`valign renders bottom when specified 1`] = `
   <tbody>
     <tr>
       <td
-        class="euiTableRowCell euiTableRowCell--bottom"
+        class="euiTableRowCell emotion-euiTableRowCell-bottom-desktop"
       >
         <div
           class="euiTableCellContent"
@@ -245,7 +245,7 @@ exports[`valign renders top when specified 1`] = `
   <tbody>
     <tr>
       <td
-        class="euiTableRowCell euiTableRowCell--top"
+        class="euiTableRowCell emotion-euiTableRowCell-top-desktop"
       >
         <div
           class="euiTableCellContent"
@@ -265,7 +265,7 @@ exports[`width and style accepts style attribute 1`] = `
   <tbody>
     <tr>
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         style="width: 20%;"
       >
         <div
@@ -288,7 +288,7 @@ exports[`width and style accepts width attribute 1`] = `
   <tbody>
     <tr>
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         style="width: 10%;"
       >
         <div
@@ -311,7 +311,7 @@ exports[`width and style accepts width attribute as number 1`] = `
   <tbody>
     <tr>
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         style="width: 100px;"
       >
         <div
@@ -334,7 +334,7 @@ exports[`width and style resolves style and width attribute 1`] = `
   <tbody>
     <tr>
       <td
-        class="euiTableRowCell euiTableRowCell--middle"
+        class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
         style="width: 10%;"
       >
         <div
diff --git a/src/components/table/__snapshots__/table_row_cell_checkbox.test.tsx.snap b/src/components/table/__snapshots__/table_row_cell_checkbox.test.tsx.snap
index f81ba97cd20..b5191cee14d 100644
--- a/src/components/table/__snapshots__/table_row_cell_checkbox.test.tsx.snap
+++ b/src/components/table/__snapshots__/table_row_cell_checkbox.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`EuiTableRowCellCheckbox is rendered 1`] = `
     <tr>
       <td
         aria-label="aria-label"
-        class="euiTableRowCellCheckbox testClass1 testClass2 emotion-euiTestCss"
+        class="euiTableRowCellCheckbox testClass1 testClass2 emotion-euiTableRowCellCheckbox-desktop-euiTestCss"
         data-test-subj="test subject string"
       >
         <div
diff --git a/src/components/table/_index.scss b/src/components/table/_index.scss
index 843fd0b6d53..00863122993 100644
--- a/src/components/table/_index.scss
+++ b/src/components/table/_index.scss
@@ -1,5 +1,4 @@
 @import 'variables';
-@import 'mixins';
 
 @import 'table';
 @import 'responsive';
diff --git a/src/components/table/_mixins.scss b/src/components/table/_mixins.scss
deleted file mode 100644
index 6cd468bcf87..00000000000
--- a/src/components/table/_mixins.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@mixin euiTableCell {
-  vertical-align: middle;
-  border-top: $euiBorderThin;
-  border-bottom: $euiBorderThin;
-  font-weight: inherit;
-  text-align: left;
-}
-
-@mixin euiTableCellCheckbox {
-  @include euiTableCell;
-  width: $euiTableCellCheckboxWidth;
-  vertical-align: middle;
-}
diff --git a/src/components/table/_responsive.scss b/src/components/table/_responsive.scss
index cd48a2f61a9..2ebcdd8034f 100644
--- a/src/components/table/_responsive.scss
+++ b/src/components/table/_responsive.scss
@@ -3,57 +3,6 @@
 
 @include euiBreakpoint('xs', 's') {
   .euiTable.euiTable--responsive {
-    .euiTableRowCell__mobileHeader {
-      // Always truncate
-      @include euiTextTruncate;
-      @include fontSize($euiFontSize * .6875);
-
-      color: $euiColorDarkShade;
-      padding: $euiSizeS;
-      padding-bottom: 0;
-      margin-bottom: -$euiSizeS; // pull up cell content closer
-      min-height: $euiSizeL; // aligns contents of cells if header doesn't exist
-
-      // Remove min-height of cell header if it's the only cell
-      .euiTableRowCell:only-child & {
-        min-height: 0;
-      }
-    }
-
-    .euiTableRowCell--enlargeForMobile {
-      @include euiFontSizeM;
-    }
-
-    .euiTableRow {
-      // Custom actions
-      &:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child {
-        width: 100%;
-
-        &::before {
-          content: '';
-          position: absolute;
-          left: 0;
-          right: 0;
-          height: $euiBorderWidthThin;
-          background-color: $euiBorderColor;
-        }
-
-        .euiTableCellContent {
-          position: relative;
-          top: $euiSizeXS;
-        }
-      }
-    }
-
-    .euiTableRowCell {
-      min-width: 50%;
-      border: none;
-    }
-
-    .euiTableRowCellCheckbox {
-      border: none;
-    }
-
     // never show hidden items and always show hover items on mobile,
     .euiTableRow-hasActions .euiTableCellContent--showOnHover {
       > * {
diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
index 0eb5cedd510..1ca5707cd8b 100644
--- a/src/components/table/_table.scss
+++ b/src/components/table/_table.scss
@@ -1,84 +1,9 @@
-.euiTableFooterCell,
-.euiTableHeaderCell {
-  @include euiTableCell;
-  @include euiTitle('xxs');
-  font-weight: $euiFontWeightMedium;
-  border: none;
-
-  .euiTableHeaderButton {
-    text-align: left;
-    font-weight: $euiFontWeightMedium;
-  }
-
-  .euiTableCellContent__text {
-    @include euiFontSizeXS;
-    font-weight: $euiFontWeightSemiBold;
-  }
-}
-
-.euiTableHeaderButton {
-  @include euiFontSizeS;
-  color: inherit;
-  width: 100%;
-
-  &:hover,
-  &:focus {
-    .euiTableCellContent__text {
-      text-decoration: underline;
-      color: $euiColorPrimary;
-    }
-
-    .euiTableSortIcon {
-      fill: $euiColorPrimary;
-    }
-  }
-}
-
-.euiTableSortIcon {
-  margin-left: $euiSizeXS;
-  flex-shrink: 0; // makes sure the icon doesn't change size because the text is long
-
-  .euiTableHeaderButton-isSorted & {
-    fill: $euiTitleColor;
-  }
-}
-
-.euiTableHeaderCellCheckbox {
-  @include euiTableCellCheckbox;
-  border: none;
-}
-
 .euiTableRow-isExpandedRow {
   &.euiTableRow-isSelectable .euiTableCellContent {
     padding-left: $euiTableCellCheckboxWidth + $euiTableCellContentPadding;
   }
 }
 
-.euiTableRowCell {
-  @include euiTableCell;
-  color: $euiTextColor;
-
-  &--top {
-    vertical-align: top;
-  }
-
-  &--bottom {
-    vertical-align: bottom;
-  }
-
-  &--baseline {
-    vertical-align: baseline;
-  }
-}
-
-.euiTableRowCellCheckbox {
-  @include euiTableCellCheckbox;
-}
-
-.euiTableFooterCell {
-  background-color: $euiColorLightestShade;
-}
-
 /**
  * 1. Vertically align all children.
  * 4. Prevent very long single words (e.g. the name of a field in a document) from overflowing
@@ -106,6 +31,7 @@
   text-align: center;
 }
 
+// TODO: Address this in upcoming EuiTableCellContent PR
 .euiTableHeaderCell,
 .euiTableFooterCell,
 .euiTableCellContent--truncateText {
diff --git a/src/components/table/table.styles.ts b/src/components/table/table.styles.ts
index c993cceaad7..f4a34bc2502 100644
--- a/src/components/table/table.styles.ts
+++ b/src/components/table/table.styles.ts
@@ -34,10 +34,13 @@ export const euiTableVariables = ({ euiTheme }: UseEuiTheme) => {
     },
   };
 
+  const checkboxSize = euiTheme.size.xl;
+
   return {
     cellContentPadding,
     compressedCellContentPadding,
     mobileSizes,
+    checkboxSize,
   };
 };
 
diff --git a/src/components/table/table_cells_shared.styles.ts b/src/components/table/table_cells_shared.styles.ts
new file mode 100644
index 00000000000..181a8342f70
--- /dev/null
+++ b/src/components/table/table_cells_shared.styles.ts
@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../services';
+import { euiFontSize, logicalCSS } from '../../global_styling';
+
+import { euiTableVariables } from './table.styles';
+
+export const euiTableHeaderFooterCellStyles = (
+  euiThemeContext: UseEuiTheme
+) => {
+  const { euiTheme } = euiThemeContext;
+
+  // euiFontSize returns an object, so we keep object notation here to merge into css``
+  const sharedStyles = {
+    ...euiFontSize(euiThemeContext, 'xs'),
+    fontWeight: euiTheme.font.weight.semiBold,
+    color: euiTheme.colors.title,
+    verticalAlign: 'middle',
+  };
+
+  return {
+    euiTableHeaderCell: css`
+      ${sharedStyles}
+
+      .euiTableCellContent {
+        /* Spacing between text and sort icon */
+        gap: ${euiTheme.size.xs};
+      }
+    `,
+    euiTableHeaderCell__button: css`
+      ${logicalCSS('width', '100%')}
+      font-weight: inherit;
+
+      &:hover,
+      &:focus {
+        color: ${euiTheme.colors.primaryText};
+
+        .euiTableCellContent__text {
+          text-decoration: underline;
+        }
+      }
+    `,
+    euiTableFooterCell: css`
+      ${sharedStyles}
+      background-color: ${euiTheme.colors.lightestShade};
+    `,
+  };
+};
+
+export const euiTableCellCheckboxStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const { cellContentPadding, mobileSizes, checkboxSize } =
+    euiTableVariables(euiThemeContext);
+
+  const sharedCheckboxStyles = `
+    ${logicalCSS('width', checkboxSize)}
+    vertical-align: middle;
+  `;
+
+  return {
+    euiTableHeaderCellCheckbox: css`
+      ${sharedCheckboxStyles}
+    `,
+    euiTableRowCellCheckbox: css`
+      ${sharedCheckboxStyles}
+    `,
+    desktop: css`
+      ${logicalCSS('border-vertical', euiTheme.border.thin)}
+    `,
+    mobile: css`
+      position: absolute;
+      ${logicalCSS('top', cellContentPadding)}
+      ${logicalCSS('left', mobileSizes.checkbox.offset)}
+    `,
+  };
+};
diff --git a/src/components/table/table_footer_cell.tsx b/src/components/table/table_footer_cell.tsx
index 73adf6425cc..c7e28d9e688 100644
--- a/src/components/table/table_footer_cell.tsx
+++ b/src/components/table/table_footer_cell.tsx
@@ -7,17 +7,19 @@
  */
 
 import React, { FunctionComponent, TdHTMLAttributes } from 'react';
-import { CommonProps } from '../common';
 import classNames from 'classnames';
 
 import {
+  useEuiMemoizedStyles,
   HorizontalAlignment,
   LEFT_ALIGNMENT,
   RIGHT_ALIGNMENT,
   CENTER_ALIGNMENT,
 } from '../../services';
+import { CommonProps } from '../common';
 
 import { resolveWidthAsStyle } from './utils';
+import { euiTableHeaderFooterCellStyles } from './table_cells_shared.styles';
 
 export type EuiTableFooterCellProps = CommonProps &
   TdHTMLAttributes<HTMLTableCellElement> & {
@@ -38,10 +40,16 @@ export const EuiTableFooterCell: FunctionComponent<EuiTableFooterCellProps> = ({
     'euiTableCellContent--alignRight': align === RIGHT_ALIGNMENT,
     'euiTableCellContent--alignCenter': align === CENTER_ALIGNMENT,
   });
-  const styleObj = resolveWidthAsStyle(style, width);
+  const inlineStyles = resolveWidthAsStyle(style, width);
+  const styles = useEuiMemoizedStyles(euiTableHeaderFooterCellStyles);
 
   return (
-    <td className={classes} style={styleObj} {...rest}>
+    <td
+      css={styles.euiTableFooterCell}
+      className={classes}
+      style={inlineStyles}
+      {...rest}
+    >
       <div className={contentClasses}>
         <span className="euiTableCellContent__text">{children}</span>
       </div>
diff --git a/src/components/table/table_header_cell.tsx b/src/components/table/table_header_cell.tsx
index 67bb1bf9a7d..ace4d595fe6 100644
--- a/src/components/table/table_header_cell.tsx
+++ b/src/components/table/table_header_cell.tsx
@@ -13,19 +13,21 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { EuiScreenReaderOnly } from '../accessibility';
-import { CommonProps, NoArgCallback } from '../common';
-import { EuiIcon } from '../icon';
-import { resolveWidthAsStyle } from './utils';
-import { EuiInnerText } from '../inner_text';
-
 import {
+  useEuiMemoizedStyles,
   HorizontalAlignment,
   LEFT_ALIGNMENT,
   RIGHT_ALIGNMENT,
   CENTER_ALIGNMENT,
 } from '../../services';
 import { EuiI18n } from '../i18n';
+import { EuiScreenReaderOnly } from '../accessibility';
+import { CommonProps, NoArgCallback } from '../common';
+import { EuiIcon } from '../icon';
+import { EuiInnerText } from '../inner_text';
+
+import { resolveWidthAsStyle } from './utils';
+import { euiTableHeaderFooterCellStyles } from './table_cells_shared.styles';
 
 export type TableHeaderCellScope = 'col' | 'row' | 'colgroup' | 'rowgroup';
 
@@ -127,6 +129,8 @@ export const EuiTableHeaderCell: FunctionComponent<EuiTableHeaderCellProps> = ({
   description,
   ...rest
 }) => {
+  const styles = useEuiMemoizedStyles(euiTableHeaderFooterCellStyles);
+
   const classes = classNames('euiTableHeaderCell', className, {
     'euiTableHeaderCell--hideForDesktop': mobileOptions.only,
     'euiTableHeaderCell--hideForMobile': !mobileOptions.show,
@@ -137,7 +141,7 @@ export const EuiTableHeaderCell: FunctionComponent<EuiTableHeaderCellProps> = ({
     'euiTableCellContent--alignCenter': align === CENTER_ALIGNMENT,
   });
 
-  const styleObj = resolveWidthAsStyle(style, width);
+  const inlineStyles = resolveWidthAsStyle(style, width);
 
   const CellComponent = children ? 'th' : 'td';
   const cellScope = CellComponent === 'th' ? scope ?? 'col' : undefined; // `scope` is only valid on `th` elements
@@ -165,17 +169,19 @@ export const EuiTableHeaderCell: FunctionComponent<EuiTableHeaderCellProps> = ({
 
     return (
       <CellComponent
+        css={styles.euiTableHeaderCell}
         className={classes}
         scope={cellScope}
         role="columnheader"
         aria-sort={ariaSortValue}
         aria-live="polite"
-        style={styleObj}
+        style={inlineStyles}
         {...rest}
       >
         {onSort && !readOnly ? (
           <button
             type="button"
+            css={styles.euiTableHeaderCell__button}
             className={buttonClasses}
             onClick={onSort}
             data-test-subj="tableHeaderSortButton"
@@ -191,10 +197,11 @@ export const EuiTableHeaderCell: FunctionComponent<EuiTableHeaderCellProps> = ({
 
   return (
     <CellComponent
+      css={styles.euiTableHeaderCell}
       className={classes}
       scope={cellScope}
       role="columnheader"
-      style={styleObj}
+      style={inlineStyles}
       {...rest}
     >
       <CellContents
diff --git a/src/components/table/table_header_cell_checkbox.tsx b/src/components/table/table_header_cell_checkbox.tsx
index 21e5c015156..b43e957c32b 100644
--- a/src/components/table/table_header_cell_checkbox.tsx
+++ b/src/components/table/table_header_cell_checkbox.tsx
@@ -8,9 +8,12 @@
 
 import React, { FunctionComponent, ThHTMLAttributes } from 'react';
 import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps } from '../common';
 
 import { resolveWidthAsStyle } from './utils';
+import { euiTableCellCheckboxStyles } from './table_cells_shared.styles';
 
 export type EuiTableHeaderCellCheckboxScope =
   | 'col'
@@ -29,10 +32,17 @@ export const EuiTableHeaderCellCheckbox: FunctionComponent<
     EuiTableHeaderCellCheckboxProps
 > = ({ children, className, scope = 'col', style, width, ...rest }) => {
   const classes = classNames('euiTableHeaderCellCheckbox', className);
-  const styleObj = resolveWidthAsStyle(style, width);
+  const styles = useEuiMemoizedStyles(euiTableCellCheckboxStyles);
+  const inlineStyles = resolveWidthAsStyle(style, width);
 
   return (
-    <th className={classes} scope={scope} style={styleObj} {...rest}>
+    <th
+      css={styles.euiTableHeaderCellCheckbox}
+      className={classes}
+      scope={scope}
+      style={inlineStyles}
+      {...rest}
+    >
       <div className="euiTableCellContent">{children}</div>
     </th>
   );
diff --git a/src/components/table/table_row.styles.ts b/src/components/table/table_row.styles.ts
index 5d2f4229fa7..e93dae2c919 100644
--- a/src/components/table/table_row.styles.ts
+++ b/src/components/table/table_row.styles.ts
@@ -80,16 +80,10 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
       `,
       /**
        * Left column offset (no border)
-       * Used for selection checkbox
+       * Used for selection checkbox, which will be absolutely positioned
        */
       selectable: css`
         ${logicalCSS('padding-left', mobileSizes.checkbox.width)}
-
-        .euiTableRowCellCheckbox {
-          position: absolute;
-          ${logicalCSS('top', cellContentPadding)}
-          ${logicalCSS('left', mobileSizes.checkbox.offset)}
-        }
       `,
       /**
        * Right column styles + border
@@ -107,37 +101,6 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
           background-color: ${euiTheme.border.color};
         }
       `,
-      rightColumnContent: `
-        position: absolute;
-        ${logicalCSS('right', 0)}
-        /* TODO: remove !important once euiTableRowCell is converted to Emotion */
-        ${logicalCSS('min-width', '0 !important')}
-        ${logicalCSS('width', mobileSizes.actions.width)}
-
-        .euiTableCellContent {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          gap: ${euiTheme.size.s};
-          padding: 0;
-        }
-      `,
-      get actions() {
-        return css`
-          .euiTableRowCell--hasActions {
-            ${this.rightColumnContent}
-            ${logicalCSS('top', mobileSizes.actions.offset)}
-          }
-        `;
-      },
-      get expandable() {
-        return css`
-          .euiTableRowCell--isExpander {
-            ${this.rightColumnContent}
-            ${logicalCSS('bottom', mobileSizes.actions.offset)}
-          }
-        `;
-      },
       /**
        * Bottom of card - expanded rows
        */
diff --git a/src/components/table/table_row.tsx b/src/components/table/table_row.tsx
index 2dc42435146..5c933429429 100644
--- a/src/components/table/table_row.tsx
+++ b/src/components/table/table_row.tsx
@@ -70,8 +70,6 @@ export const EuiTableRow: FunctionComponent<Props> = ({
         styles.mobile.mobile,
         isSelected && styles.mobile.selected,
         isSelectable && styles.mobile.selectable,
-        hasActions && styles.mobile.actions,
-        isExpandable && styles.mobile.expandable,
         isExpandedRow && styles.mobile.expanded,
         (hasActions || isExpandable || isExpandedRow) &&
           styles.mobile.hasRightColumn,
diff --git a/src/components/table/table_row_cell.styles.ts b/src/components/table/table_row_cell.styles.ts
new file mode 100644
index 00000000000..8a2b3931c04
--- /dev/null
+++ b/src/components/table/table_row_cell.styles.ts
@@ -0,0 +1,124 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../services';
+import { euiFontSize, euiTextTruncate, logicalCSS } from '../../global_styling';
+
+import { euiTableVariables } from './table.styles';
+
+export const euiTableRowCellStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  const { mobileSizes } = euiTableVariables(euiThemeContext);
+
+  return {
+    euiTableRowCell: css`
+      color: ${euiTheme.colors.text};
+    `,
+
+    // valign
+    middle: css`
+      vertical-align: middle;
+    `,
+    baseline: css`
+      vertical-align: baseline;
+    `,
+    top: css`
+      vertical-align: top;
+    `,
+    bottom: css`
+      vertical-align: bottom;
+    `,
+
+    desktop: css`
+      ${logicalCSS('border-vertical', euiTheme.border.thin)}
+    `,
+
+    mobile: {
+      mobile: css`
+        ${logicalCSS('min-width', '50%')}
+      `,
+      enlarge: css`
+        ${euiFontSize(euiThemeContext, 'm')}
+      `,
+      rightColumnContent: `
+        position: absolute;
+        ${logicalCSS('right', 0)}
+        ${logicalCSS('min-width', '0')}
+        ${logicalCSS('width', mobileSizes.actions.width)}
+
+        /* TODO: Move this to EuiTableCellContent, once we're further along in the Emotion conversion */
+        .euiTableCellContent {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: ${euiTheme.size.s};
+          padding: 0;
+        }
+      `,
+      get actions() {
+        return css`
+          ${this.rightColumnContent}
+          ${logicalCSS('top', mobileSizes.actions.offset)}
+        `;
+      },
+      get expander() {
+        return css`
+          ${this.rightColumnContent}
+          ${logicalCSS('bottom', mobileSizes.actions.offset)}
+        `;
+      },
+      /**
+       * Custom actions may not be icons and therefore may not fit in a column
+       * If they're the last cell, we can create a pseudo "row"/"border-top"
+       * that mimicks the visual separation that the right column has
+       */
+      customActions: css`
+        &:last-child {
+          ${logicalCSS('width', '100%')}
+
+          &::before {
+            content: '';
+            position: absolute;
+            ${logicalCSS('horizontal', 0)}
+            ${logicalCSS('height', euiTheme.border.width.thin)}
+            background-color: ${euiTheme.border.color};
+          }
+
+          /* Minor vertical alignment of cell content */
+          .euiTableCellContent {
+            position: relative;
+            ${logicalCSS('top', euiTheme.size.xs)}
+          }
+        }
+      `,
+    },
+
+    euiTableRowCell__mobileHeader: css`
+      /* Always truncate */
+      ${euiTextTruncate()}
+      font-size: ${euiFontSize(euiThemeContext, 's', {
+        customScale: 'xxs',
+      }).fontSize};
+
+      display: block;
+      color: ${euiTheme.colors.darkShade};
+      padding: ${euiTheme.size.s};
+      /* Pull up cell content closer */
+      padding-block-end: 0;
+      margin-block-end: -${euiTheme.size.s};
+
+      /* Aligns contents of cells if header is empty */
+      .euiTableRowCell:not(:only-child) & {
+        ${logicalCSS('min-height', euiTheme.size.l)}
+      }
+    `,
+  };
+};
diff --git a/src/components/table/table_row_cell.tsx b/src/components/table/table_row_cell.tsx
index 16b3987f57b..3586f6b9172 100644
--- a/src/components/table/table_row_cell.tsx
+++ b/src/components/table/table_row_cell.tsx
@@ -18,6 +18,7 @@ import classNames from 'classnames';
 
 import { CommonProps } from '../common';
 import {
+  useEuiMemoizedStyles,
   HorizontalAlignment,
   LEFT_ALIGNMENT,
   RIGHT_ALIGNMENT,
@@ -28,6 +29,7 @@ import { EuiTextBlockTruncate } from '../text_truncate';
 
 import { useEuiTableIsResponsive } from './mobile/responsive_context';
 import { resolveWidthAsStyle } from './utils';
+import { euiTableRowCellStyles } from './table_row_cell.styles';
 
 interface EuiTableRowCellSharedPropsShape {
   /**
@@ -96,7 +98,7 @@ export interface EuiTableRowCellProps extends EuiTableRowCellSharedPropsShape {
    * Indicates if the column is dedicated to icon-only actions (currently
    * affects mobile only)
    */
-  hasActions?: boolean;
+  hasActions?: boolean | 'custom';
   /**
    * Indicates if the column is dedicated as the expandable row toggle
    */
@@ -132,16 +134,28 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
   ...rest
 }) => {
   const isResponsive = useEuiTableIsResponsive();
+  const styles = useEuiMemoizedStyles(euiTableRowCellStyles);
+  const cssStyles = [
+    styles.euiTableRowCell,
+    styles[valign],
+    ...(isResponsive
+      ? [
+          styles.mobile.mobile,
+          mobileOptions.enlarge && styles.mobile.enlarge,
+          hasActions === 'custom' && styles.mobile.customActions,
+          hasActions === true && styles.mobile.actions,
+          isExpander && styles.mobile.expander,
+        ]
+      : [styles.desktop]),
+  ];
 
-  const cellClasses = classNames('euiTableRowCell', {
+  const cellClasses = classNames('euiTableRowCell', className, {
     'euiTableRowCell--hasActions': hasActions,
     'euiTableRowCell--isExpander': isExpander,
     'euiTableRowCell--hideForDesktop': mobileOptions.only,
-    'euiTableRowCell--enlargeForMobile': mobileOptions.enlarge,
-    [`euiTableRowCell--${valign}`]: valign,
   });
 
-  const contentClasses = classNames('euiTableCellContent', className, {
+  const contentClasses = classNames('euiTableCellContent', {
     'euiTableCellContent--alignRight': align === RIGHT_ALIGNMENT,
     'euiTableCellContent--alignCenter': align === CENTER_ALIGNMENT,
     'euiTableCellContent--showOnHover': showOnHover,
@@ -151,7 +165,7 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
     'euiTableCellContent--overflowingContent': textOnly !== true,
   });
 
-  const mobileContentClasses = classNames('euiTableCellContent', className, {
+  const mobileContentClasses = classNames('euiTableCellContent', {
     'euiTableCellContent--alignRight':
       mobileOptions.align === RIGHT_ALIGNMENT || align === RIGHT_ALIGNMENT,
     'euiTableCellContent--alignCenter':
@@ -217,6 +231,7 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
   const sharedProps = {
     scope: setScopeRow ? 'row' : undefined,
     style: styleObj,
+    css: cssStyles,
     ...rest,
   };
   if (mobileOptions.show === false) {
@@ -234,6 +249,7 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
         {/* Mobile-only header */}
         {mobileOptions.header && (
           <div
+            css={styles.euiTableRowCell__mobileHeader}
             className={`euiTableRowCell__mobileHeader ${showForMobileClasses}`}
           >
             {mobileOptions.header}
diff --git a/src/components/table/table_row_cell_checkbox.tsx b/src/components/table/table_row_cell_checkbox.tsx
index 36e01dc9817..e4f80a5ddde 100644
--- a/src/components/table/table_row_cell_checkbox.tsx
+++ b/src/components/table/table_row_cell_checkbox.tsx
@@ -8,15 +8,28 @@
 
 import React, { FunctionComponent, TdHTMLAttributes } from 'react';
 import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps } from '../common';
 
+import { useEuiTableIsResponsive } from './mobile/responsive_context';
+import { euiTableCellCheckboxStyles } from './table_cells_shared.styles';
+
 export const EuiTableRowCellCheckbox: FunctionComponent<
   CommonProps & TdHTMLAttributes<HTMLTableCellElement>
 > = ({ children, className, ...rest }) => {
+  const isResponsive = useEuiTableIsResponsive();
+
+  const styles = useEuiMemoizedStyles(euiTableCellCheckboxStyles);
+  const cssStyles = [
+    styles.euiTableRowCellCheckbox,
+    isResponsive ? styles.mobile : styles.desktop,
+  ];
+
   const classes = classNames('euiTableRowCellCheckbox', className);
 
   return (
-    <td className={classes} {...rest}>
+    <td css={cssStyles} className={classes} {...rest}>
       <div className="euiTableCellContent">{children}</div>
     </td>
   );