Remove direct references to table classNames

- they no longer have styles attached to them and thus no longer do anything

- replace with direct component usage instead (or in some cases remove if they're not doing anything)

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/dashboard_sections/benchmarks_section.tsx

@@ -133,7 +133,7 @@ export const BenchmarksSection = ({
                   id="xpack.csp.dashboard.benchmarkSection.columnsHeader.complianceScoreTitle"
                   defaultMessage="Compliance Score"
                 />
-                <EuiIcon className="euiTableSortIcon" type={benchmarkSortingIcon} />
+                <EuiIcon type={benchmarkSortingIcon} />
               </div>
             </EuiTitle>
           </button>

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/markdown_renderers.tsx

@@ -56,9 +56,7 @@ export const markdownRenderers = (
   refs: MutableRefObject<Map<string, HTMLDivElement | null>>
 ): TransformOptions['components'] => {
   return {
-    table: ({ children }) => (
-      <EuiTable className="euiEuiTable euiTable--responsive">{children}</EuiTable>
-    ),
+    table: ({ children }) => <EuiTable>{children}</EuiTable>,
     tr: ({ children }) => <EuiTableRow>{children}</EuiTableRow>,
     th: ({ children }) => <EuiTableHeaderCell>{children}</EuiTableHeaderCell>,
     td: ({ children }) => <EuiTableRowCell>{children}</EuiTableRowCell>,

x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js

@@ -374,24 +374,11 @@ export class IndexTable extends Component {
     return columnConfigs.map((columnConfig) => {
       const { name } = index;
       const { fieldName } = columnConfig;
-      if (fieldName === 'name') {
-        return (
-          <th
-            key={`${fieldName}-${name}`}
-            className="euiTableRowCell"
-            scope="row"
-            data-test-subj={`indexTableCell-${fieldName}`}
-          >
-            <div className={`euiTableCellContent indTable__cell--${fieldName}`}>
-              <span className="eui-textLeft">{this.buildRowCell(index, columnConfig)}</span>
-            </div>
-          </th>
-        );
-      }
       return (
         <EuiTableRowCell
           key={`${fieldName}-${name}`}
           truncateText={false}
+          setScopeRow={fieldName === 'name'}
           data-test-subj={`indexTableCell-${fieldName}`}
           className={'indTable__cell--' + fieldName}
           header={fieldName}

x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js

@@ -304,13 +304,10 @@ export class JobsList extends Component {
         field: 'latestTimestampSortValue',
         'data-test-subj': 'mlJobListColumnLatestTimestamp',
         sortable: true,
-        render: (time, item) => (
-          <span className="euiTableCellContent__text">
-            {item.latestTimestampMs === undefined
-              ? ''
-              : moment(item.latestTimestampMs).format(TIME_FORMAT)}
-          </span>
-        ),
+        render: (time, item) =>
+          item.latestTimestampMs === undefined
+            ? ''
+            : moment(item.latestTimestampMs).format(TIME_FORMAT),
         textOnly: true,
         width: '15%',
       },

x-pack/plugins/observability_solution/observability_ai_assistant/public/components/message_panel/message_text.tsx

@@ -5,6 +5,10 @@
  * 2.0.
  */
 import {
+  EuiTable,
+  EuiTableRow,
+  EuiTableRowCell,
+  EuiTableHeaderCell,
   EuiMarkdownFormat,
   EuiSpacer,
   EuiText,
@@ -141,36 +145,21 @@ export function MessageText({ loading, content, onActionClick }: Props) {
       },
       table: (props) => (
         <>
-          <div className="euiBasicTable">
-            {' '}
-            <table className="euiTable" {...props} />
-          </div>
+          <EuiTable {...props} />
           <EuiSpacer size="m" />
         </>
       ),
       th: (props) => {
         const { children, ...rest } = props;
-        return (
-          <th className="euiTableHeaderCell" {...rest}>
-            <span className="euiTableCellContent">
-              <span className="euiTableCellContent__text" title={children}>
-                {children}
-              </span>
-            </span>
-          </th>
-        );
+        return <EuiTableHeaderCell {...rest}>{children}</EuiTableHeaderCell>;
       },
-      tr: (props) => <tr className="euiTableRow" {...props} />,
+      tr: (props) => <EuiTableRow {...props} />,
       td: (props) => {
         const { children, ...rest } = props;
         return (
-          <td className="euiTableRowCell" {...rest}>
-            <div className="euiTableCellContent euiTableCellContent--truncateText">
-              <span className="euiTableCellContent__text" title={children}>
-                {children}
-              </span>
-            </div>
-          </td>
+          <EuiTableRowCell truncateText={true} {...rest}>
+            {children}
+          </EuiTableRowCell>
         );
       },
     };

x-pack/plugins/security_solution/public/assistant/get_comments/stream/message_text.tsx

@@ -5,6 +5,10 @@
  * 2.0.
  */
 import {
+  EuiTable,
+  EuiTableRow,
+  EuiTableRowCell,
+  EuiTableHeaderCell,
   EuiMarkdownFormat,
   EuiSpacer,
   EuiText,
@@ -114,36 +118,21 @@ const getPluginDependencies = () => {
     },
     table: (props) => (
       <>
-        <div className="euiBasicTable">
-          {' '}
-          <table className="euiTable" {...props} />
-        </div>
+        <EuiTable {...props} />
         <EuiSpacer size="m" />
       </>
     ),
     th: (props) => {
       const { children, ...rest } = props;
-      return (
-        <th className="euiTableHeaderCell" {...rest}>
-          <span className="euiTableCellContent">
-            <span className="euiTableCellContent__text" title={children}>
-              {children}
-            </span>
-          </span>
-        </th>
-      );
+      return <EuiTableHeaderCell {...rest}>{children}</EuiTableHeaderCell>;
     },
-    tr: (props) => <tr className="euiTableRow" {...props} />,
+    tr: (props) => <EuiTableRow {...props} />,
     td: (props) => {
       const { children, ...rest } = props;
       return (
-        <td className="euiTableRowCell" {...rest}>
-          <div className="euiTableCellContent euiTableCellContent--truncateText">
-            <span className="euiTableCellContent__text" title={children}>
-              {children}
-            </span>
-          </div>
-        </td>
+        <EuiTableRowCell truncateText={true} {...rest}>
+          {children}
+        </EuiTableRowCell>
       );
     },
   };