This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.1
Easily display a table with sortable columns and allow external message on sort
version 1.0.0
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.0
Committed At 2018-05-08 01:35:37 UTC
elm-lang/svg 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1

Modules

README

SortableTable

This package is very similar to (and draws most of the insipiration from) Evan's Sortable Table package. However this package allows you to perform an external command on sort/re-sort as necessary. While Evan's sortable table is does the sorting for you with the data in memory, this will not work for a sufficienty large dataset that requires pagination from the server.

The SortableTable's view function takes a table config and SortState that again is very simlar to Evan's with a few tweaks. For instance, the Config requires a (msg -> SortState) function that describes a Msg that will be fired containing the new SortState that will allow you to perform additional request etc. as needed.

Please take a look at the documentation in the SortableTable module. As well as the small example. Additionaly there is a small example below.

Installation

elm-package install volumeint/sortable-table

Usage


import SortableTable as Table

-- Message

type Msg
  = ReSort Table.SortState


-- Model

  { sortState : Table.SortState
  , cities : List { city : String, country : String, population : Int }
  }


-- Config

{-| Data records look like this - so defining columns below 

  { city : String
  , country : String
  , population : Int
  }

-}

tableConfig : Table.Config Msg
tableConfig = 
  Table.createConfig
    [ Table.defineColumn "City" (text << .city) [] 
    , Table.defineColumn "Country" (text << .country) []
    , Table.defineColumn "Population" (text << toString << .population) []
      |> Table.makeSortable ReSort
    ]
    Table.defaultCusomizations


-- View

view : Model -> Html Msg
view { sortState, citites } =
  div [] [ Table.view tableConfig sortState cities ]