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

Name	Email	ID
Agent Smith	void0@null.org	17685CE91B459A0
Agent Smith	void1@null.org	2F1306E0AD3464F
Agent Smith	void2@null.org	4013BEFBCC973B9
Agent Smith	void3@null.org	EC93CFD653F14F1
Agent Smith	void4@null.org	05EF8D7A84E20A9
Agent Smith	void5@null.org	201B8D558E253C4
Agent Smith	void6@null.org	0B4A8A1AF3856CC
Agent Smith	void7@null.org	772CC2064B6205A
Agent Smith	void8@null.org	E6505910D4C0B85
Agent Smith	void9@null.org	65ED25087032876