|
72 | 72 | [:li "In that case: " |
73 | 73 | [:ul |
74 | 74 | [:li [:code ":a"] " and " [:code ":b"] " are siblings, each with two children."] |
75 | | - [:li [:code "1"] " and " [:code "2"] " are siblings, both children of " [:code ":a"]]] |
76 | | - [nested-grid |
77 | | - :column-tree ["Tree" "Paths"] |
78 | | - :row-tree [{:label "Basic" :tree [:a :b :c]} |
79 | | - {:label "Nested"}] |
80 | | - :cell (fn [{:keys [column-path] {:keys [tree]} :row-path}] |
81 | | - (case (last column-path) |
82 | | - "Tree" (str tree) |
83 | | - "paths" (str (nested-grid/header-spec->header-paths tree))))]]]] |
| 75 | + [:li [:code "1"] " and " [:code "2"] " are siblings, both children of " [:code ":a"]]]]]] |
84 | 76 | [:br] |
85 | 77 | [:li "A " [:code ":column-path"] " describes a distinct location within a " |
86 | 78 | [:code ":column-tree"] "." |
|
129 | 121 | [:li "Does not re-render when you scroll or click. Even if that first render is expensive, " |
130 | 122 | "the UI should be snappy once it completes."]]] |
131 | 123 | [title2 "Quick Start"] |
132 | | - [p "To use" [:code "nested-grid"] ", at a minimum, you must declare:" |
| 124 | + [p "To use " [:code "nested-grid"] ", at a minimum, you must declare:" |
133 | 125 | [:ul |
134 | 126 | [:li [:code ":column-tree"] ": a vector describing the column structure."] |
135 | 127 | [:li [:code ":row-tree"] ": a vector describing the row structure."] |
|
351 | 343 | (defn header-demo [] |
352 | 344 | [:hi]) |
353 | 345 |
|
| 346 | +(defn internals-demo [] |
| 347 | + [v-box |
| 348 | + :children |
| 349 | + [[p "This table demonstrates how " [:code "nested-grid"] " derives a vector of " [:code ":column-path"] "s from a " [:code ":column-tree"] ":"] |
| 350 | + [nested-grid |
| 351 | + :column-tree [{:id "Tree" :width 130} |
| 352 | + {:id "Leaf Paths" :width 155} |
| 353 | + {:id "All Paths" :width 180}] |
| 354 | + :row-tree [{:label "Basic" :tree [:a :b :c]} |
| 355 | + {:label "Nested" :tree [:a [:b :c]]} |
| 356 | + {:label "Branching" :tree [:a [:b] :c [:d]]} |
| 357 | + {:label "Explicit" :tree [[:a [:b :c]] |
| 358 | + [:d [:e :f]]]} |
| 359 | + {:label "Typed" :tree [:kw 42 "str" {:k :map}]}] |
| 360 | + :cell (fn [{:keys [column-path] [{:keys [tree]}] :row-path}] |
| 361 | + (case (:id (last column-path)) |
| 362 | + "Tree" (str tree) |
| 363 | + "Leaf Paths" (str (vec (nested-grid/leaf-paths |
| 364 | + (nested-grid/header-spec->header-paths tree)))) |
| 365 | + "All Paths" (str (nested-grid/header-spec->header-paths tree))))]]]) |
| 366 | + |
354 | 367 | (defn demos [] |
355 | 368 | (let [tabs [{:id :basic :label "Basic Demo" :view basic-demo} |
356 | 369 | {:id :color :label "Color" :view color-demo} |
357 | 370 | {:id :shade :label "Shade" :view color-shade-demo} |
358 | | - {:id :header :label "Headers" :view header-demo} |
| 371 | + {:id :internals :label "Internals" :view internals-demo} |
359 | 372 | {:id :spec :label "Spec" :view header-spec-demo}] |
360 | 373 | !tab-id (r/atom (:id (first tabs))) |
361 | 374 | !tab (r/reaction (u/item-for-id @!tab-id tabs))] |
|
0 commit comments