clerk 2024-02-12 | Slack Archive

Carsten Behring10:02:01

I noticed that a static build "cuts" of my tables, and instead of being able to press to "load more data", I see "xxx elided". Can I somehow change this ? So my long tables are rendered initially "short", but a reader of the static can expands, if he wants.

Andrea10:02:57

you might solve that issue by handling pagination entirely on the client side, via a custom viewer, roughly along these lines:

(ns scratch.debug
  {:nextjournal.clerk/visibility {:code :hide}}
  (:require [nextjournal.clerk :as clerk]
            [nextjournal.clerk.viewer :as viewer]))

(def table-viewer-with-client-pagination
  (update viewer/table-viewer
          :add-viewers viewer/add-viewers
          [(assoc viewer/table-body-viewer
                  :render-fn '(fn [xs opts]
                                (let [!visible-rows (nextjournal.clerk.render.hooks/use-state 10)]
                                  [:tbody
                                   (into [:<>]
                                         (nextjournal.clerk.render/inspect-children opts)
                                         (take @!visible-rows xs))
                                   [:tr.border-t.dark:border-slate-700
                                    [:td.py-1.relative.bg-indigo-50.hover:bg-indigo-100.cursor-pointer
                                     {:col-span (:num-cols opts) :on-click (fn [_] (swap! !visible-rows + 10))}
                                     [:span.sticky.px-2 "more..."]]]])))]))


(clerk/with-viewer
  table-viewer-with-client-pagination
  {::clerk/page-size nil}
  (clerk/use-headers (mapv (constantly (vec (range 10)))
                           (range 80))))

I think that would work until we find a more principled way to do that

Andrea10:02:55

Or, to apply the above approach to all clerk/table invokations:

(ns scratch.debug
  {:nextjournal.clerk/visibility {:code :hide}}
  (:require [nextjournal.clerk :as clerk]
            [nextjournal.clerk.viewer :as viewer]))

(def table-viewer-with-client-pagination
  (update (dissoc viewer/table-viewer :page-size)
          :add-viewers viewer/add-viewers
          [(assoc viewer/table-body-viewer
                  :render-fn '(fn [xs opts]
                                (let [!visible-rows (nextjournal.clerk.render.hooks/use-state 10)]
                                  [:tbody
                                   (into [:<>]
                                         (nextjournal.clerk.render/inspect-children opts)
                                         (take @!visible-rows xs))
                                   [:tr.border-t.dark:border-slate-700
                                    [:td.py-1.relative.bg-indigo-50.hover:bg-indigo-100.cursor-pointer
                                     {:col-span (:num-cols opts) :on-click (fn [_] (swap! !visible-rows + 10))}
                                     [:span.sticky.px-2 "more..."]]]])))]))

(clerk/add-viewers! [table-viewer-with-client-pagination])

(clerk/table
 (clerk/use-headers (mapv (constantly (vec (range 10)))
                          (range 100))))

Carsten Behring15:02:01

Thanks, will try it out ASAP.

2024-02-12

Channels