mirror of https://github.com/logseq/logseq
feat: virtualized table
parent
a21a61fde6
commit
055570fff5
|
@ -9,7 +9,10 @@
|
||||||
[frontend.components.page :as component-page]
|
[frontend.components.page :as component-page]
|
||||||
[frontend.db :as db]
|
[frontend.db :as db]
|
||||||
[frontend.state :as state]
|
[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:
|
;; columns:
|
||||||
;; page name, tags, backlinks, created at updated at
|
;; page name, tags, backlinks, created at updated at
|
||||||
|
@ -155,36 +158,40 @@
|
||||||
:checked (column-visible? column)
|
:checked (column-visible? column)
|
||||||
:onCheckedChange #(column-toggle-visiblity column %)}
|
:onCheckedChange #(column-toggle-visiblity column %)}
|
||||||
(:name column)))))]]
|
(:name column)))))]]
|
||||||
(let [columns' (:columns table)]
|
(let [columns' (:columns table)
|
||||||
|
rows (:rows table)]
|
||||||
[:div.rounded-md.border
|
[:div.rounded-md.border
|
||||||
(shui/table
|
(ui/virtualized-table
|
||||||
(shui/table-header
|
{:custom-scroll-parent (gdom/getElement "main-content-container")
|
||||||
(shui/table-row
|
:total-count (count rows)
|
||||||
(for [column columns']
|
:fixedHeaderContent (fn []
|
||||||
(shui/table-head
|
(shui/table-row
|
||||||
{:key (:id column)}
|
{:class "bg-gray-01 shadow"}
|
||||||
(let [header-fn (:header column)]
|
(for [column columns']
|
||||||
(if (fn? header-fn)
|
(shui/table-head
|
||||||
(header-fn table column)
|
{:key (str (:id column))}
|
||||||
header-fn))))))
|
(let [header-fn (:header column)]
|
||||||
(shui/table-body
|
(if (fn? header-fn)
|
||||||
(let [rows (:rows table)]
|
(header-fn table column)
|
||||||
(if (pos? (count rows))
|
header-fn))))))
|
||||||
(for [row rows]
|
:components {:Table (fn [props]
|
||||||
(shui/table-row
|
(shui/table {}
|
||||||
{:key (str (:id row))
|
(.-children props)))
|
||||||
:data-state (when (row-selected? row) "selected")}
|
:TableRow (fn [props]
|
||||||
(for [column columns']
|
(let [idx (gobj/get props "data-index")
|
||||||
(let [id (str (:id row) "-" (:id column))
|
row (nth rows idx)]
|
||||||
render (get column :cell)]
|
(shui/table-row
|
||||||
(shui/table-cell
|
(merge
|
||||||
{:key id}
|
(bean/->clj props)
|
||||||
(render table row column))))))
|
{:key (str (:id row))
|
||||||
(shui/table-row
|
:data-state (when (row-selected? row) "selected")})
|
||||||
(shui/table-cell
|
(for [column columns']
|
||||||
{:colSpan (count columns)
|
(let [id (str (:id row) "-" (:id column))
|
||||||
:className "h-24 text-center"}
|
render (get column :cell)]
|
||||||
"No results."))))))])
|
(shui/table-cell
|
||||||
|
{:key id}
|
||||||
|
(render table row column)))))))}})])
|
||||||
|
|
||||||
(let [rows-count (count (:rows table))]
|
(let [rows-count (count (:rows table))]
|
||||||
[:div.flex.items-center.justify-end.space-x-2.py-4
|
[:div.flex.items-center.justify-end.space-x-2.py-4
|
||||||
[:div.flex-1.text-sm.text-muted-foreground
|
[:div.flex-1.text-sm.text-muted-foreground
|
||||||
|
|
|
@ -43,6 +43,7 @@
|
||||||
(let [db (conn/get-db repo)]
|
(let [db (conn/get-db repo)]
|
||||||
(->>
|
(->>
|
||||||
(d/datoms db :avet :block/name)
|
(d/datoms db :avet :block/name)
|
||||||
|
(distinct)
|
||||||
(map #(d/entity db (:e %)))
|
(map #(d/entity db (:e %)))
|
||||||
(remove hidden-page?)
|
(remove hidden-page?)
|
||||||
(remove (fn [page]
|
(remove (fn [page]
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
["react-textarea-autosize" :as TextareaAutosize]
|
["react-textarea-autosize" :as TextareaAutosize]
|
||||||
["react-tippy" :as react-tippy]
|
["react-tippy" :as react-tippy]
|
||||||
["react-transition-group" :refer [CSSTransition TransitionGroup]]
|
["react-transition-group" :refer [CSSTransition TransitionGroup]]
|
||||||
["react-virtuoso" :refer [Virtuoso]]
|
["react-virtuoso" :refer [Virtuoso TableVirtuoso]]
|
||||||
["@emoji-mart/data" :as emoji-data]
|
["@emoji-mart/data" :as emoji-data]
|
||||||
["emoji-mart" :as emoji-mart]
|
["emoji-mart" :as emoji-mart]
|
||||||
[cljs-bean.core :as bean]
|
[cljs-bean.core :as bean]
|
||||||
|
@ -43,6 +43,7 @@
|
||||||
(defonce css-transition (r/adapt-class CSSTransition))
|
(defonce css-transition (r/adapt-class CSSTransition))
|
||||||
(defonce textarea (r/adapt-class (gobj/get TextareaAutosize "default")))
|
(defonce textarea (r/adapt-class (gobj/get TextareaAutosize "default")))
|
||||||
(defonce virtualized-list (r/adapt-class Virtuoso))
|
(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-provider (r/adapt-class (gobj/get Resize "ResizeProvider")))
|
||||||
(def resize-consumer (r/adapt-class (gobj/get Resize "ResizeConsumer")))
|
(def resize-consumer (r/adapt-class (gobj/get Resize "ResizeConsumer")))
|
||||||
|
|
Loading…
Reference in New Issue