Table: Use the configured field formatter if it exists (#20584)

This PR lets the alpha Table component use a Fields configured 
formatter rather than the super hacky ColumnStyle.

packages/grafana-ui/src/components/Table/Table.tsx

@@ -25,7 +25,7 @@ import {
 import {
   TableCellBuilder,
   ColumnStyle,
-  getCellBuilder,
+  getFieldCellBuilder,
   TableCellBuilderOptions,
   simpleCellBuilder,
 } from './TableCellBuilder';
@@ -153,7 +153,7 @@ export class Table extends Component<Props, State> {
       return {
         header: title,
         width: columnWidth,
-        builder: getCellBuilder(col.config || {}, style, this.props),
+        builder: getFieldCellBuilder(col, style, this.props),
       };
     });
   }

packages/grafana-ui/src/components/Table/TableCellBuilder.tsx

@@ -291,3 +291,33 @@ class CellBuilderWithStyle {
     return simpleCellBuilder({ value, props, className });
   };
 }
+
+export function getFieldCellBuilder(field: Field, style: ColumnStyle | null, p: Props): TableCellBuilder {
+  if (!field.display) {
+    return getCellBuilder(field.config || {}, style, p);
+  }
+
+  return (cell: TableCellBuilderOptions) => {
+    const { props } = cell;
+    const disp = field.display!(cell.value);
+
+    let style = props.style;
+    if (disp.color) {
+      style = {
+        ...props.style,
+        background: disp.color,
+      };
+    }
+
+    let clazz = 'gf-table-cell';
+    if (cell.className) {
+      clazz += ' ' + cell.className;
+    }
+
+    return (
+      <div style={style} className={clazz} title={disp.title}>
+        {disp.text}
+      </div>
+    );
+  };
+}