Package dev.fritz2.components.datatable

Types

Column
Link copied to clipboard
js
data class Column<T>(id: String, lens: Lens<T, String>?, title: String, minWidth: Property?, maxWidth: Property?, hidden: Boolean, position: Int, sorting: Sorting, sortBy: Comparator<T>?, styling: BasicParams.(value: IndexedValue<StatefulItem<T>>) -> Unit, content: Td.(value: IndexedValue<StatefulItem<T>>, cellStore: Store<String>?, rowStore: SubStore<List<T>, T>) -> Unit, headerStyling: BasicParams.(sorting: Sorting) -> Unit, headerContent: Div.(column: Column<T>) -> Unit)
Main class to define the representation of the data class `T` of one table column.
ColumnIdSorting
Link copied to clipboard
js
data class ColumnIdSorting(id: String?, strategy: Sorting)
Wrapping class to group the id of a Column with the sorting strategy.
ColumnsContext
Link copied to clipboard
js
class ColumnsContext<T>
This context class manages the configuration and defines the DSL for the overall declaration of the data table's columns.
ColumnSortingPlan
Link copied to clipboard
js
typealias ColumnSortingPlan<T> = List<Pair<Column<T>, Sorting>>

This alias expresses the grouping of a Column paired with its sorting strategy. Together with the SortingPlan this represents the foundation of the sorting mechanisms: Based upon the SortingPlan this plan is created from the given Columns of a datatable and is then used to do the actual sorting within a RowSorter implementation.

There are three different interfaces on that the separate sorting functionalities are implemented:

  1. SortingPlanReducer: create a plan of columns to be sorted in a specific direction based upon the former plan and the triggering user action

  2. RowSorter: do the actual sorting work based upon the above plan (slightly transformed to typed column instead of plain ids)

  3. SortingRenderer: render the appropriate UI for the sorting actions in the header columns

Here is the big picture visualized:

                             +-----------------------------------------------------------------+
| (emits new state) |
| |
v |
+------------------------------------------+ |
| State | |
+------------------------------------------+ |
| val sortingPlan: SortingPlan | |
+------------------------------------------+ |
| fun columnSortingPlan: ColumnSortingPlan | |
+------------------------------------------+ |
^ |
| +----------------------------------+ |
User action as input: |(owns) +---->| SortingPlanReducer (1) |---+
(Column ID+Strategy) | | +----------------------------------+
| | | | Creates a new SortingPlan based |
| +-----------------------------+ | | upon the former plan, the newly |
| | StateStore | | | column ID and its sorting |
| +-----------------------------+ | | strategy (asc, desc, none) |
+---->| val sortingChanged: Handler |-----+ +----------------------------------+
+-----------------------------+
+---->| fun renderingRowsData |-----+
| +-----------------------------+ | +----------------------------------+
| +---->| RowSorter (2) |
| +----------------------------------+
| | Takes the current rows and sort |
TableComponent | them according to the column |
.renderRows() | based sorting plan. |
| So the raw ``sortingPlan`` |
| field of the state object must |
| be enriched before with the |
| actual ``Column`` objects by |
| the ``columnSoftingPlan`` |
| function. |
+----------------------------------+


+----------------------------------+
TableComponent ------------------------------------>| SortingRenderer (3) |
.renderHeader() +----------------------------------+
| Renders the UI elements |
| (icons eg.) for configuring |
| and changing the sorting state. |
+----------------------------------+

[Edit](https://textik.com/#f3fc13858b89df9b)
DataTableComponent
Link copied to clipboard
js
open class DataTableComponent<T, I>(dataStore: RootStore<List<T>>, rowIdProvider: (T) -> I) : Component<Unit> , DataTableContext<T, I>
This class implements the core of the data table.
DataTableContext
Link copied to clipboard
js
interface DataTableContext<T, I>
This context class integrates the configuration and the DSL for the whole data table using sub contexts with their own DSLs.
DefaultContext
Link copied to clipboard
js
class DefaultContext<T, I>(rowIdProvider: (T) -> I) : DataTableContext<T, I>
EventsContext
Link copied to clipboard
js
class EventsContext<T, I>(element: RenderContext, rowSelectionStore: RowSelectionStore<T, I>) : EventContext<HTMLElement>
This context class defines the event context of the data table.
HeaderContext
Link copied to clipboard
js
class HeaderContext
This context class integrates the configuration and the DSL for the common header aspects.
NoSelection
Link copied to clipboard
js
class NoSelection<T, I> : SelectionStrategy<T, I>
Selection strategy for disabling the selection at all.
OneColumnSorter
Link copied to clipboard
js
class OneColumnSorter<T> : RowSorter<T>
This class implements the sorting with at most one column as sorting criterion, that is at most one column within the ColumnSortingPlan.
OptionsContext
Link copied to clipboard
js
class OptionsContext<T>
This context class integrates the configuration and the DSL for some general and optional properties.
RowSelectionStore
Link copied to clipboard
js
class RowSelectionStore<T, I>(rowIdProvider: (T) -> I) : RootStore<List<T>>
This store manages the selected rows of the data table.
RowSorter
Link copied to clipboard
js
interface RowSorter<T>
This interface defines the actual sorting action.
SelectionByCheckBox
Link copied to clipboard
js
class SelectionByCheckBox<T, I> : SelectionStrategy<T, I>
This selection strategy offers the selection via an additional checkbox per row, which is added in front of the row as artificial column.
SelectionByClick
Link copied to clipboard
js
class SelectionByClick<T, I> : SelectionStrategy<T, I>
This selection strategy enables the selection by clicking onto a row of the table.
SelectionContext
Link copied to clipboard
js
class SelectionContext<T, I>
This context class configures the selection capabilities of the data table.
SelectionMode
Link copied to clipboard
js
enum SelectionMode : Enum<SelectionMode>
Representation of the selection possibilities.
SelectionStrategy
Link copied to clipboard
js
interface SelectionStrategy<T, I>
This interface defines a strategy type in order to implement different selection mechanisms.
SingleArrowSortingRenderer
Link copied to clipboard
js
class SingleArrowSortingRenderer : SortingRenderer
This implementation of a SortingRenderer creates an icon based UI for choosing the sorting of a data table.
Sorting
Link copied to clipboard
js
enum Sorting : Enum<Sorting>
Representation of the different sorting status.
SortingPlan
Link copied to clipboard
js
typealias SortingPlan = List<ColumnIdSorting>

This alias expresses the sorting plan, which is the ordered list of column ids paired with their strategies. This is the base concept for the sorting held within a State object and used for the SortingRenderer in order to create a new plan based upon user interaction (change the direction, change the column to be sorted)

There are three different interfaces on that the separate sorting functionalities are implemented:

  1. SortingPlanReducer: create a plan of columns to be sorted in a specific direction based upon the former plan and the triggering user action

  2. RowSorter: do the actual sorting work based upon the above plan (slightly transformed to typed column instead of plain ids)

  3. SortingRenderer: render the appropriate UI for the sorting actions in the header columns

Here is the big picture visualized:

                             +-----------------------------------------------------------------+
| (emits new state) |
| |
v |
+------------------------------------------+ |
| State | |
+------------------------------------------+ |
| val sortingPlan: SortingPlan | |
+------------------------------------------+ |
| fun columnSortingPlan: ColumnSortingPlan | |
+------------------------------------------+ |
^ |
| +----------------------------------+ |
User action as input: |(owns) +---->| SortingPlanReducer (1) |---+
(Column ID+Strategy) | | +----------------------------------+
| | | | Creates a new SortingPlan based |
| +-----------------------------+ | | upon the former plan, the newly |
| | StateStore | | | column ID and its sorting |
| +-----------------------------+ | | strategy (asc, desc, none) |
+---->| val sortingChanged: Handler |-----+ +----------------------------------+
+-----------------------------+
+---->| fun renderingRowsData |-----+
| +-----------------------------+ | +----------------------------------+
| +---->| RowSorter (2) |
| +----------------------------------+
| | Takes the current rows and sort |
TableComponent | them according to the column |
.renderRows() | based sorting plan. |
| So the raw ``sortingPlan`` |
| field of the state object must |
| be enriched before with the |
| actual ``Column`` objects by |
| the ``columnSoftingPlan`` |
| function. |
+----------------------------------+


+----------------------------------+
TableComponent ------------------------------------>| SortingRenderer (3) |
.renderHeader() +----------------------------------+
| Renders the UI elements |
| (icons eg.) for configuring |
| and changing the sorting state. |
+----------------------------------+

[Edit](https://textik.com/#f3fc13858b89df9b)
SortingPlanReducer
Link copied to clipboard
js
interface SortingPlanReducer
This interface defines the reducing process for the sorting plan, that is the creation of a new plan based upon a user input, like clicking on symbol or button (SingleArrowSortingRenderer).
SortingRenderer
Link copied to clipboard
js
interface SortingRenderer
This interface bundles the methods to render the appropriate UI elements for the sorting actions within the header column of a table.
State
Link copied to clipboard
js
data class State(order: List<String>, sortingPlan: SortingPlan)
Central class for the dynamic aspects of the column configuration, so the actual state of column meta data in contrast to the row data!
StatefulItem
Link copied to clipboard
js
data class StatefulItem<T>(item: T, selected: Boolean, sorting: Sorting)
This class is meant for combining the data of one row with the current state specific properties like the sorting strategy or whether the row is currently selected.
StateStore
Link copied to clipboard
js
class StateStore<T, I>(sortingPlanReducer: SortingPlanReducer) : RootStore<State>
Store for the column configuration that holds a State object.
TogglingSortingPlanReducer
Link copied to clipboard
js
class TogglingSortingPlanReducer : SortingPlanReducer
This SortingPlanReducer implementation defines the logic to generate a plan with at most one column for sorting.

Functions

columnIdProvider
Link copied to clipboard
js
fun <T> columnIdProvider(param: Pair<Column<T>, IndexedValue<StatefulItem<T>>>): Int
This helper function determines for the inner rendering loop of the cells (td), which cell really needs to be re-rendered!