clojurescript 2023-10-06

Can11:10:17

Hello, I trying to implement an react table component but its not working. Whats wrong here? I using reagent, hyperfiddle electric.

#?(:cljs ["react-data-table-component" :refer [DataTable]])  ;;--> is it correct? 
            

(def columns
  #js
          [#js {:name "Title", :selector (fn [row] (.-title row))}
           #js {:name "Year", :selector (fn [row] (.-year row))}])
(def data
  #js
          [#js {:id 1, :title "Beetlejuice", :year "1988"}
           #js {:id 2, :title "Ghostbusters", :year "1984"}])
(defn MyComponent [] [:> DataTable {:columns columns, :data data}])

(e/defn Todo-list []
        (e/client

          (dom/text "hello!")
          (with-reagent MyComponent)

          ))

https://react-data-table-component.netlify.app/?path=/docs/getting-started-examples--page this is my table components page This is the example that I trying to implement Component not appears on web page.

p-himik12:10:02

What exactly does "not working" mean? No data, wrong data, white page, JS errors in your browser's JS console?

Can12:10:23

I seelng Hello text on screen but no any other component exist. I waiting a table component to see.

Can12:10:23

p-himik12:10:58

Does the JS console have any relevant messages? Does "world" also show up on screen when you replace the body of MyComponent with [:span "world"]?

Can12:10:09

Check the render method of app.todo_list.MyComponent. (console message) World is appearing but When I "defn" that into a variable and then call instead of myComponent

Can12:10:25

i tried some other elements to see on screen all of elements appears.

p-himik12:10:59

So, no errors in the JS console at all?

p-himik12:10:43

What if you replace the whole import with ["react-data-table-component$default" :as DataTable]?

🙌 1

Can13:10:35

sorry, I was afk.

Can13:10:06

It worked thank you. Today I tried the same import but it didn't work. I guess I used clojurescript vector and map at that time.

Can13:10:19

["react-data-table-component$default" :as DataTable]

what are different between these two?

["react-data-table-component" :as DataTable].  <---- not working

( I tried that import )

p-himik13:10:46

If you're using shadow-cljs, then it's documented here: https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages

✅ 1

Can13:10:30

thank you again

Can13:10:35

have a good day!

👍 1

p-himik16:10:12

BTW check whether it's working without those #js. I suggested adding it only because I'm not quite sure whether Reagent converts nested properties from CLJS to JS.

2023-10-06

Channels