This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
A table with the ability to resize, reorder, and hide columns.
version 1.0.3
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.3
Committed At 2017-10-03 16:38:45 UTC
jystic/elm-font-awesome 2.0.1 <= v < 3.0.0 2.0.1
jinjor/elm-contextmenu 1.0.3 <= v < 2.0.0 1.1.0
elm-lang/mouse 1.0.1 <= v < 2.0.0 1.0.1
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.0.0 <= v < 6.0.0 5.1.1

Modules

README

elm-fancy-table

elm package install tlentz/elm-fancy-table

Description

An elm package for an html table that has additional features such as:

  • Resizing columns
  • Reordering columns
  • Hiding/Showing columns

Usage

The FancyTable.init function creates a default Fancy Table which an empty list of headers, an empty list of rows, and both resizeColumns and reorderColumns set to True.

    tableData =
        [ ["Red 1", "Blue 1", "Yellow 1"]
        , ["Red 2", "Blue 2", "Yellow 2"]
        , ["Red 3", "Blue 3", "Yellow 3"]
        ]
    myTable =
        FancyTable.init
            |> setSettings { resizeColumns = True, reorderColumns = False, hideColumns = True }
            |> setTableHeadersFromStrings defaultHeaderSettings ["Red", "Blue", "Yellow"]
            |> setTableRows (List.map (\d -> getTableRowFromStrings d) tableData)

Because the Fancy Table uses mouse movements for resizing and reording columns, it requires subscriptions. After initialization, handle the subscriptions.

subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.batch
    [ Sub.map FancyTableMsg <| FancyTable.subscriptions model.fancyTable
    ]

Handle the updates from the subscription in your update function

update : Msg -> Model -> ( Model, Cmd Msg )
update msg ({ fancyTable } as model) =
    case msg of
        FancyTableMsg msg ->
            let
                ( updatedModel, cmd ) =
                    FancyTable.update fancyTable msg
            in
                ( Model updatedModel, Cmd.map FancyTableMsg cmd )

To view the table, just call the view function

Html.map FancyTableMsg <| FancyTable.view model.fancyTable

Example

Checkout the example to test it or see how to wire it up.

See it in action!