Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
reframe-vs-react-virtualized
(ns example.virtualized
(:require cljsjs.react-virtualized
cljsjs.react
[cljs.spec :as s]
[re-frame.core :as re-frame]))
(def ArrowKeyStepper* (js/React.createFactory js/ReactVirtualized.ArrowKeyStepper))
(def AutoSizer* (js/React.createFactory js/ReactVirtualized.AutoSizer))
(def Collection* (js/React.createFactory js/ReactVirtualized.Collection))
(def ColumnSizer* (js/React.createFactory js/ReactVirtualized.ColumnSizer))
(def FlexTable* (js/React.createFactory js/ReactVirtualized.FlexTable))
(def FlexColumn* (js/React.createFactory js/ReactVirtualized.FlexColumn))
(def SortDirection* (js/React.createFactory js/ReactVirtualized.SortDirection))
(def SortIndicator* (js/React.createFactory js/ReactVirtualized.SortIndicator))
(def Grid* (js/React.createFactory js/ReactVirtualized.Grid))
(def InfiniteLoader* (js/React.createFactory js/ReactVirtualized.InfiniteLoader))
(def ScrollSync* (js/React.createFactory js/ReactVirtualized.ScrollSync))
(def VirtualScroll* (js/React.createFactory js/ReactVirtualized.VirtualScroll))
(defn test-table []
(let [table (re-frame/subscribe [::demo-table])]
(fn []
(let [rows (map clj->js @table)]
(FlexTable*
#js {:headerHeight 30
:height 300
:rowCount (count rows)
:rowGetter #(nth rows (.-index %))
:rowHeight 50
:width 300}
(FlexColumn*
#js {:dataKey "name"
:width 90})
(FlexColumn*
#js {:dataKey "age"
:width 90}))))))
(defproject demo-ui "0.1.0-SNAPSHOT"
:dependencies [...
[cljsjs/react-virtualized "7.11.8-0"]
[cljsjs/react-with-addons "15.2.1-0"]
...
[re-frame "0.8.0"]
[reagent "0.6.0"]]
:exclusions
[cljsjs/react]
:managed-dependencies
[[cljsjs/react-dom "15.2.1-0"]
[cljsjs/react-with-addons "15.2.1-0"]]
...)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment