Fork me on GitHub
#reagent
<
2023-11-22
>
Can11:11:26

Hello everyone! I try to add link on a react table components cells. I found an example on stackoverflow and tried to transform that Javascript to ClojureScript. But not worked, I missing something can anyone take a look please? Table component: https://react-data-table-component.netlify.app/?path=/docs/getting-started-examples--page Stackoverflow link: https://stackoverflow.com/questions/74460723/react-datatable-insert-action-link Working example: https://codesandbox.io/p/sandbox/charming-hamilton-1b2lfq?file=%2Fsrc%2FApp.js%3A48%2C25 I using react with reagent in Hyperfiddle Electric. (react reagent working without problem with my other components) My code: (I thinking problem related with → :cell When I delete :cell then I see other parts of table is working when I add it again table disappears. )

#?(:cljs (defn click-handler [state]
           (println "ID " (:id state))))

#?(:cljs (def data
           #js
                   [#js {:id 1, :title "Beetlejuice", :year "1988", :action "d-1", :cell (fn [row]
                                                                                           [:a {:href (.-title row) :id "d-1"}
                                                                                            "Action"])}
                    #js {:id 2, :title "Ghostbusters", :year "1984", :action "d-2", :cell (fn [row]
                                                                                            [:a {:href (.-title row) :id "d-2"}
                                                                                             "Action"])}]))

#?(:cljs (def columns
           #js
                   [#js {:name "Title", :selector (fn [row] (.-title row))}
                    #js {:name "Year", :selector (fn [row] (.-year row))}
                    #js {:name           "Action"
                         :selector       (fn [row] (.-action row))
                         :cell           (fn [props]
                                           [:a {:href    "#"
                                                :onClick (fn [_] (click-handler props))}
                                            "Action"]
                                           )
                         :ignoreRowClick true
                         :allowOverflow  true
                         :button         true}
                    ]))
#?(:cljs (defn MyComponent [] [:> DataTable {:columns columns, :data data, :pagination true}]))

(e/defn react-study []
        (e/client
          (dom/text "react workbench")
          (with-reagent MyComponent)
          )
        )

p-himik11:11:46

I don't know Electric but I'd guess that the results of the :cell functions need to be wrapped in r/as-element. Also, IIRC there's no need for all those #js when you pass data to a component with Reagent Hiccup - Reagent will convert the data for you. But it might improve the performance ever so slightly.

Can12:11:13

:cell (fn [props]
        (reagent/as-element
          [:a {:href    "#"
               :onClick (fn [_] (click-handler props))}
           "Action"]))
When I wrapped like that it worked. Thank you for seperating your time: 🙂

👍 2