react learning: simple table

(enable-console-print!)

(println "js app is started.")

(def excel-data (reagent/atom {:h ["book" "author" "language" "published" "sales"]

                               :b [["The Lord of the Rings" "J. R. R. Tolkien" "English" "1954–1955" "150 million"]

                                   ["Le Petit Prince (The Little Prince)" "Antoine de Saint-Exupéry" "French" "1943" "140 million"]

                                   ["Harry Potter and the Philosopher's Stone" "J. K. Rowling" "English" "1997" "107 million"]

                                   ["And Then There Were None" "Agatha Christie" "English" "1939" "100 million"]

                                   ["Dream of the Red Chamber" "Cao Xueqin" "Chinese" "1754–1791" "100 million"]

                                   ["The Hobbit" "J. R. R. Tolkien" "English" "1937" "100 million"]

                                   ["She: A History of Adventure" "H. Rider Haggard" "English" "1887" "100 million"]]}))

(defn table-body

  [body]

  (for [row body]

    [:tr (for [cell row]

           [:td cell])]))

(defn table-header

  [header]

  [:tr (for [e header]

         [:th e])])

(defn excel-app

  "Excel prototype application"

  [excel-data]

  [:div

   [:table

    [:thead (table-header (:h @excel-data))]

    [:tbody (table-body (:b @excel-data))]]])

(reagent/render-component [excel-app excel-data]

                          (.getElementById js/document "app"))

It looks like this:

PS: Use ^{:key (gensym)} before :th, :tr, :td to avoid warning about unique key