This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-11-22
Channels
- # announcements (1)
- # babashka (94)
- # beginners (11)
- # biff (9)
- # calva (21)
- # clj-kondo (14)
- # clojure (12)
- # clojure-europe (56)
- # clojure-nl (1)
- # clojure-norway (41)
- # clojure-uk (4)
- # clojurescript (4)
- # core-logic (2)
- # gratitude (12)
- # honeysql (1)
- # hoplon (3)
- # hugsql (7)
- # introduce-yourself (2)
- # jobs-discuss (23)
- # leiningen (3)
- # malli (11)
- # off-topic (1)
- # pedestal (11)
- # reagent (3)
- # squint (8)
- # vim (9)
- # xtdb (3)
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)
)
)
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.