From 18b8a793a8e4291dd1f346e9dde05ab09eafb04f Mon Sep 17 00:00:00 2001
From: Ihor Yeromin <yeryomin.igor@gmail.com>
Date: Tue, 25 Mar 2025 20:53:04 +0200
Subject: [PATCH] TableNG: Add row colors (#102706)

* chore(table-ng): add row colors

* clean up

* fix params

* fix(table-ng): cell color background indexing
---
 .../Table/TableNG/Cells/TableCellNG.tsx       |  8 +++++-
 .../src/components/Table/TableNG/TableNG.tsx  | 27 +++++++++++++++++--
 .../src/components/Table/TableNG/types.ts     |  1 +
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx
index a3f2f550db2..3b95dd91599 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx
+++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx
@@ -33,6 +33,7 @@ export function TableCellNG(props: TableCellNGProps) {
     setContextMenuProps,
     cellInspect,
     getActions,
+    rowBg,
   } = props;
 
   const { config: fieldConfig } = field;
@@ -42,7 +43,12 @@ export function TableCellNG(props: TableCellNGProps) {
 
   const isRightAligned = getTextAlign(field) === 'flex-end';
   const displayValue = field.display!(value);
-  const colors = useMemo(() => getCellColors(theme, cellOptions, displayValue), [theme, cellOptions, displayValue]);
+  let colors: CellColors = { bgColor: '', textColor: '', bgHoverColor: '' };
+  if (rowBg) {
+    colors = rowBg(rowIdx);
+  } else {
+    colors = useMemo(() => getCellColors(theme, cellOptions, displayValue), [theme, cellOptions, displayValue]);
+  }
   const styles = useStyles2(getStyles, isRightAligned, colors);
 
   // TODO
diff --git a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
index a8beca3757a..29b25853bcd 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
+++ b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
@@ -40,9 +40,11 @@ import {
   TableColumn,
   TableFieldOptionsType,
   ScrollPosition,
+  CellColors,
 } from './types';
 import {
   frameToRecords,
+  getCellColors,
   getComparator,
   getDefaultRowHeight,
   getFooterItemNG,
@@ -363,7 +365,8 @@ export function TableNG(props: TableNGProps) {
           headerCellRefs,
           isCountRowsSet,
           osContext,
-          rows,
+          // INFO: sortedRows is for correct row indexing for cell background coloring
+          rows: sortedRows,
           setContextMenuProps,
           setFilter,
           setIsInspecting,
@@ -382,7 +385,7 @@ export function TableNG(props: TableNGProps) {
         // Adjust table width to account for the scroll bar width
         availableWidth: width - (hasScroll ? TABLE.SCROLL_BAR_WIDTH + TABLE.SCROLL_BAR_MARGIN : 0),
       }),
-    [props.data, calcsRef, filter, expandedRows, expandedRows.length, footerOptions, width, hasScroll] // eslint-disable-line react-hooks/exhaustive-deps
+    [props.data, calcsRef, filter, expandedRows, expandedRows.length, footerOptions, width, hasScroll, sortedRows] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   // This effect needed to set header cells refs before row height calculation
@@ -647,6 +650,25 @@ export function mapFrameToDataGrid({
     availableWidth -= COLUMN.EXPANDER_WIDTH;
   }
 
+  // Row background color function
+  let rowBg: Function | undefined = undefined;
+  for (const field of frame.fields) {
+    const fieldOptions = field.config.custom;
+    const cellOptionsExist = fieldOptions !== undefined && fieldOptions.cellOptions !== undefined;
+
+    if (
+      cellOptionsExist &&
+      fieldOptions.cellOptions.type === TableCellDisplayMode.ColorBackground &&
+      fieldOptions.cellOptions.applyToRow
+    ) {
+      rowBg = (rowIndex: number): CellColors => {
+        const display = field.display!(field.values.get(rows[rowIndex].__index));
+        const colors = getCellColors(theme, fieldOptions.cellOptions, display);
+        return colors;
+      };
+    }
+  }
+
   let fieldCountWithoutWidth = 0;
   frame.fields.map((field, fieldIndex) => {
     if (field.type === FieldType.nestedFrames) {
@@ -706,6 +728,7 @@ export function mapFrameToDataGrid({
             setContextMenuProps={setContextMenuProps}
             cellInspect={cellInspect}
             getActions={getActions}
+            rowBg={rowBg}
           />
         );
       },
diff --git a/packages/grafana-ui/src/components/Table/TableNG/types.ts b/packages/grafana-ui/src/components/Table/TableNG/types.ts
index bf01c1bfb82..7bdc40fce38 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/types.ts
+++ b/packages/grafana-ui/src/components/Table/TableNG/types.ts
@@ -147,6 +147,7 @@ export interface TableCellNGProps {
   theme: GrafanaTheme2;
   timeRange: TimeRange;
   value: TableCellValue;
+  rowBg: Function | undefined;
 }
 
 /* ------------------------- Specialized Cell Props ------------------------- */