Table

A customizable ELM Bootstrap Table component.

For usage example, see here.

Model

type alias State =

{ sortedColumn : ( ColumnName, SortStatus )

, selected : Dict String Bool

, search : String

, hidedColumns : List ColumnName

}

State for internal messages.

type Row a

= Row a

Embed the data with row states.

getSelectedRows : (a -> String) -> State -> List (Row a) -> List a

Return the selected rows of table.

initState : State

Initialize the table state.

initRows : (a -> String) -> List a -> ( State, List (Row a) )

Helper to create multiple rows.

type alias RowId =

String

hideColumn : String -> State -> State

selectAllRows : State -> Bool -> State

sortRows : (a -> String) -> List (Row a) -> List (Row a)

sortRowsFromStatus : SortStatus -> (a -> String) -> List (Row a) -> List (Row a)

Configuration

type alias Config a msg =

{ pipe : State -> msg

, getRowId : a -> String

, columns : List (Column a msg)

, toolbar : ToolbarConfig msg

, footerView : Html msg

}

Configuration of table.

Table --- msg ---> Parent ( pipe )

type Column a msg

= Column (ColumnInternal a msg)

Column configuration.

type alias ColumnInternal a msg =

{ name : String

, getValue : a -> String

, headerView : (State -> msg) -> State -> List (Html msg)

, cellView : a -> (State -> msg) -> State -> List (Html msg)

, width : String

, sortable : Bool

, indexable : Bool

, hidable : Bool

}

sortable : could be sortable indexable : indexable for search filtering hidable : selectColumns options must be true

type SortStatus

= StandBy

| Descending

| Ascending

Sorting column state.

type alias ToolbarConfig msg =

{ search : Bool

, selectColumns : Bool

, actions : List (ActionConfig msg)

}

Toolbar configuration.

type ActionConfig msg

= ActionConfig (State -> Html msg)

Action configuration in the toolbar.

nextSortStatus : SortStatus -> SortStatus

Get the next sort status

  ↕ --> ↓ --> ↑
        ^-----|

defaultFooter : Html msg

Default footer of table.

checkboxColumn : (a -> String) -> Column a msg

Column with checkbox to select multiple rows.

invisibleColumn : String -> (a -> String) -> Column a msg

Invisible column.

stringColumn : String -> (a -> String) -> Column a msg

Standard column configuration to render the string data.

stringWidthColumn : String -> String -> (a -> String) -> Column a msg

Similar to stringColumn but with a custom width.

customColumn : String -> String -> (a -> b) -> Html msg -> (b -> Html msg) -> Column a msg

Column width custom header and cell rendering.

actionDefault : msg -> String -> String -> String -> ActionConfig msg

Helper to create an action configuration with the color of Bootstrap (primary, success, danger, ...) and the icon of font-awesome (plus, minus, ...).

Example:

actionDefault "success" "lock"

type alias ColumnName =

String

checkRowState : String -> State -> Bool -> State

showColumn : String -> State -> State

View

view : Config a msg -> State -> List (Row a) -> Html msg

Main table view.

toolbarView : Config a msg -> State -> Html msg

toolbarViewSearch : (State -> msg) -> State -> Html msg

viewCellCheckbox : (a -> String) -> a -> (State -> msg) -> State -> List (Html msg)

viewCellInvisible : a -> (State -> msg) -> State -> List (Html msg)

viewCellText : (a -> String) -> a -> (State -> msg) -> State -> List (Html msg)

viewColumnCheckbox : (State -> msg) -> State -> List (Html msg)

viewColumnHide : (State -> msg) -> State -> List (Html msg)

viewColumnString : String -> (State -> msg) -> State -> List (Html msg)

viewDefaultAction : String -> String -> String -> msg -> State -> Html msg

viewSelectColumns : List (Column a msg) -> (State -> msg) -> State -> Html msg

viewSelectColumnsItem : ColumnInternal a msg -> (State -> msg) -> State -> Html msg

viewTable : Config a msg -> State -> List (Row a) -> Html msg

viewTableBody :

List (ColumnInternal a msg)

-> (a -> String)

-> (State -> msg)

-> State

-> List (Row a)

-> Html msg

viewTableBodyRow :

List (ColumnInternal a msg)

-> (a -> String)

-> (State -> msg)

-> State

-> Row a

-> Html msg

viewTableHead : List (ColumnInternal a msg) -> (State -> msg) -> State -> Html msg

viewTableHeadItemSort : SortStatus -> ColumnName -> (State -> msg) -> State -> Html msg

Other

maybe : Bool -> a -> Maybe a

onClickEvent : msg -> Attribute msg

optional : Bool -> Html msg -> Html msg

sort : List (Column a msg) -> State -> List (Row a) -> List (Row a)

Sort the rows.

sortLink : String -> String -> ColumnName -> (State -> msg) -> State -> Html msg

Modules

Table