toddler.table
Namespace contains context definitions, hooks and component that will aid you to build tables faster and with prepared logic.
In rough this namespace contains Cell, Row, Header, Body components that use flex parameters to render table data in table layout.
Above components are reusable and aren’t ment for direct usage. Instead they are here to be extended with more specific implementation. Your implementation.
For example look at toddler.ui.table
where default :table/row :table/cell and :table UI components are implemented.
Body
Reusable component that will render table rows by using component under :table/row key in UI Context. It will wrap list of :table/row components in div that will fit available container space.
Simplebar is wrapped around that div, so scrolling vertically and horizontally over table body comes out of the box.
You can style or add classes using :class or :className props that will be propagated to simplebar-content-wrapper div.
Cell
Component that abstaracts cell. Component will render div that is has preconfigured flex layout that matches column definition.
If class or className is passed to Cell it will be added to that div component. Actually every prop will be passed through except:
:width, :level, :cell, :column props
Cell will look for render function under :cell key of column definition.
column-default-style
(column-default-style {style :style, type :type, :as column})
Function that will apply default styles to column if style params aren’t provided. Following props are important for column to be well styled:
- width - prop that will be read from :width key of column definition or :style :width position of column definition
- align - :align key of column definition, can be keyword or set of keywords, combination of :left, :top, :right, :bottom, :center
Alignement will adjust cell flex params for justify-content and align-items
FRow
Flex implementation for table row. It will render div and all passed children.
div will be styled with flex parameters and computed table width so that row has min width and when possible to scale to fit larger container.
Header
Reusable component that will render table header. It will use :header component from column definition if it is available or ui :header/plain component from UI context to render header row.
If column has :name specified and header key isn’t present it will also use :header/plain to render that column. If you wan’t to ommit header, that you have to explicitly set :header nil in column definition.
Header row is wrapped in simplebar, so that it can be scrolled horizontally. Scroll is hidden and it is assumed that parent component will controll and synchronize scroll offset for both body and header component.
reducer
multimethod
Row
Reusable component that will propagate column definition and provide row-record context. This component will render FRow component and in it it will render columns by rendering UI :table/cell component and passing :column definition in props.
Usually this component is some derivate of Cell component.
Row can contain children, so this is nice place to put additional content like when expanding row and such.
This component, same as Cell can be customized by adding class, className or in props, so you can style it to your desires, but logic is reausable.
TableProvider
Component that is used to distribute received dispatch and rows props to proper context. Rest of children will than be able to use those contexts.
use-cell-state
(use-cell-state)
(use-cell-state column)
Hook that will return vector of
[value set-value! select-value!]
Value is value pulled from row based on :cursor position in column declaration. set-value! and select-value! will use dispatch from dispatch context to send events when value changes or value is selected.
Use dispatch from your reducer to set dispatch context that this hook will use.
use-column
(use-column)
Hook will return column context
use-columns
(use-columns)
Hook will return columns context
use-dispatch
(use-dispatch)
use-row
(use-row)
use-rows
(use-rows)
Hook will return rows context
use-table-defaults
(use-table-defaults {:keys [columns], :as props})
Hook that will update :columns in recevied props. It will map column-default-style to columns and add :idx prop as well
use-table-width
(use-table-width)
Hook will return table width by summing all columns widths.