clojurescript om - better way of rendering a table from a 2d vector

Question

I'm new to Clojure/Clojurescript and Om and after a bit of a struggle, I came up with this way to render a table from a 2d vector:

(def app-state (atom {:world [[1 2 1] [2 1 1] [1 2 1]]}))

(defn cell
  [text]
  (om/component
    (dom/td nil text)))

(defn row
  [data]
    (om/component
      (apply dom/tr nil
        (om/build-all cell data))))

(defn world-view
  [data owner]
    (om/component
      (apply dom/table nil
        (om/build-all row (:world data)))))

(om/root
  world-view
  app-state
  {:target (. js/document (getElementById "app"))})

I am looking for pointers about how I could make this more concise or how I could create the entire table from one component function.

Just a note. Your code looks dated. What om version are you using? Lastest code looks like: ``` (defn world-view [data owner] (reify om/IRender (render [_] .... ``` — 0rca, May 13 '14 at 07:38

score 0 · Answer 1 · answered May 21 '14 at 14:18

Find example in bellow. If you would like to add table header uncommnet header part with table headers.

(def app-state (atom {:world [[1 2 1] [2 1 1] [1 2 1]]}))

(defn world-view [{:keys [world]} owner]
  (reify
    om/IRender
    (render [this]
      (dom/div nil
        (dom/table nil
          #_(apply dom/thead nil
            (for [h (keys (first world))
                 :let [hs (str h)]]
             (dom/th nil hs)))
          (apply dom/tbody nil
              (for [r world]
            (apply dom/tr nil
               (for [c (vals r)
                     :let [cs (pr-str c)]]
                 (dom/td nil cs)))))))  )))

(om/root
  world-view
  @app-state
  {:target (. js/document (getElementById "app"))})

score 0 · Answer 2 · answered Aug 04 '15 at 01:37

You can always replace uninteresting functions with lambda:

(defn world-view [data owner]
  (om/component
   (apply dom/table nil
          (om/build-all (fn [data]
                          (om/component
                           (apply dom/tr nil
                                  (om/build-all (fn [data]
                                                  (om/component
                                                   (dom/td nil data)))
                                                data))))
                        (:world data)))))

Or give them a local name within the component:

(defn world-view [data owner]
  (let [cell (fn [data]
               (om/component
                (dom/td nil data)))
        row (fn [data]
              (om/component
               (apply dom/tr nil (om/build-all cell data))))])
  (om/component
   (apply dom/table nil
          (om/build-all row
                        (:world data)))))

clojurescript om - better way of rendering a table from a 2d vector

2 Answers2