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)]])))
NameEmailID
Agent Smithvoid0@null.orgDE3A6476E031888
Agent Smithvoid1@null.org0E71F1DDF41CC28
Agent Smithvoid2@null.orgCA460D7EE994230
Agent Smithvoid3@null.orgB2A209E83575F69
Agent Smithvoid4@null.org1AA42A439F45901
Agent Smithvoid5@null.org9BB58DB226C5314
Agent Smithvoid6@null.orgC6BB5A3A656F549
Agent Smithvoid7@null.org4C50CAABDD434CB
Agent Smithvoid8@null.orgABF0D418EED3D20
Agent Smithvoid9@null.org49E3985F9BDFECD