simpleui tutorial examples docs source

Infinite Scroll

The infinite scroll pattern provides a way to load content dynamically on user scrolling action.

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

(defn tr [i]
    [:tr
      (when (= 9 (mod i 10))
        {:hx-get "rows" :hx-trigger "revealed" :hx-swap "afterend" :hx-vals {:page (inc i)}})
      [:td "Agent Smith"]
      [:td (str "void" i "@null.org")]
      [:td (rand-str)]])

(defcomponent ^:endpoint rows [req ^:long page]
  (map tr (range page (+ 10 page))))

(def ring-handler
  (fn [req]
    ;; page renders initial html
    (page
      [:table
        [:thead
          [:tr [:th "Name"] [:th "Email"] [:th "ID"]]]
        [:tbody (rows req 0)]])))

Name	Email	ID
Agent Smith	void0@null.org	DE3A6476E031888
Agent Smith	void1@null.org	0E71F1DDF41CC28
Agent Smith	void2@null.org	CA460D7EE994230
Agent Smith	void3@null.org	B2A209E83575F69
Agent Smith	void4@null.org	1AA42A439F45901
Agent Smith	void5@null.org	9BB58DB226C5314
Agent Smith	void6@null.org	C6BB5A3A656F549
Agent Smith	void7@null.org	4C50CAABDD434CB
Agent Smith	void8@null.org	ABF0D418EED3D20
Agent Smith	void9@null.org	49E3985F9BDFECD