TablePanel: Add solid background cell display mode (#32446)

* Add solid color background cell display mode

* Update docs/sources/panels/visualizations/table/table-field-options.md

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

* Update docs/sources/panels/visualizations/table/table-field-options.md

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

docs/sources/panels/visualizations/table/table-field-options.md

@@ -42,9 +42,9 @@ If thresholds are set, then the field text is displayed in the appropriate thres
 
 {{< docs-imagebox img="/img/docs/tables/color-text.png" max-width="500px" caption="Color text" class="docs-image--no-shadow" >}}
 
-### Color background
+### Color background (gradient or solid)
 
-If thresholds are set, then the field background is displayed in the appropriate threshold color.
+If thresholds are set, then the field background is displayed in the appropriate threshold color. 
 
 {{< docs-imagebox img="/img/docs/tables/color-background.png" max-width="500px" caption="Color background" class="docs-image--no-shadow" >}}
 

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

@@ -35,6 +35,12 @@ function getCellStyle(tableStyles: TableStyles, field: Field, displayValue: Disp
     return tableStyles.buildCellContainerStyle(displayValue.color);
   }
 
+  if (field.config.custom?.displayMode === TableCellDisplayMode.ColorBackgroundSolid) {
+    const bgColor = tinycolor(displayValue.color);
+    const textColor = getTextColorForBackground(displayValue.color!);
+    return tableStyles.buildCellContainerStyle(textColor, bgColor.toRgbString());
+  }
+
   if (field.config.custom?.displayMode === TableCellDisplayMode.ColorBackground) {
     const themeFactor = tableStyles.theme.isDark ? 1 : -0.7;
     const bgColor2 = tinycolor(displayValue.color)

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

@@ -14,6 +14,7 @@ export enum TableCellDisplayMode {
   Auto = 'auto',
   ColorText = 'color-text',
   ColorBackground = 'color-background',
+  ColorBackgroundSolid = 'color-background-solid',
   GradientGauge = 'gradient-gauge',
   LcdGauge = 'lcd-gauge',
   JSONView = 'json-view',

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

@@ -42,7 +42,8 @@ export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel)
             options: [
               { value: TableCellDisplayMode.Auto, label: 'Auto' },
               { value: TableCellDisplayMode.ColorText, label: 'Color text' },
-              { value: TableCellDisplayMode.ColorBackground, label: 'Color background' },
+              { value: TableCellDisplayMode.ColorBackground, label: 'Color background (gradient)' },
+              { value: TableCellDisplayMode.ColorBackgroundSolid, label: 'Color background (solid)' },
               { value: TableCellDisplayMode.GradientGauge, label: 'Gradient gauge' },
               { value: TableCellDisplayMode.LcdGauge, label: 'LCD gauge' },
               { value: TableCellDisplayMode.BasicGauge, label: 'Basic gauge' },