Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Facebook's fixed data for reagent. Adapted from https://github.com/ul/fixed-data-table-demo
(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}]]]))
@frankiesardo

This comment has been minimized.

Copy link

@frankiesardo frankiesardo commented Nov 23, 2015

Thanks for this, was really useful. This is a gist for fdt updated to version 0.6.0 https://gist.github.com/frankiesardo/17905c5ec26bfc84df7d

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