Facebook's fixed data for reagent. Adapted from https://github.com/ul/fixed-data-table-demo

core.cljs

(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}]]]))