reagent 2021-07-04 | Slack Archive

kay un06:07:59

Hi, i’m working with reagent & antd table(http://ant.design/components/table/#components-table-demo-head), the UI works fine but how to define the javascript function for sorter prop in reagent: (a, b) => a.age -b.age ?

p-himik10:07:29

Any ClojureScript function is a JavaScript function. Just use JS interop so e.g. a.age becomes (.-age a). Also make sure to add ^js in front of such symbols' definitions to prevent them from being mangled by GCC during advanced optimizations.

p-himik10:07:53

(Unless you need them to be mangled - depends on your code and on how the table works, I suppose.)

kay un15:07:21

@U2FRKM4TW that works. thank you so much. need to learn more about JS interop

👍 3

GGfpc14:07:43

Has anyone used react-virtualized with reagent? I'm trying to follow this (https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md) example with the following code

(defn materialized-table
  []
  [:> Table {:width        300
             :height       300
             :headerHeight 20
             :rowHeight    30
             :rowCount     (count movies)
             :rowGetter    (fn [index] (let [movie (get movies (aget index "index"))]
                                         (println movie)
                                         movie))}
   [:> Column {:label "Nome" :dataKey :name_pt :width 500}]]
  )

And I can see that the items are in the DOM, but no text is rendered on the screen. If I open the console and scroll I can see the rowGetter function being called and the data is fine, but nothing shows up on the screen. I think it might be the dataKey, but I've tried :name_pt, "name_pt" and ":name_pt" and none work. Any insight?

p-himik14:07:49

I don't know if there's something wrong in your case, but FWIW, as per the "A word about react-window" from the react-virtualized's README, I have switched to react-window along with react-virtualized-auto-sizer, and it has been a smooth sailing.

p-himik14:07:34

I also had some issues with react-virtualized which prompted me to switch, although I don't think it was anything similar to your case.

GGfpc14:07:43

I'm trying to use this along with material-ui and since my knowledge of frontend/javascript is very bad, I'd rather not stray away from the examples 😛

GGfpc14:07:50

But yeah, maybe it's related to that

GGfpc14:07:39

Material UI has an example with react_window for lists, but it's not really what I want

p-himik14:07:30

The issue with examples is that they become outdated all the time - you may get something working with them, but you won't get too far. Unless, of course, building this one thing is all you want.

p-himik14:07:19

IIRC, in react-window a list and a table almost don't differ. They both have the same functionality at their core, and the API is mostly identical.

2021-07-04

Channels