From 2e4020a93ba94236fab6352245e2616df3fc70b3 Mon Sep 17 00:00:00 2001
From: Alex Spencer <52186778+alexjonspencer1@users.noreply.github.com>
Date: Mon, 5 May 2025 09:03:18 -0600
Subject: [PATCH] [release 12.0.1] TableNG: Use correct row index for
 background colour calculation (#104426) (#104888)

TableNG: Use correct row index for background colour calculation (#104426)

* chore: row index is source index so just use that

* chore: fix better cause why not

---------

Co-authored-by: Adela Almasan <adela.almasan@grafana.com>
Co-authored-by: Sven Grossmann <svennergr@gmail.com>
---
 .betterer.results                             |  5 ----
 .../src/components/Table/TableNG/TableNG.tsx  | 23 ++++++++-----------
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 04085bf52f5..d6abf539128 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -652,11 +652,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"]
-    ],
     "packages/grafana-ui/src/components/Table/TableNG/utils.test.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
diff --git a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
index aa80a9b291e..38c3904a034 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
+++ b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
@@ -196,16 +196,16 @@ export function TableNG(props: TableNGProps) {
 
   // Create a map of column key to column type
   const columnTypes = useMemo(
-    () => props.data.fields.reduce((acc, { name, type }) => ({ ...acc, [name]: type }), {} as ColumnTypes),
+    () => props.data.fields.reduce<ColumnTypes>((acc, { name, type }) => ({ ...acc, [name]: type }), {}),
     [props.data.fields]
   );
 
   // Create a map of column key to text wrap
   const textWraps = useMemo(
     () =>
-      props.data.fields.reduce(
+      props.data.fields.reduce<{ [key: string]: boolean }>(
         (acc, { name, config }) => ({ ...acc, [name]: config?.custom?.cellOptions?.wrapText ?? false }),
-        {} as { [key: string]: boolean }
+        {}
       ),
     [props.data.fields]
   );
@@ -243,15 +243,12 @@ export function TableNG(props: TableNGProps) {
   }, [props.data.fields]);
 
   const fieldDisplayType = useMemo(() => {
-    return props.data.fields.reduce(
-      (acc, { config, name }) => {
-        if (config?.custom?.cellOptions?.type) {
-          acc[name] = config.custom.cellOptions.type;
-        }
-        return acc;
-      },
-      {} as Record<string, TableCellDisplayMode>
-    );
+    return props.data.fields.reduce<Record<string, TableCellDisplayMode>>((acc, { config, name }) => {
+      if (config?.custom?.cellOptions?.type) {
+        acc[name] = config.custom.cellOptions.type;
+      }
+      return acc;
+    }, {});
   }, [props.data.fields]);
 
   // Clean up fieldsData to simplify
@@ -752,7 +749,7 @@ export function mapFrameToDataGrid({
       fieldOptions.cellOptions.applyToRow
     ) {
       rowBg = (rowIndex: number): CellColors => {
-        const display = field.display!(field.values.get(sortedRows[rowIndex].__index));
+        const display = field.display!(field.values[rowIndex]);
         const colors = getCellColors(theme, fieldOptions.cellOptions, display);
         return colors;
       };