reagent dynamic lists/tables

gistfile1.clj

(def doc (atom {:items       ["foo" "bar" "baz"]
                :table-items [["foo" "bar" "baz"]
                              ["blah" "bleh" "blub"]]}))

(defn remove-at [v i]
  (vec (into (subvec v 0 i) (subvec v (inc i) (count v)))))

(defn list-field []
  [:div
   [:ul
    (for [[idx item] (map-indexed vector (:items @doc))]
      ^{:key idx}
      [:li [:input
            {:value     item
             :on-change #(save! [:items idx] (-> % .-target .-value))}]
       [:button.btn.btn-primary
        {:on-click #(swap! doc update-in [:items] remove-at idx)}
        "X"]])]
   [:button.btn.btn-primary
    {:on-click #(swap! doc update-in [:items] conj "")}
    "Add Item"]])

(defn text-td [path value]
  (let [value (atom value)]
    [:td
     [:input
      {:type      :text
       :value     @value
       :on-change #(save! path (-> % .-target .-value))}]]))

(defn table-row [path fields]
  [:tr
   (cons
     [:td
      [:button.btn.btn-primary
       {:on-click #(swap! doc update-in [:table-items] remove-at (last path))}
       "X"]]
     (for [[idx field] (map-indexed vector fields)]
     ^{:key idx}
     [text-td (conj path idx) field]))])

(defn table-field []
  [:div
   [:table
    [:tbody
     (for [[idx row] (map-indexed vector (:table-items @doc))]
       ^{:key idx}
       [table-row [:table-items idx] row])]]
   [:button.btn.btn-primary
    {:on-click #(swap! doc update-in [:table-items] conj ["" "" ""])}
    "Add Row"]])