feat: virtualized table

src/main/frontend/components/all_pages.cljs

@@ -9,7 +9,10 @@
             [frontend.components.page :as component-page]
             [frontend.db :as db]
             [frontend.state :as state]
-            [frontend.date :as date]))
+            [frontend.date :as date]
+            [goog.object :as gobj]
+            [goog.dom :as gdom]
+            [cljs-bean.core :as bean]))
 
 ;; columns:
 ;; page name, tags, backlinks, created at updated at
@@ -155,36 +158,40 @@
              :checked (column-visible? column)
              :onCheckedChange #(column-toggle-visiblity column %)}
             (:name column)))))]]
-     (let [columns' (:columns table)]
+     (let [columns' (:columns table)
+           rows (:rows table)]
        [:div.rounded-md.border
-        (shui/table
-         (shui/table-header
-          (shui/table-row
-           (for [column columns']
-             (shui/table-head
-              {:key (:id column)}
-              (let [header-fn (:header column)]
-                (if (fn? header-fn)
-                  (header-fn table column)
-                  header-fn))))))
-         (shui/table-body
-          (let [rows (:rows table)]
-            (if (pos? (count rows))
-              (for [row rows]
-                (shui/table-row
-                 {:key (str (:id row))
-                  :data-state (when (row-selected? row) "selected")}
-                 (for [column columns']
-                   (let [id (str (:id row) "-" (:id column))
-                         render (get column :cell)]
-                     (shui/table-cell
-                      {:key id}
-                      (render table row column))))))
-              (shui/table-row
-               (shui/table-cell
-                {:colSpan (count columns)
-                 :className "h-24 text-center"}
-                "No results."))))))])
+        (ui/virtualized-table
+         {:custom-scroll-parent (gdom/getElement "main-content-container")
+          :total-count (count rows)
+          :fixedHeaderContent (fn []
+                                (shui/table-row
+                                 {:class "bg-gray-01 shadow"}
+                                 (for [column columns']
+                                   (shui/table-head
+                                    {:key (str (:id column))}
+                                    (let [header-fn (:header column)]
+                                      (if (fn? header-fn)
+                                        (header-fn table column)
+                                        header-fn))))))
+          :components {:Table (fn [props]
+                                (shui/table {}
+                                  (.-children props)))
+                       :TableRow (fn [props]
+                                   (let [idx (gobj/get props "data-index")
+                                         row (nth rows idx)]
+                                     (shui/table-row
+                                      (merge
+                                       (bean/->clj props)
+                                       {:key (str (:id row))
+                                        :data-state (when (row-selected? row) "selected")})
+                                      (for [column columns']
+                                        (let [id (str (:id row) "-" (:id column))
+                                              render (get column :cell)]
+                                          (shui/table-cell
+                                           {:key id}
+                                           (render table row column)))))))}})])
+
      (let [rows-count (count (:rows table))]
        [:div.flex.items-center.justify-end.space-x-2.py-4
         [:div.flex-1.text-sm.text-muted-foreground

src/main/frontend/db/model.cljs

@@ -43,6 +43,7 @@
   (let [db (conn/get-db repo)]
     (->>
      (d/datoms db :avet :block/name)
+     (distinct)
      (map #(d/entity db (:e %)))
      (remove hidden-page?)
      (remove (fn [page]

src/main/frontend/ui.cljs

@@ -6,7 +6,7 @@
             ["react-textarea-autosize" :as TextareaAutosize]
             ["react-tippy" :as react-tippy]
             ["react-transition-group" :refer [CSSTransition TransitionGroup]]
-            ["react-virtuoso" :refer [Virtuoso]]
+            ["react-virtuoso" :refer [Virtuoso TableVirtuoso]]
             ["@emoji-mart/data" :as emoji-data]
             ["emoji-mart" :as emoji-mart]
             [cljs-bean.core :as bean]
@@ -43,6 +43,7 @@
 (defonce css-transition (r/adapt-class CSSTransition))
 (defonce textarea (r/adapt-class (gobj/get TextareaAutosize "default")))
 (defonce virtualized-list (r/adapt-class Virtuoso))
+(defonce virtualized-table (r/adapt-class TableVirtuoso))
 
 (def resize-provider (r/adapt-class (gobj/get Resize "ResizeProvider")))
 (def resize-consumer (r/adapt-class (gobj/get Resize "ResizeConsumer")))