Ag-Grid getRowStyle 失效排查：重要列缺值时行样式未正常生效

Let's break down why your custom getRowStyle isn't working and fix it step by step:

1. Critical Logic Error in missing-requirements? #

The biggest issue is the reversed parameter order in your every? call. In Clojure, every? expects first a predicate function, then the collection to check. Your current code tries to use the row data map as a predicate, which will never work correctly.

Your Broken Function: #

(defn missing-requirements? [params] 
  (not (every? (js->clj (.-data params)) @state/important-tags)))

Corrected Version: #

Assuming @state/important-tags is a list of column keys you need to check for non-null values, rewrite the function to verify each key exists and has a value in the row data:

(defn missing-requirements? [params]
  (let [row-data (js->clj (.-data params))]
    ;; Check if ALL important tags have non-null values in the row
    (not (every? #(some? (get row-data %)) @state/important-tags))))

This fixes the core logic that determines whether the style should apply.

2. Fix Minor Ag-Grid Prop & Syntax Issues #

There are a few small typos and prop mismatches in your grid config that could be causing silent failures:

• Spelling error: deafult-col-w should be default-col-w
• Incorrect prop name: :sidebars should be :sideBar (Ag-Grid uses camelCase for props in v21)
• Explicitly convert styles to JS objects: While Reagent often handles this automatically, explicitly using clj->js avoids edge cases with Ag-Grid's style parsing
• Use camelCase for CSS properties: backgroundColor is the standard JS/CSS-in-JS syntax, though Ag-Grid accepts kebab-case, camelCase is more reliable

3. Updated Grid Component Code #

Here's the full corrected home-page component with all fixes applied:

(def ag-adapter (r/adapt-react-class (.-AgGridReact js/agGridReact)))

(defn missing-requirements? [params]
  (let [row-data (js->clj (.-data params))]
    (not (every? #(some? (get row-data %)) @state/important-tags))))

(defn home-page [] 
  [:div 
   [:h2 "Ekspono tag-model"] 
   [:p "My portfolio / Top Index " 
    [:a {:style {:background-color "#C0C0C0" :float "right" :color "black"} 
         :href "https://www.google.com" :target "_blank"} "Show problems"]]
   [:div {:className "ag-theme-balham" :style {:height 200 :width 700 :color "purple"}}
    [ag-adapter 
     {:modules (.-AllCommunityModules js/agGridReact) ; Pass actual module object, not string
      :columnDefs @state/cols 
      :rowData @state/rows 
      :defaultColDef {:sortable true 
                      :filter "agTextColumnFilter" 
                      :floatingfilter true 
                      :resizable true 
                      :flex 1 
                      :width default-col-w}
      :getRowStyle (fn [params]
                     (when (missing-requirements? params)
                       (clj->js {:backgroundColor "red"}))) ; Use correct color and JS object
      :sideBar "filters" ; Fixed prop name
      :onGridReady (fn [params]
                     ;; Store APIs properly (assuming you have atoms for these in state)
                     (reset! state/gridApi (.-api params))
                     (reset! state/gridColumnApi (.-columnApi params)))}]]])

4. Verify the Logic (Debugging Step) #

To confirm the missing-requirements? function is returning the expected boolean, add a console log:

(defn missing-requirements? [params]
  (let [row-data (js->clj (.-data params))
        missing? (not (every? #(some? (get row-data %)) @state/important-tags))]
    (js/console.log "Row missing requirements?" missing? row-data @state/important-tags)
    missing?))

Check your browser's developer console to ensure the function returns true for rows that should have the red background.

内容的提问来源于stack exchange，提问作者Fredrik Cumlin