reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
2021-07-04T06:39:59.149800Z

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-himik 2021-07-04T10:48:29.150Z

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-himik 2021-07-04T10:48:53.150200Z

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

2021-07-04T15:36:21.156Z

@p-himik that works. thank you so much. need to learn more about JS interop

1šŸ‘
p-himik 2021-07-04T10:48:29.150Z

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-himik 2021-07-04T10:48:53.150200Z

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

GGfpc 2021-07-04T14:11:43.152800Z

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-himik 2021-07-04T14:17:49.153Z

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-himik 2021-07-04T14:18:34.153300Z

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.

GGfpc 2021-07-04T14:18:43.153500Z

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 šŸ˜›

GGfpc 2021-07-04T14:18:50.153700Z

But yeah, maybe it's related to that

GGfpc 2021-07-04T14:19:39.153900Z

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

p-himik 2021-07-04T14:20:30.154100Z

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-himik 2021-07-04T14:21:19.154300Z

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-04T15:36:21.156Z

@p-himik that works. thank you so much. need to learn more about JS interop

1šŸ‘