Fix conditional formatting. Resolves #10663 (#10669)

frontend/src/metabase/visualizations/components/TableInteractive.jsx

@@ -400,11 +400,16 @@ export default class TableInteractive extends Component {
   @memoize
   getCellBackgroundColor(
     settings: VisualizationSettings,
+    value: Value,
     rowIndex: number,
-    columnIndex: number,
+    columnName: number,
   ) {
     try {
-      return settings["table._cell_background_getter"](rowIndex, columnIndex);
+      return settings["table._cell_background_getter"](
+        value,
+        rowIndex,
+        columnName,
+      );
     } catch (e) {
       console.error(e);
     }
@@ -438,8 +443,9 @@ export default class TableInteractive extends Component {
     const isClickable = this.visualizationIsClickable(clicked);
     const backgroundColor = this.getCellBackgroundColor(
       settings,
+      value,
       rowIndex,
-      columnIndex,
+      column.name,
     );
 
     const columnSettings = settings.column(column);

frontend/src/metabase/visualizations/visualizations/Table.jsx

@@ -130,7 +130,7 @@ export default class Table extends Component {
         // available, we fall back to the last column in the unpivoted table
         const nonPivotCols = data.cols.filter(c => c.name !== pivotCol);
         const lastCol = nonPivotCols[nonPivotCols.length - 1];
-        const { name } = nonPivotCols.find(isMetric) || lastCol;
+        const { name } = nonPivotCols.find(isMetric) || lastCol || {};
         return name;
       },
       getProps: (

frontend/test/metabase/visualizations/components/Visualization-table.unit.spec.js

+jest.mock("metabase/components/ExplicitSize");
+
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+
+import { NumberColumn } from "../__support__/visualizations";
+
+import Visualization from "metabase/visualizations/components/Visualization";
+
+const series = (rows, settings = {}) => {
+  const cols = [NumberColumn({ name: "Foo" })];
+  return [
+    {
+      card: {
+        display: "table",
+        visualization_settings: settings,
+      },
+      data: { rows, cols },
+    },
+  ];
+};
+
+describe("Table", () => {
+  afterEach(cleanup);
+
+  it("should render correct background colors", () => {
+    const rows = [[1], [2], [3], [4]];
+    const settings = {
+      "table.column_formatting": [
+        {
+          color: "#FF0000",
+          columns: ["Foo"],
+          type: "single",
+          operator: ">",
+          value: 2,
+          highlight_row: false,
+        },
+      ],
+    };
+    const { getByText } = render(
+      <Visualization rawSeries={series(rows, settings)} />,
+    );
+    const bgColors = rows.map(
+      ([v]) => getByText(String(v)).parentNode.style["background-color"],
+    );
+    expect(bgColors).toEqual([
+      "",
+      "",
+      "rgba(255, 0, 0, 0.65)",
+      "rgba(255, 0, 0, 0.65)",
+    ]);
+  });
+});