[APM] fixes #24563 by de-duping the column field id 'sample' (#24690) (#24876)

* [APM] fixes #24563 by replacing de-duping the twice-used column field id

* [APM] fixed issue with service column not sorting in ManagedTable

* [APM] make render field on ITableColumn optional and allowing it to use EUI's default value

x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx

@@ -6,7 +6,6 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { Transaction } from '../../../../typings/Transaction';
 import { ITransactionGroup } from '../../../../typings/TransactionGroup';
 import { fontSizes, truncate } from '../../../style/variables';
 // @ts-ignore
@@ -30,23 +29,22 @@ interface Props {
 
 const traceListColumns: ITableColumn[] = [
   {
-    field: 'sample',
+    field: 'name',
     name: 'Name',
     width: '40%',
     sortable: true,
-    render: (transaction: Transaction) => (
-      <TooltipOverlay content={transaction.transaction.name}>
-        <StyledTransactionLink transaction={transaction}>
-          {transaction.transaction.name}
+    render: (name, group: ITransactionGroup) => (
+      <TooltipOverlay content={name}>
+        <StyledTransactionLink transaction={group.sample}>
+          {name}
         </StyledTransactionLink>
       </TooltipOverlay>
     )
   },
   {
-    field: 'sample',
+    field: 'sample.context.service.name',
     name: 'Originating service',
-    sortable: true,
-    render: (transaction: Transaction) => transaction.context.service.name
+    sortable: true
   },
   {
     field: 'averageResponseTime',

x-pack/plugins/apm/public/components/shared/ManagedTable/index.tsx

@@ -18,7 +18,7 @@ export interface ITableColumn {
   align?: string;
   width?: string;
   sortable?: boolean;
-  render: (value: any, item?: any) => any;
+  render?: (value: any, item?: any) => any;
 }
 
 export interface IManagedTableProps {