simpleui tutorial examples docs source

Click To Load

This example shows how to implement click-to-load the next page in a table of data. The crux of the demo is the final row:

(def src "0123456789ABCDEF")
(defn rand-str []
  (clojure.string/join (repeatedly 15 #(rand-nth src))))

(defn tr [i]
    [:tr [:td "Agent Smith"] [:td (str "void" i "@null.org")] [:td (rand-str)]])

(defcomponent ^:endpoint rows-click [req ^:long page]
  (list
    (map tr (range (* 10 page) (* 10 (inc page))))
    [:tr {:id id}
      [:td {:colspan "3"}
        [:button.btn
          {:hx-get "rows-click"
           :hx-target (hash ".")
           :hx-vals {:page (inc page)}}
           "Load More Agents..."
           [:img.htmx-indicator {:src "../../bars.svg"}]]]]))

(def ring-handler
  (fn [req]
    ;; page renders initial html
    (page
      [:table
        [:thead
          [:tr [:th "Name"] [:th "Email"] [:th "ID"]]]
        [:tbody (rows-click req 0)]])))
NameEmailID
Agent Smithvoid0@null.org17685CE91B459A0
Agent Smithvoid1@null.org2F1306E0AD3464F
Agent Smithvoid2@null.org4013BEFBCC973B9
Agent Smithvoid3@null.orgEC93CFD653F14F1
Agent Smithvoid4@null.org05EF8D7A84E20A9
Agent Smithvoid5@null.org201B8D558E253C4
Agent Smithvoid6@null.org0B4A8A1AF3856CC
Agent Smithvoid7@null.org772CC2064B6205A
Agent Smithvoid8@null.orgE6505910D4C0B85
Agent Smithvoid9@null.org65ED25087032876