Created
June 11, 2015 11:31
-
-
Save ducky427/10551a3346695db6a5f0 to your computer and use it in GitHub Desktop.
Facebook's fixed data for reagent. Adapted from https://github.com/ul/fixed-data-table-demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(ns datatable.core | |
(:require [reagent.core :as reagent] | |
[cljsjs.fixed-data-table])) | |
(def Table (reagent/adapt-react-class js/FixedDataTable.Table)) | |
(def Column (reagent/adapt-react-class js/FixedDataTable.Column)) | |
(defn gen-table | |
"Generate `size` rows vector of 4 columns vectors to mock up the table." | |
[size] | |
(mapv (fn [i] [i ; Number | |
(rand-int 1000) ; Amount | |
(rand) ; Coeff | |
(rand-nth ["Here" "There" "Nowhere" "Somewhere"])]) ; Store | |
(range 1 (inc size)))) | |
;;; using custom :cellDataGetter in column for cljs persistent data structure | |
;;; is more efficient than converting row to js array in table's :rowGetter | |
(defn getter [k row] (get row k)) | |
(defn home-page [] | |
(let [table (gen-table 10)] | |
[:div | |
[Table {:width 600 | |
:height 400 | |
:rowHeight 50 | |
:rowGetter #(get table %) | |
:rowsCount (count table) | |
:headerHeight 50} | |
[Column {:label "Number" :dataKey 0 :cellDataGetter getter :width 100}] | |
[Column {:label "Amount" :dataKey 1 :cellDataGetter getter :width 100}] | |
[Column {:label "Coeff" :dataKey 2 :cellDataGetter getter :width 100}] | |
[Column {:label "Store" :dataKey 3 :cellDataGetter getter :width 100}]]])) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for this, was really useful. This is a gist for fdt updated to version
0.6.0
https://gist.github.com/frankiesardo/17905c5ec26bfc84df7d