ReactTable: adds color text to field options (#23427)

* Feature: adds text color field config

* Refactor: created an extension point

* Refactor: uses HOC for extension instead

* Fix: fixes background styling from affecting cells without display.color

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

-import React, { CSSProperties, FC } from 'react';
-import { TableCellProps } from './types';
-import tinycolor from 'tinycolor2';
-import { formattedValueToString } from '@grafana/data';
-
-export const BackgroundColoredCell: FC<TableCellProps> = props => {
-  const { cell, tableStyles, field } = props;
-
-  if (!field.display) {
-    return null;
-  }
-
-  const themeFactor = tableStyles.theme.isDark ? 1 : -0.7;
-  const displayValue = field.display(cell.value);
-
-  const bgColor2 = tinycolor(displayValue.color)
-    .darken(10 * themeFactor)
-    .spin(5)
-    .toRgbString();
-
-  const styles: CSSProperties = {
-    background: `linear-gradient(120deg, ${bgColor2}, ${displayValue.color})`,
-    color: 'white',
-    height: tableStyles.cellHeight,
-    padding: tableStyles.cellPadding,
-  };
-
-  return (
-    <div className={tableStyles.tableCell} style={styles}>
-      {formattedValueToString(displayValue)}
-    </div>
-  );
-};

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

@@ -26,9 +26,8 @@ export const TableCell: FC<Props> = ({ cell, field, tableStyles, onCellClick })
     onClick = () => onCellClick(cell.column.Header as string, cell.value);
   }
 
-  const fieldTextAlign = getTextAlign(field);
-  if (fieldTextAlign && cellProps.style) {
-    cellProps.style.textAlign = fieldTextAlign;
+  if (cellProps.style) {
+    cellProps.style.textAlign = getTextAlign(field);
   }
 
   return (

packages/grafana-ui/src/components/Table/types.ts

 import { CellProps } from 'react-table';
 import { Field } from '@grafana/data';
 import { TableStyles } from './styles';
+import { FC } from 'react';
 
 export interface TableFieldOptions {
   width: number;
@@ -29,3 +30,5 @@ export interface TableCellProps extends CellProps<any> {
   tableStyles: TableStyles;
   field: Field;
 }
+
+export type CellComponent = FC<TableCellProps>;

packages/grafana-ui/src/components/Table/utils.ts

@@ -3,8 +3,10 @@ import { DataFrame, Field, FieldType } from '@grafana/data';
 import { Column } from 'react-table';
 import { DefaultCell } from './DefaultCell';
 import { BarGaugeCell } from './BarGaugeCell';
-import { BackgroundColoredCell } from './BackgroundColorCell';
-import { TableCellDisplayMode, TableFieldOptions, TableRow } from './types';
+import { TableCellDisplayMode, TableCellProps, TableFieldOptions, TableRow } from './types';
+import { css, cx } from 'emotion';
+import { withTableStyles } from './withTableStyles';
+import tinycolor from 'tinycolor2';
 
 export function getTableRows(data: DataFrame): TableRow[] {
   const tableData = [];
@@ -81,8 +83,10 @@ export function getColumns(data: DataFrame, availableWidth: number, columnMinWid
 
 function getCellComponent(displayMode: TableCellDisplayMode) {
   switch (displayMode) {
+    case TableCellDisplayMode.ColorText:
+      return withTableStyles(DefaultCell, getTextColorStyle);
     case TableCellDisplayMode.ColorBackground:
-      return BackgroundColoredCell;
+      return withTableStyles(DefaultCell, getBackgroundColorStyle);
     case TableCellDisplayMode.LcdGauge:
     case TableCellDisplayMode.GradientGauge:
       return BarGaugeCell;
@@ -90,3 +94,55 @@ function getCellComponent(displayMode: TableCellDisplayMode) {
       return DefaultCell;
   }
 }
+
+function getTextColorStyle(props: TableCellProps) {
+  const { field, cell, tableStyles } = props;
+
+  if (!field.display) {
+    return tableStyles;
+  }
+
+  const displayValue = field.display(cell.value);
+  if (!displayValue.color) {
+    return tableStyles;
+  }
+
+  const extendedStyle = css`
+    color: ${displayValue.color};
+  `;
+
+  return {
+    ...tableStyles,
+    tableCell: cx(tableStyles.tableCell, extendedStyle),
+  };
+}
+
+function getBackgroundColorStyle(props: TableCellProps) {
+  const { field, cell, tableStyles } = props;
+  if (!field.display) {
+    return tableStyles;
+  }
+
+  const displayValue = field.display(cell.value);
+  if (!displayValue.color) {
+    return tableStyles;
+  }
+
+  const themeFactor = tableStyles.theme.isDark ? 1 : -0.7;
+  const bgColor2 = tinycolor(displayValue.color)
+    .darken(10 * themeFactor)
+    .spin(5)
+    .toRgbString();
+
+  const extendedStyle = css`
+    background: linear-gradient(120deg, ${bgColor2}, ${displayValue.color});
+    color: white;
+    height: ${tableStyles.cellHeight}px;
+    padding: ${tableStyles.cellPadding}px;
+  `;
+
+  return {
+    ...tableStyles,
+    tableCell: cx(tableStyles.tableCell, extendedStyle),
+  };
+}

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

+import { CellComponent, TableCellProps } from './types';
+import { TableStyles } from './styles';
+
+export const withTableStyles = (
+  CellComponent: CellComponent,
+  getExtendedStyles: (props: TableCellProps) => TableStyles
+): CellComponent => {
+  function WithTableStyles(props: TableCellProps) {
+    return CellComponent({ ...props, tableStyles: getExtendedStyles(props) });
+  }
+
+  WithTableStyles.displayName = CellComponent.displayName || CellComponent.name;
+  return WithTableStyles;
+};

public/app/plugins/panel/table2/module.tsx

@@ -33,10 +33,11 @@ export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel)
         .addSelect({
           path: 'displayMode',
           name: 'Cell display mode',
-          description: 'Color value, background, show as gauge, etc',
+          description: 'Color text, background, show as gauge, etc',
           settings: {
             options: [
               { value: 'auto', label: 'Auto' },
+              { value: 'color-text', label: 'Color text' },
               { value: 'color-background', label: 'Color background' },
               { value: 'gradient-gauge', label: 'Gradient gauge' },
               { value: 'lcd-gauge', label: 'LCD gauge' },