components/dev.fritz2.components.datatable

Package dev.fritz2.components.datatable

Types

data class Column<T>( val id: String, val lens: Lens<T, String>? = null, val title: String = "", val minWidth: Property? = null, val maxWidth: Property? = null, val hidden: Boolean = false, val position: Int = 0, val sorting: Sorting = Sorting.NONE, val sortBy: Comparator<T>? = null, val styling: BasicParams.(value: IndexedValue<StatefulItem<T>>) -> Unit = { _ -> }, val content: Td.(value: IndexedValue<StatefulItem<T>>, cellStore: Store<String>?, rowStore: SubStore<List<T>, T>) -> Unit, val headerStyling: BasicParams.(sorting: Sorting) -> Unit = {}, val headerContent: Div.(column: Column<T>) -> Unit)

Main class to define the representation of the data class `T` of one table column. This class mainly is the result of the DSL configuration of the datatable.

ColumnIdSorting

data class ColumnIdSorting(val id: String?, val strategy: Sorting = Sorting.NONE)

Wrapping class to group the id of a Column with the sorting strategy. This is the base for the type `T` independent SortingPlan which itself is necessary for the internalState.

ColumnsContext

class ColumnsContext<T>

This context class manages the configuration and defines the DSL for the overall declaration of the data table's columns.

ColumnSortingPlan

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:

SortingPlanReducer: create a plan of columns to be sorted in a specific direction based upon the former plan and the triggering user action
RowSorter: do the actual sorting work based upon the above plan (slightly transformed to typed column instead of plain ids)
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

open class DataTableComponent<T, I>(val dataStore: RootStore<List<T>>, rowIdProvider: (T) -> I) : Component<Unit> , DataTableContext<T, I>

This class implements the core of the data table.

DataTableContext

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

class DefaultContext<T, I>(rowIdProvider: (T) -> I) : DataTableContext<T, I>

EventsContext

class EventsContext<T, I>(element: Tag<HTMLElement>, rowSelectionStore: RowSelectionStore<T, I>) : EventContext<HTMLElement>

This context class defines the event context of the data table.

HeaderContext

class HeaderContext

This context class integrates the configuration and the DSL for the common header aspects.

NoSelection

class NoSelection<T, I> : SelectionStrategy<T, I>

Selection strategy for disabling the selection at all.

OneColumnSorter

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

class OptionsContext<T>

This context class integrates the configuration and the DSL for some general and optional properties.

RowSelectionStore

class RowSelectionStore<T, I>(rowIdProvider: (T) -> I) : RootStore<List<T>>

This store manages the selected rows of the data table. It does not manage the state of the columns (configuration meta data like sorting, order and so on); this is done by StateStore!

RowSorter

interface RowSorter<T>

This interface defines the actual sorting action.

SelectionByCheckBox

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

class SelectionByClick<T, I> : SelectionStrategy<T, I>

This selection strategy enables the selection by clicking onto a row of the table.

SelectionContext

class SelectionContext<T, I>

This context class configures the selection capabilities of the data table.

SelectionMode

enum SelectionMode : Enum<SelectionMode>

Representation of the selection possibilities.

SelectionStrategy

interface SelectionStrategy<T, I>

This interface defines a strategy type in order to implement different selection mechanisms.

SingleArrowSortingRenderer

class SingleArrowSortingRenderer : SortingRenderer

This implementation of a SortingRenderer creates an icon based UI for choosing the sorting of a data table.

Sorting

enum Sorting : Enum<Sorting>

Representation of the different sorting status.

SortingPlan

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:

SortingPlanReducer: create a plan of columns to be sorted in a specific direction based upon the former plan and the triggering user action
RowSorter: do the actual sorting work based upon the above plan (slightly transformed to typed column instead of plain ids)
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

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

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

data class State(val order: List<String>, val 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

data class StatefulItem<T>( val item: T, val selected: Boolean, val 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

class StateStore<T, I>(sortingPlanReducer: SortingPlanReducer) : RootStore<State>

Store for the column configuration that holds a State object. It does not manage the actual data of the table; this is done by RowSelectionStore!

TogglingSortingPlanReducer

class TogglingSortingPlanReducer : SortingPlanReducer

This SortingPlanReducer implementation defines the logic to generate a plan with at most one column for sorting. This perfectly matches with the OneColumnSorter implementation for doing the sorting.

Functions

columnIdProvider

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! Only changes to the column itself, that is its String representation or its state, requires such a new rendering process.