Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
react-virtualized used from reagent
;; [cljsjs/react-virtualized "7.11.8-1" :exclusions [cljsjs/react]]
(ns react-virtualized.example
(:require [cljsjs.react-virtualized]
[reagent.core :as r]))
(defn fmt-value [v]
(map? v)
(->> v
(map (comp fmt-value val))
(clojure.string/join ", "))
(sequential? v)
(->> v
(map fmt-value)
(clojure.string/join ", "))
(instance? js/Date v)
(.toUTCIsoString ( v))
(str v)))
(defn sort-by-col [items f rev?]
(if f
(->> items
(map (juxt (comp fmt-value f) identity))
(sort-by first
(if rev?
(comp - compare)
(mapv second))
(vec items)))
(defn ui []
(let [!st (r/atom nil)]
(fn [{:keys [ks on-row-click show-fn]} items]
(let [{:keys [sortBy sortDirection]} @!st
sorted-items @(r/track sort-by-col
(some-> sortBy keyword)
(= "DESC" sortDirection))]
[:> js/ReactVirtualized.AutoSizer
(fn [m]
(r/as-element (into
[:> js/ReactVirtualized.FlexTable
(cond-> {:height 800
:className "inspector"
:width (aget m "width")
:headerHeight 70
:rowHeight 30
:rowCount (count sorted-items)
:rowClassName (fn [m]
(when (odd? (aget m "index"))
:rowGetter (fn [m]
(get sorted-items (aget m "index")))
:sort #(reset! !st (js->clj % :keywordize-keys true))
:sortBy (:sortBy @!st)
:sortDirection (:sortDirection @!st)}
(assoc :on-row-click (comp on-row-click sorted-items :index mapify)))]
(map (fn [k]
[:> js/ReactVirtualized.FlexColumn
{:key (name k)
:label (name k)
:dataKey (kw->str k)
:cellDataGetter (fn [m]
(fmt-value (get (aget m "rowData") (keyword (aget m "dataKey")))))
:width 200}])
(filter (or show-fn (constantly true)) ks)))))]))))
Copy link

mattford63 commented Feb 22, 2020

Hi, from where do you get mapify and kw->str from?

Copy link

pesterhazy commented Feb 23, 2020

@mattford63, can't remember, sorry - it's been a while

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment