reforms.table
table
(table & args)
Renders a table of rows
(col => value). An optional map of columns to labels can be specified which also restricts which columns are visible.
Arguments:
[attrs] rows [options]
- attrs - (optional) attributes for <table> handed over to React (see https://github.com/r0man/sablono#html-attributes)
- rows - a vector of col->val maps
- options - (optional) options to customize the table
Options:
- :columns - map of keys used in `rows` to human-friendly column names
- :checkboxes - use this to support row selection using checkboxes, the map contains:
:selection - atom/cursor to keep selected rows in
:path - (optional) korks/path into the selection atom/cursor
:row-id - function applied to row map to calculate a unique row id to put into the selection set
:nil-selects-all? - (optional) selection set to nil (as opposed to #{}) selects all rows (default: false)
See the second example.
Example:
(table [{:name "Tom" :id 12} {:name "Jerry" :id 23}]
:columns {:name "Hero name"})
Result:
| Hero name |
| Tom |
| Jerry |
As an option, each row can have an on/off checkbox to the left; to turn this on, checkboxes
must be a map with :cursor and :korks pointing to where to store the selection. The resulting selection is either a set containing values or nil; the latter means that all rows are selected. The values are taken from the first val in the respective row or a result of :value function of signature (fn [row]).
Example:
(table [{:name "Tom" :id 12} {:name "Jerry" :id 23}]
:checkboxes {:selection app-state
:path [:selected-heroes]
:row-id :id}
:columns {:name "Hero name"})
| [ ] Hero name |
| [x] Tom |
| [ ] Jerry |
;; For the above selection:
(get-in app-state [:selected-heroes]) => #{12}
Depending on the initial value of app-state
in the above example the table start either
a) with all checkboxes on for app-state
containing {:selected-heroes nil}, or b) with no selection with {:selected-heroes #{}}.