[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

@@ -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"],

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(
+    return props.data.fields.reduce<Record<string, TableCellDisplayMode>>((acc, { config, name }) => {
-      (acc, { config, name }) => {
+      if (config?.custom?.cellOptions?.type) {
-        if (config?.custom?.cellOptions?.type) {
+        acc[name] = config.custom.cellOptions.type;
-          acc[name] = config.custom.cellOptions.type;
+      }
-        }
+      return acc;
-        return acc;
+    }, {});
-      },
-      {} as Record<string, TableCellDisplayMode>
-    );
   }, [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;
       };