Fix Table Cells rule based styling by applying the first valid rule f…

src/chart/table/TableChart.tsx

@@ -245,7 +245,6 @@ export const NeoTableChart = (props: ChartProps) => {
       ColumnSortedDescendingIcon: () => <></>,
       ColumnSortedAscendingIcon: () => <></>,
     },
-    // TODO: if mixing and matching row and cell styling, row rules MUST be set first or will not populate correctly
     getRowClassName: (params) => {
       return ['row color', 'row text color']
         .map((e) => {
@@ -256,21 +255,28 @@ export const NeoTableChart = (props: ChartProps) => {
     getCellClassName: (params) => {
       return ['cell color', 'cell text color']
         .map((e) => {
-          let trueRulesList = [''];
-          let trueRule;
+          let validRuleClass = '';
           for (const [index, rule] of styleRules.entries()) {
+            let ruleClass = '';
+            // If the rule target is not the current cell
             if (rule.targetField) {
               if (rule.targetField === params.field) {
-                trueRule = `rule${evaluateSingleRuleOnDict({ [rule.field]: params.row[rule.field] }, rule, index, [
+                ruleClass = `rule${evaluateSingleRuleOnDict({ [rule.field]: params.row[rule.field] }, rule, index, [
                   e,
                 ])}`;
               }
-            } else {
-              trueRule = `rule${evaluateSingleRuleOnDict({ [params.field]: params.value }, rule, index, [e])}`;
             }
-            trueRulesList.push(trueRule);
+            // If the rule target is the current cell
+            else {
+              ruleClass = `rule${evaluateSingleRuleOnDict({ [params.field]: params.value }, rule, index, [e])}`;
+            }
+            // If rule class is valid (rule-1 means rule check has failed)
+            if (ruleClass && ruleClass !== 'rule-1') {
+              validRuleClass = ruleClass;
+              break;
+            }
           }
-          return trueRulesList.join(' ');
+          return validRuleClass;
         })
         .join(' ');
     },

src/extensions/styling/StyleRuleEvaluator.ts

@@ -63,7 +63,10 @@ export const evaluateRulesOnDict = (dict, rules, customizations) => {
   }
   for (const [index, rule] of rules.entries()) {
     // Only check customizations that are specified
-    return evaluateSingleRuleOnDict(dict, rule, index, customizations);
+    const evaluationResult = evaluateSingleRuleOnDict(dict, rule, index, customizations);
+    if (evaluationResult !== -1) {
+      return evaluationResult;
+    }
   }
   // If no rules are met, return not found (index=-1)
   return -1;