Upgrade to 0.19
This commit is contained in:
		
							
								
								
									
										17
									
								
								elm.json
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										17
									
								
								elm.json
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,17 @@
 | 
			
		||||
{
 | 
			
		||||
    "type": "package",
 | 
			
		||||
    "name": "NoRedInk/elm-sortable-table",
 | 
			
		||||
    "summary": "Sortable tables for whatever data you want to display.",
 | 
			
		||||
    "license": "BSD-3-Clause",
 | 
			
		||||
    "version": "1.0.0",
 | 
			
		||||
    "exposed-modules": [
 | 
			
		||||
        "Table"
 | 
			
		||||
    ],
 | 
			
		||||
    "elm-version": "0.19.0 <= v < 0.20.0",
 | 
			
		||||
    "dependencies": {
 | 
			
		||||
        "elm/core": "1.0.0 <= v < 2.0.0",
 | 
			
		||||
        "elm/html": "1.0.0 <= v < 2.0.0",
 | 
			
		||||
        "elm/json": "1.0.0 <= v < 2.0.0"
 | 
			
		||||
    },
 | 
			
		||||
    "test-dependencies": {}
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										514
									
								
								src/Table.elm
									
									
									
									
									
								
							
							
						
						
									
										514
									
								
								src/Table.elm
									
									
									
									
									
								
							@@ -1,34 +1,35 @@
 | 
			
		||||
module Table exposing
 | 
			
		||||
  ( view
 | 
			
		||||
  , config, stringColumn, intColumn, floatColumn
 | 
			
		||||
  , State, initialSort
 | 
			
		||||
  , Column, customColumn, veryCustomColumn
 | 
			
		||||
  , Sorter, unsortable, increasingBy, decreasingBy
 | 
			
		||||
  , increasingOrDecreasingBy, decreasingOrIncreasingBy
 | 
			
		||||
  , Config, customConfig
 | 
			
		||||
  , Customizations, HtmlDetails, Status(..), defaultCustomizations
 | 
			
		||||
  )
 | 
			
		||||
    ( view
 | 
			
		||||
    , config, stringColumn, intColumn, floatColumn
 | 
			
		||||
    , State, initialSort
 | 
			
		||||
    , Column, customColumn, veryCustomColumn
 | 
			
		||||
    , Sorter, unsortable, increasingBy, decreasingBy
 | 
			
		||||
    , increasingOrDecreasingBy, decreasingOrIncreasingBy
 | 
			
		||||
    , Config, customConfig, Customizations, HtmlDetails, Status(..)
 | 
			
		||||
    , defaultCustomizations
 | 
			
		||||
    )
 | 
			
		||||
 | 
			
		||||
{-|
 | 
			
		||||
 | 
			
		||||
This library helps you create sortable tables. The crucial feature is that it
 | 
			
		||||
{-| This library helps you create sortable tables. The crucial feature is that it
 | 
			
		||||
lets you own your data separately and keep it in whatever format is best for
 | 
			
		||||
you. This way you are free to change your data without worrying about the table
 | 
			
		||||
“getting out of sync” with the data. Having a single source of
 | 
			
		||||
truth is pretty great!
 | 
			
		||||
 | 
			
		||||
I recommend checking out the [examples][] to get a feel for how it works.
 | 
			
		||||
I recommend checking out the [examples] to get a feel for how it works.
 | 
			
		||||
 | 
			
		||||
[examples]: https://github.com/evancz/elm-sortable-table/tree/master/examples
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
# View
 | 
			
		||||
 | 
			
		||||
@docs view
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
# Configuration
 | 
			
		||||
 | 
			
		||||
@docs config, stringColumn, intColumn, floatColumn
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
# State
 | 
			
		||||
 | 
			
		||||
@docs State, initialSort
 | 
			
		||||
@@ -41,19 +42,22 @@ point are a bunch of ways to customize your table further. If it does not
 | 
			
		||||
provide what you need, you may just want to write a custom table yourself. It
 | 
			
		||||
is not that crazy.
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## Custom Columns
 | 
			
		||||
 | 
			
		||||
@docs Column, customColumn, veryCustomColumn,
 | 
			
		||||
  Sorter, unsortable, increasingBy, decreasingBy,
 | 
			
		||||
  increasingOrDecreasingBy, decreasingOrIncreasingBy
 | 
			
		||||
@docs Column, customColumn, veryCustomColumn
 | 
			
		||||
@docs Sorter, unsortable, increasingBy, decreasingBy
 | 
			
		||||
@docs increasingOrDecreasingBy, decreasingOrIncreasingBy
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## Custom Tables
 | 
			
		||||
 | 
			
		||||
@docs Config, customConfig, Customizations, HtmlDetails, Status,
 | 
			
		||||
  defaultCustomizations
 | 
			
		||||
@docs Config, customConfig, Customizations, HtmlDetails, Status
 | 
			
		||||
@docs defaultCustomizations
 | 
			
		||||
 | 
			
		||||
-}
 | 
			
		||||
 | 
			
		||||
import Html exposing (Html, Attribute)
 | 
			
		||||
import Html exposing (Attribute, Html)
 | 
			
		||||
import Html.Attributes as Attr
 | 
			
		||||
import Html.Events as E
 | 
			
		||||
import Html.Keyed as Keyed
 | 
			
		||||
@@ -67,8 +71,8 @@ import Json.Decode as Json
 | 
			
		||||
 | 
			
		||||
{-| Tracks which column to sort by.
 | 
			
		||||
-}
 | 
			
		||||
type State =
 | 
			
		||||
  State String Bool
 | 
			
		||||
type State
 | 
			
		||||
    = State String Bool
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-| Create a table state. By providing a column name, you determine which
 | 
			
		||||
@@ -78,10 +82,11 @@ yachts to be sorted by length by default, you might say:
 | 
			
		||||
    import Table
 | 
			
		||||
 | 
			
		||||
    Table.initialSort "Length"
 | 
			
		||||
 | 
			
		||||
-}
 | 
			
		||||
initialSort : String -> State
 | 
			
		||||
initialSort header =
 | 
			
		||||
  State header False
 | 
			
		||||
    State header False
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@@ -90,16 +95,17 @@ initialSort header =
 | 
			
		||||
 | 
			
		||||
{-| Configuration for your table, describing your columns.
 | 
			
		||||
 | 
			
		||||
**Note:** Your `Config` should *never* be held in your model.
 | 
			
		||||
**Note:** Your `Config` should _never_ be held in your model.
 | 
			
		||||
It should only appear in `view` code.
 | 
			
		||||
 | 
			
		||||
-}
 | 
			
		||||
type Config data msg =
 | 
			
		||||
  Config
 | 
			
		||||
    { toId : data -> String
 | 
			
		||||
    , toMsg : State -> msg
 | 
			
		||||
    , columns : List (ColumnData data msg)
 | 
			
		||||
    , customizations : Customizations data msg
 | 
			
		||||
    }
 | 
			
		||||
type Config data msg
 | 
			
		||||
    = Config
 | 
			
		||||
        { toId : data -> String
 | 
			
		||||
        , toMsg : State -> msg
 | 
			
		||||
        , columns : List (ColumnData data msg)
 | 
			
		||||
        , customizations : Customizations data msg
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-| Create the `Config` for your `view` function. Everything you need to
 | 
			
		||||
@@ -126,46 +132,47 @@ have a column for name and age. We would create a `Config` like this:
 | 
			
		||||
You provide the following information in your table configuration:
 | 
			
		||||
 | 
			
		||||
  - `toId` — turn a `Person` into a unique ID. This lets us use
 | 
			
		||||
  [`Html.Keyed`][keyed] under the hood to make resorts faster.
 | 
			
		||||
    [`Html.Keyed`][keyed] under the hood to make resorts faster.
 | 
			
		||||
  - `columns` — specify some columns to show.
 | 
			
		||||
  - `toMsg` — a way to send new table states to your app as messages.
 | 
			
		||||
 | 
			
		||||
See the [examples][] to get a better feel for this!
 | 
			
		||||
See the [examples] to get a better feel for this!
 | 
			
		||||
 | 
			
		||||
[keyed]: http://package.elm-lang.org/packages/elm-lang/html/latest/Html-Keyed
 | 
			
		||||
[examples]: https://github.com/evancz/elm-sortable-table/tree/master/examples
 | 
			
		||||
 | 
			
		||||
-}
 | 
			
		||||
config
 | 
			
		||||
  : { toId : data -> String
 | 
			
		||||
config :
 | 
			
		||||
    { toId : data -> String
 | 
			
		||||
    , toMsg : State -> msg
 | 
			
		||||
    , columns : List (Column data msg)
 | 
			
		||||
    }
 | 
			
		||||
  -> Config data msg
 | 
			
		||||
    -> Config data msg
 | 
			
		||||
config { toId, toMsg, columns } =
 | 
			
		||||
  Config
 | 
			
		||||
    { toId = toId
 | 
			
		||||
    , toMsg = toMsg
 | 
			
		||||
    , columns = List.map (\(Column cData) -> cData) columns
 | 
			
		||||
    , customizations = defaultCustomizations
 | 
			
		||||
    }
 | 
			
		||||
    Config
 | 
			
		||||
        { toId = toId
 | 
			
		||||
        , toMsg = toMsg
 | 
			
		||||
        , columns = List.map (\(Column cData) -> cData) columns
 | 
			
		||||
        , customizations = defaultCustomizations
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-| Just like `config` but you can specify a bunch of table customizations.
 | 
			
		||||
-}
 | 
			
		||||
customConfig
 | 
			
		||||
  : { toId : data -> String
 | 
			
		||||
customConfig :
 | 
			
		||||
    { toId : data -> String
 | 
			
		||||
    , toMsg : State -> msg
 | 
			
		||||
    , columns : List (Column data msg)
 | 
			
		||||
    , customizations : Customizations data msg
 | 
			
		||||
    }
 | 
			
		||||
  -> Config data msg
 | 
			
		||||
    -> Config data msg
 | 
			
		||||
customConfig { toId, toMsg, columns, customizations } =
 | 
			
		||||
  Config
 | 
			
		||||
    { toId = toId
 | 
			
		||||
    , toMsg = toMsg
 | 
			
		||||
    , columns = List.map (\(Column cData) -> cData) columns
 | 
			
		||||
    , customizations = customizations
 | 
			
		||||
    }
 | 
			
		||||
    Config
 | 
			
		||||
        { toId = toId
 | 
			
		||||
        , toMsg = toMsg
 | 
			
		||||
        , columns = List.map (\(Column cData) -> cData) columns
 | 
			
		||||
        , customizations = customizations
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-| There are quite a lot of ways to customize the `<table>` tag. You can add
 | 
			
		||||
@@ -175,18 +182,19 @@ summaries of various columns. And maybe you want to put attributes on `<tbody>`
 | 
			
		||||
or on particular rows in the body. All these customizations are available to you.
 | 
			
		||||
 | 
			
		||||
**Note:** The level of craziness possible in `<thead>` and `<tfoot>` are so
 | 
			
		||||
high that I could not see how to provide the full functionality *and* make it
 | 
			
		||||
high that I could not see how to provide the full functionality _and_ make it
 | 
			
		||||
impossible to do bad stuff. So just be aware of that, and share any stories
 | 
			
		||||
you have. Stories make it possible to design better!
 | 
			
		||||
 | 
			
		||||
-}
 | 
			
		||||
type alias Customizations data msg =
 | 
			
		||||
  { tableAttrs : List (Attribute msg)
 | 
			
		||||
  , caption : Maybe (HtmlDetails msg)
 | 
			
		||||
  , thead : List (String, Status, Attribute msg) -> HtmlDetails msg
 | 
			
		||||
  , tfoot : Maybe (HtmlDetails msg)
 | 
			
		||||
  , tbodyAttrs : List (Attribute msg)
 | 
			
		||||
  , rowAttrs : data -> List (Attribute msg)
 | 
			
		||||
  }
 | 
			
		||||
    { tableAttrs : List (Attribute msg)
 | 
			
		||||
    , caption : Maybe (HtmlDetails msg)
 | 
			
		||||
    , thead : List ( String, Status, Attribute msg ) -> HtmlDetails msg
 | 
			
		||||
    , tfoot : Maybe (HtmlDetails msg)
 | 
			
		||||
    , tbodyAttrs : List (Attribute msg)
 | 
			
		||||
    , rowAttrs : data -> List (Attribute msg)
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-| Sometimes you must use a `<td>` tag, but the attributes and children are up
 | 
			
		||||
@@ -194,68 +202,78 @@ to you. This type lets you specify all the details of an HTML node except the
 | 
			
		||||
tag name.
 | 
			
		||||
-}
 | 
			
		||||
type alias HtmlDetails msg =
 | 
			
		||||
  { attributes : List (Attribute msg)
 | 
			
		||||
  , children : List (Html msg)
 | 
			
		||||
  }
 | 
			
		||||
    { attributes : List (Attribute msg)
 | 
			
		||||
    , children : List (Html msg)
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-| The customizations used in `config` by default.
 | 
			
		||||
-}
 | 
			
		||||
defaultCustomizations : Customizations data msg
 | 
			
		||||
defaultCustomizations =
 | 
			
		||||
  { tableAttrs = []
 | 
			
		||||
  , caption = Nothing
 | 
			
		||||
  , thead = simpleThead
 | 
			
		||||
  , tfoot = Nothing
 | 
			
		||||
  , tbodyAttrs = []
 | 
			
		||||
  , rowAttrs = simpleRowAttrs
 | 
			
		||||
  }
 | 
			
		||||
    { tableAttrs = []
 | 
			
		||||
    , caption = Nothing
 | 
			
		||||
    , thead = simpleThead
 | 
			
		||||
    , tfoot = Nothing
 | 
			
		||||
    , tbodyAttrs = []
 | 
			
		||||
    , rowAttrs = simpleRowAttrs
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
simpleThead : List (String, Status, Attribute msg) -> HtmlDetails msg
 | 
			
		||||
simpleThead : List ( String, Status, Attribute msg ) -> HtmlDetails msg
 | 
			
		||||
simpleThead headers =
 | 
			
		||||
  HtmlDetails [] (List.map simpleTheadHelp headers)
 | 
			
		||||
    HtmlDetails [] (List.map simpleTheadHelp headers)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
simpleTheadHelp : ( String, Status, Attribute msg ) -> Html msg
 | 
			
		||||
simpleTheadHelp (name, status, onClick) =
 | 
			
		||||
  let
 | 
			
		||||
    content =
 | 
			
		||||
      case status of
 | 
			
		||||
        Unsortable ->
 | 
			
		||||
          [ Html.text name ]
 | 
			
		||||
simpleTheadHelp ( name, status, onClick_ ) =
 | 
			
		||||
    let
 | 
			
		||||
        content =
 | 
			
		||||
            case status of
 | 
			
		||||
                Unsortable ->
 | 
			
		||||
                    [ Html.text name ]
 | 
			
		||||
 | 
			
		||||
        Sortable selected ->
 | 
			
		||||
          [ Html.text name
 | 
			
		||||
          , if selected then darkGrey "↓" else lightGrey "↓"
 | 
			
		||||
          ]
 | 
			
		||||
                Sortable selected ->
 | 
			
		||||
                    [ Html.text name
 | 
			
		||||
                    , if selected then
 | 
			
		||||
                        darkGrey "↓"
 | 
			
		||||
 | 
			
		||||
        Reversible Nothing ->
 | 
			
		||||
          [ Html.text name
 | 
			
		||||
          , lightGrey "↕"
 | 
			
		||||
          ]
 | 
			
		||||
                      else
 | 
			
		||||
                        lightGrey "↓"
 | 
			
		||||
                    ]
 | 
			
		||||
 | 
			
		||||
        Reversible (Just isReversed) ->
 | 
			
		||||
          [ Html.text name
 | 
			
		||||
          , darkGrey (if isReversed then "↑" else "↓")
 | 
			
		||||
          ]
 | 
			
		||||
  in
 | 
			
		||||
    Html.th [ onClick ] content
 | 
			
		||||
                Reversible Nothing ->
 | 
			
		||||
                    [ Html.text name
 | 
			
		||||
                    , lightGrey "↕"
 | 
			
		||||
                    ]
 | 
			
		||||
 | 
			
		||||
                Reversible (Just isReversed) ->
 | 
			
		||||
                    [ Html.text name
 | 
			
		||||
                    , darkGrey
 | 
			
		||||
                        (if isReversed then
 | 
			
		||||
                            "↑"
 | 
			
		||||
 | 
			
		||||
                         else
 | 
			
		||||
                            "↓"
 | 
			
		||||
                        )
 | 
			
		||||
                    ]
 | 
			
		||||
    in
 | 
			
		||||
    Html.th [ onClick_ ] content
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
darkGrey : String -> Html msg
 | 
			
		||||
darkGrey symbol =
 | 
			
		||||
  Html.span [ Attr.style [("color", "#555")] ] [ Html.text (" " ++ symbol) ]
 | 
			
		||||
    Html.span [ Attr.style "color" "#555" ] [ Html.text (" " ++ symbol) ]
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
lightGrey : String -> Html msg
 | 
			
		||||
lightGrey symbol =
 | 
			
		||||
  Html.span [ Attr.style [("color", "#ccc")] ] [ Html.text (" " ++ symbol) ]
 | 
			
		||||
    Html.span [ Attr.style "color" "#ccc" ] [ Html.text (" " ++ symbol) ]
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
simpleRowAttrs : data -> List (Attribute msg)
 | 
			
		||||
simpleRowAttrs _ =
 | 
			
		||||
  []
 | 
			
		||||
    []
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-| The status of a particular column, for use in the `thead` field of your
 | 
			
		||||
@@ -272,11 +290,12 @@ simpleRowAttrs _ =
 | 
			
		||||
    is sorted.
 | 
			
		||||
 | 
			
		||||
This information lets you do custom header decorations for each scenario.
 | 
			
		||||
 | 
			
		||||
-}
 | 
			
		||||
type Status
 | 
			
		||||
  = Unsortable
 | 
			
		||||
  | Sortable Bool
 | 
			
		||||
  | Reversible (Maybe Bool)
 | 
			
		||||
    = Unsortable
 | 
			
		||||
    | Sortable Bool
 | 
			
		||||
    | Reversible (Maybe Bool)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@@ -285,50 +304,50 @@ type Status
 | 
			
		||||
 | 
			
		||||
{-| Describes how to turn `data` into a column in your table.
 | 
			
		||||
-}
 | 
			
		||||
type Column data msg =
 | 
			
		||||
  Column (ColumnData data msg)
 | 
			
		||||
type Column data msg
 | 
			
		||||
    = Column (ColumnData data msg)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
type alias ColumnData data msg =
 | 
			
		||||
  { name : String
 | 
			
		||||
  , viewData : data -> HtmlDetails msg
 | 
			
		||||
  , sorter : Sorter data
 | 
			
		||||
  }
 | 
			
		||||
    { name : String
 | 
			
		||||
    , viewData : data -> HtmlDetails msg
 | 
			
		||||
    , sorter : Sorter data
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-|-}
 | 
			
		||||
{-| -}
 | 
			
		||||
stringColumn : String -> (data -> String) -> Column data msg
 | 
			
		||||
stringColumn name toStr =
 | 
			
		||||
  Column
 | 
			
		||||
    { name = name
 | 
			
		||||
    , viewData = textDetails << toStr
 | 
			
		||||
    , sorter = increasingOrDecreasingBy toStr
 | 
			
		||||
    }
 | 
			
		||||
    Column
 | 
			
		||||
        { name = name
 | 
			
		||||
        , viewData = textDetails << toStr
 | 
			
		||||
        , sorter = increasingOrDecreasingBy toStr
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-|-}
 | 
			
		||||
{-| -}
 | 
			
		||||
intColumn : String -> (data -> Int) -> Column data msg
 | 
			
		||||
intColumn name toInt =
 | 
			
		||||
  Column
 | 
			
		||||
    { name = name
 | 
			
		||||
    , viewData = textDetails << toString << toInt
 | 
			
		||||
    , sorter = increasingOrDecreasingBy toInt
 | 
			
		||||
    }
 | 
			
		||||
    Column
 | 
			
		||||
        { name = name
 | 
			
		||||
        , viewData = textDetails << String.fromInt << toInt
 | 
			
		||||
        , sorter = increasingOrDecreasingBy toInt
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-|-}
 | 
			
		||||
{-| -}
 | 
			
		||||
floatColumn : String -> (data -> Float) -> Column data msg
 | 
			
		||||
floatColumn name toFloat =
 | 
			
		||||
  Column
 | 
			
		||||
    { name = name
 | 
			
		||||
    , viewData = textDetails << toString << toFloat
 | 
			
		||||
    , sorter = increasingOrDecreasingBy toFloat
 | 
			
		||||
    }
 | 
			
		||||
    Column
 | 
			
		||||
        { name = name
 | 
			
		||||
        , viewData = textDetails << String.fromFloat << toFloat
 | 
			
		||||
        , sorter = increasingOrDecreasingBy toFloat
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
textDetails : String -> HtmlDetails msg
 | 
			
		||||
textDetails str =
 | 
			
		||||
  HtmlDetails [] [ Html.text str ]
 | 
			
		||||
    HtmlDetails [] [ Html.text str ]
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-| Perhaps the basic columns are not quite what you want. Maybe you want to
 | 
			
		||||
@@ -339,66 +358,68 @@ quite cut it. You could define a custom column like this:
 | 
			
		||||
 | 
			
		||||
    dollarColumn : String -> (data -> Float) -> Column data msg
 | 
			
		||||
    dollarColumn name toDollars =
 | 
			
		||||
      Table.customColumn
 | 
			
		||||
        { name = name
 | 
			
		||||
        , viewData = \data -> viewDollars (toDollars data)
 | 
			
		||||
        , sorter = Table.decreasingBy toDollars
 | 
			
		||||
        }
 | 
			
		||||
        Table.customColumn
 | 
			
		||||
            { name = name
 | 
			
		||||
            , viewData = \data -> viewDollars (toDollars data)
 | 
			
		||||
            , sorter = Table.decreasingBy toDollars
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
    viewDollars : Float -> String
 | 
			
		||||
    viewDollars dollars =
 | 
			
		||||
      "$" ++ toString (round (dollars / 1000)) ++ "k"
 | 
			
		||||
        "$" ++ toString (round (dollars / 1000)) ++ "k"
 | 
			
		||||
 | 
			
		||||
The `viewData` field means we will displays the number `12345.67` as `$12k`.
 | 
			
		||||
 | 
			
		||||
The `sorter` field specifies how the column can be sorted. In `dollarColumn` we
 | 
			
		||||
are saying that it can *only* be shown from highest-to-lowest monetary value.
 | 
			
		||||
are saying that it can _only_ be shown from highest-to-lowest monetary value.
 | 
			
		||||
More about sorters soon!
 | 
			
		||||
 | 
			
		||||
-}
 | 
			
		||||
customColumn
 | 
			
		||||
  : { name : String
 | 
			
		||||
customColumn :
 | 
			
		||||
    { name : String
 | 
			
		||||
    , viewData : data -> String
 | 
			
		||||
    , sorter : Sorter data
 | 
			
		||||
    }
 | 
			
		||||
  -> Column data msg
 | 
			
		||||
    -> Column data msg
 | 
			
		||||
customColumn { name, viewData, sorter } =
 | 
			
		||||
  Column <|
 | 
			
		||||
    ColumnData name (textDetails << viewData) sorter
 | 
			
		||||
    Column <|
 | 
			
		||||
        ColumnData name (textDetails << viewData) sorter
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-| It is *possible* that you want something crazier than `customColumn`. In
 | 
			
		||||
{-| It is _possible_ that you want something crazier than `customColumn`. In
 | 
			
		||||
that unlikely scenario, this function lets you have full control over the
 | 
			
		||||
attributes and children of each `<td>` cell in this column.
 | 
			
		||||
 | 
			
		||||
So maybe you want to a dollars column, and the dollar signs should be green.
 | 
			
		||||
 | 
			
		||||
    import Html exposing (Html, Attribute, span, text)
 | 
			
		||||
    import Html exposing (Attribute, Html, span, text)
 | 
			
		||||
    import Html.Attributes exposing (style)
 | 
			
		||||
    import Table
 | 
			
		||||
 | 
			
		||||
    dollarColumn : String -> (data -> Float) -> Column data msg
 | 
			
		||||
    dollarColumn name toDollars =
 | 
			
		||||
      Table.veryCustomColumn
 | 
			
		||||
        { name = name
 | 
			
		||||
        , viewData = \data -> viewDollars (toDollars data)
 | 
			
		||||
        , sorter = Table.decreasingBy toDollars
 | 
			
		||||
        }
 | 
			
		||||
        Table.veryCustomColumn
 | 
			
		||||
            { name = name
 | 
			
		||||
            , viewData = \data -> viewDollars (toDollars data)
 | 
			
		||||
            , sorter = Table.decreasingBy toDollars
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
    viewDollars : Float -> Table.HtmlDetails msg
 | 
			
		||||
    viewDollars dollars =
 | 
			
		||||
      Table.HtmlDetails []
 | 
			
		||||
        [ span [ style [("color","green")] ] [ text "$" ]
 | 
			
		||||
        , text (toString (round (dollars / 1000)) ++ "k")
 | 
			
		||||
        ]
 | 
			
		||||
        Table.HtmlDetails []
 | 
			
		||||
            [ span [ style [ ( "color", "green" ) ] ] [ text "$" ]
 | 
			
		||||
            , text (toString (round (dollars / 1000)) ++ "k")
 | 
			
		||||
            ]
 | 
			
		||||
 | 
			
		||||
-}
 | 
			
		||||
veryCustomColumn
 | 
			
		||||
  : { name : String
 | 
			
		||||
veryCustomColumn :
 | 
			
		||||
    { name : String
 | 
			
		||||
    , viewData : data -> HtmlDetails msg
 | 
			
		||||
    , sorter : Sorter data
 | 
			
		||||
    }
 | 
			
		||||
  -> Column data msg
 | 
			
		||||
    -> Column data msg
 | 
			
		||||
veryCustomColumn =
 | 
			
		||||
  Column
 | 
			
		||||
    Column
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@@ -414,89 +435,93 @@ for the table belongs in your `view` code. I very strongly recommend against
 | 
			
		||||
putting `Config` in your model. Describe any potential table configurations
 | 
			
		||||
statically, and look for a different library if you need something crazier than
 | 
			
		||||
that.
 | 
			
		||||
 | 
			
		||||
-}
 | 
			
		||||
view : Config data msg -> State -> List data -> Html msg
 | 
			
		||||
view (Config { toId, toMsg, columns, customizations }) state data =
 | 
			
		||||
  let
 | 
			
		||||
    sortedData =
 | 
			
		||||
      sort state columns data
 | 
			
		||||
    let
 | 
			
		||||
        sortedData =
 | 
			
		||||
            sort state columns data
 | 
			
		||||
 | 
			
		||||
    theadDetails =
 | 
			
		||||
      customizations.thead (List.map (toHeaderInfo state toMsg) columns)
 | 
			
		||||
        theadDetails =
 | 
			
		||||
            customizations.thead (List.map (toHeaderInfo state toMsg) columns)
 | 
			
		||||
 | 
			
		||||
    thead =
 | 
			
		||||
      Html.thead theadDetails.attributes theadDetails.children
 | 
			
		||||
        thead =
 | 
			
		||||
            Html.thead theadDetails.attributes theadDetails.children
 | 
			
		||||
 | 
			
		||||
    tbody =
 | 
			
		||||
      Keyed.node "tbody" customizations.tbodyAttrs <|
 | 
			
		||||
        List.map (viewRow toId columns customizations.rowAttrs) sortedData
 | 
			
		||||
        tbody =
 | 
			
		||||
            Keyed.node "tbody" customizations.tbodyAttrs <|
 | 
			
		||||
                List.map (viewRow toId columns customizations.rowAttrs) sortedData
 | 
			
		||||
 | 
			
		||||
    withFoot =
 | 
			
		||||
      case customizations.tfoot of
 | 
			
		||||
        Nothing ->
 | 
			
		||||
          tbody :: []
 | 
			
		||||
        withFoot =
 | 
			
		||||
            case customizations.tfoot of
 | 
			
		||||
                Nothing ->
 | 
			
		||||
                    tbody :: []
 | 
			
		||||
 | 
			
		||||
        Just { attributes, children } ->
 | 
			
		||||
          Html.tfoot attributes children :: tbody :: []
 | 
			
		||||
  in
 | 
			
		||||
                Just { attributes, children } ->
 | 
			
		||||
                    Html.tfoot attributes children :: tbody :: []
 | 
			
		||||
    in
 | 
			
		||||
    Html.table customizations.tableAttrs <|
 | 
			
		||||
      case customizations.caption of
 | 
			
		||||
        Nothing ->
 | 
			
		||||
          thead :: withFoot
 | 
			
		||||
        case customizations.caption of
 | 
			
		||||
            Nothing ->
 | 
			
		||||
                thead :: withFoot
 | 
			
		||||
 | 
			
		||||
        Just { attributes, children } ->
 | 
			
		||||
          Html.caption attributes children :: thead :: withFoot
 | 
			
		||||
            Just { attributes, children } ->
 | 
			
		||||
                Html.caption attributes children :: thead :: withFoot
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
toHeaderInfo : State -> (State -> msg) -> ColumnData data msg -> ( String, Status, Attribute msg )
 | 
			
		||||
toHeaderInfo (State sortName isReversed) toMsg { name, sorter } =
 | 
			
		||||
  case sorter of
 | 
			
		||||
    None ->
 | 
			
		||||
      ( name, Unsortable, onClick sortName isReversed toMsg )
 | 
			
		||||
    case sorter of
 | 
			
		||||
        None ->
 | 
			
		||||
            ( name, Unsortable, onClick sortName isReversed toMsg )
 | 
			
		||||
 | 
			
		||||
    Increasing _ ->
 | 
			
		||||
      ( name, Sortable (name == sortName), onClick name False toMsg )
 | 
			
		||||
        Increasing _ ->
 | 
			
		||||
            ( name, Sortable (name == sortName), onClick name False toMsg )
 | 
			
		||||
 | 
			
		||||
    Decreasing _ ->
 | 
			
		||||
      ( name, Sortable (name == sortName), onClick name False toMsg )
 | 
			
		||||
        Decreasing _ ->
 | 
			
		||||
            ( name, Sortable (name == sortName), onClick name False toMsg )
 | 
			
		||||
 | 
			
		||||
    IncOrDec _ ->
 | 
			
		||||
      if name == sortName then
 | 
			
		||||
        ( name, Reversible (Just isReversed), onClick name (not isReversed) toMsg )
 | 
			
		||||
      else
 | 
			
		||||
        ( name, Reversible Nothing, onClick name False toMsg )
 | 
			
		||||
        IncOrDec _ ->
 | 
			
		||||
            if name == sortName then
 | 
			
		||||
                ( name, Reversible (Just isReversed), onClick name (not isReversed) toMsg )
 | 
			
		||||
 | 
			
		||||
    DecOrInc _ ->
 | 
			
		||||
      if name == sortName then
 | 
			
		||||
        ( name, Reversible (Just isReversed), onClick name (not isReversed) toMsg )
 | 
			
		||||
      else
 | 
			
		||||
        ( name, Reversible Nothing, onClick name False toMsg )
 | 
			
		||||
            else
 | 
			
		||||
                ( name, Reversible Nothing, onClick name False toMsg )
 | 
			
		||||
 | 
			
		||||
        DecOrInc _ ->
 | 
			
		||||
            if name == sortName then
 | 
			
		||||
                ( name, Reversible (Just isReversed), onClick name (not isReversed) toMsg )
 | 
			
		||||
 | 
			
		||||
            else
 | 
			
		||||
                ( name, Reversible Nothing, onClick name False toMsg )
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
onClick : String -> Bool -> (State -> msg) -> Attribute msg
 | 
			
		||||
onClick name isReversed toMsg =
 | 
			
		||||
  E.on "click" <| Json.map toMsg <|
 | 
			
		||||
    Json.map2 State (Json.succeed name) (Json.succeed isReversed)
 | 
			
		||||
    E.on "click" <|
 | 
			
		||||
        Json.map toMsg <|
 | 
			
		||||
            Json.map2 State (Json.succeed name) (Json.succeed isReversed)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
viewRow : (data -> String) -> List (ColumnData data msg) -> (data -> List (Attribute msg)) -> data -> ( String, Html msg )
 | 
			
		||||
viewRow toId columns toRowAttrs data =
 | 
			
		||||
  ( toId data
 | 
			
		||||
  , lazy3 viewRowHelp columns toRowAttrs data
 | 
			
		||||
  )
 | 
			
		||||
    ( toId data
 | 
			
		||||
    , lazy3 viewRowHelp columns toRowAttrs data
 | 
			
		||||
    )
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
viewRowHelp : List (ColumnData data msg) -> (data -> List (Attribute msg)) -> data -> Html msg
 | 
			
		||||
viewRowHelp columns toRowAttrs data =
 | 
			
		||||
  Html.tr (toRowAttrs data) (List.map (viewCell data) columns)
 | 
			
		||||
    Html.tr (toRowAttrs data) (List.map (viewCell data) columns)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
viewCell : data -> ColumnData data msg -> Html msg
 | 
			
		||||
viewCell data {viewData} =
 | 
			
		||||
  let
 | 
			
		||||
    details =
 | 
			
		||||
      viewData data
 | 
			
		||||
  in
 | 
			
		||||
viewCell data { viewData } =
 | 
			
		||||
    let
 | 
			
		||||
        details =
 | 
			
		||||
            viewData data
 | 
			
		||||
    in
 | 
			
		||||
    Html.td details.attributes details.children
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@@ -506,44 +531,53 @@ viewCell data {viewData} =
 | 
			
		||||
 | 
			
		||||
sort : State -> List (ColumnData data msg) -> List data -> List data
 | 
			
		||||
sort (State selectedColumn isReversed) columnData data =
 | 
			
		||||
  case findSorter selectedColumn columnData of
 | 
			
		||||
    Nothing ->
 | 
			
		||||
      data
 | 
			
		||||
    case findSorter selectedColumn columnData of
 | 
			
		||||
        Nothing ->
 | 
			
		||||
            data
 | 
			
		||||
 | 
			
		||||
    Just sorter ->
 | 
			
		||||
      applySorter isReversed sorter data
 | 
			
		||||
        Just sorter ->
 | 
			
		||||
            applySorter isReversed sorter data
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
applySorter : Bool -> Sorter data -> List data -> List data
 | 
			
		||||
applySorter isReversed sorter data =
 | 
			
		||||
  case sorter of
 | 
			
		||||
    None ->
 | 
			
		||||
      data
 | 
			
		||||
    case sorter of
 | 
			
		||||
        None ->
 | 
			
		||||
            data
 | 
			
		||||
 | 
			
		||||
    Increasing sort ->
 | 
			
		||||
      sort data
 | 
			
		||||
        Increasing sort_ ->
 | 
			
		||||
            sort_ data
 | 
			
		||||
 | 
			
		||||
    Decreasing sort ->
 | 
			
		||||
      List.reverse (sort data)
 | 
			
		||||
        Decreasing sort_ ->
 | 
			
		||||
            List.reverse (sort_ data)
 | 
			
		||||
 | 
			
		||||
    IncOrDec sort ->
 | 
			
		||||
      if isReversed then List.reverse (sort data) else sort data
 | 
			
		||||
        IncOrDec sort_ ->
 | 
			
		||||
            if isReversed then
 | 
			
		||||
                List.reverse (sort_ data)
 | 
			
		||||
 | 
			
		||||
    DecOrInc sort ->
 | 
			
		||||
      if isReversed then sort data else List.reverse (sort data)
 | 
			
		||||
            else
 | 
			
		||||
                sort_ data
 | 
			
		||||
 | 
			
		||||
        DecOrInc sort_ ->
 | 
			
		||||
            if isReversed then
 | 
			
		||||
                sort_ data
 | 
			
		||||
 | 
			
		||||
            else
 | 
			
		||||
                List.reverse (sort_ data)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
findSorter : String -> List (ColumnData data msg) -> Maybe (Sorter data)
 | 
			
		||||
findSorter selectedColumn columnData =
 | 
			
		||||
  case columnData of
 | 
			
		||||
    [] ->
 | 
			
		||||
      Nothing
 | 
			
		||||
    case columnData of
 | 
			
		||||
        [] ->
 | 
			
		||||
            Nothing
 | 
			
		||||
 | 
			
		||||
    {name, sorter} :: remainingColumnData ->
 | 
			
		||||
      if name == selectedColumn then
 | 
			
		||||
        Just sorter
 | 
			
		||||
      else
 | 
			
		||||
        findSorter selectedColumn remainingColumnData
 | 
			
		||||
        { name, sorter } :: remainingColumnData ->
 | 
			
		||||
            if name == selectedColumn then
 | 
			
		||||
                Just sorter
 | 
			
		||||
 | 
			
		||||
            else
 | 
			
		||||
                findSorter selectedColumn remainingColumnData
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@@ -553,11 +587,11 @@ findSorter selectedColumn columnData =
 | 
			
		||||
{-| Specifies a particular way of sorting data.
 | 
			
		||||
-}
 | 
			
		||||
type Sorter data
 | 
			
		||||
  = None
 | 
			
		||||
  | Increasing (List data -> List data)
 | 
			
		||||
  | Decreasing (List data -> List data)
 | 
			
		||||
  | IncOrDec (List data -> List data)
 | 
			
		||||
  | DecOrInc (List data -> List data)
 | 
			
		||||
    = None
 | 
			
		||||
    | Increasing (List data -> List data)
 | 
			
		||||
    | Decreasing (List data -> List data)
 | 
			
		||||
    | IncOrDec (List data -> List data)
 | 
			
		||||
    | DecOrInc (List data -> List data)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-| A sorter for columns that are unsortable. Maybe you have a column in your
 | 
			
		||||
@@ -566,7 +600,7 @@ sort based on that column.
 | 
			
		||||
-}
 | 
			
		||||
unsortable : Sorter data
 | 
			
		||||
unsortable =
 | 
			
		||||
  None
 | 
			
		||||
    None
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-| Create a sorter that can only display the data in increasing order. If we
 | 
			
		||||
@@ -574,11 +608,12 @@ want a table of people, sorted alphabetically by name, we would say this:
 | 
			
		||||
 | 
			
		||||
    sorter : Sorter { a | name : comparable }
 | 
			
		||||
    sorter =
 | 
			
		||||
      increasingBy .name
 | 
			
		||||
        increasingBy .name
 | 
			
		||||
 | 
			
		||||
-}
 | 
			
		||||
increasingBy : (data -> comparable) -> Sorter data
 | 
			
		||||
increasingBy toComparable =
 | 
			
		||||
  Increasing (List.sortBy toComparable)
 | 
			
		||||
    Increasing (List.sortBy toComparable)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-| Create a sorter that can only display the data in decreasing order. If we
 | 
			
		||||
@@ -587,35 +622,38 @@ would say this:
 | 
			
		||||
 | 
			
		||||
    sorter : Sorter { a | population : comparable }
 | 
			
		||||
    sorter =
 | 
			
		||||
      decreasingBy .population
 | 
			
		||||
        decreasingBy .population
 | 
			
		||||
 | 
			
		||||
-}
 | 
			
		||||
decreasingBy : (data -> comparable) -> Sorter data
 | 
			
		||||
decreasingBy toComparable =
 | 
			
		||||
  Decreasing (List.sortBy toComparable)
 | 
			
		||||
    Decreasing (List.sortBy toComparable)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-| Sometimes you want to be able to sort data in increasing *or* decreasing
 | 
			
		||||
{-| Sometimes you want to be able to sort data in increasing _or_ decreasing
 | 
			
		||||
order. Maybe you have a bunch of data about orange juice, and you want to know
 | 
			
		||||
both which has the most sugar, and which has the least sugar. Both interesting!
 | 
			
		||||
This function lets you see both, starting with decreasing order.
 | 
			
		||||
 | 
			
		||||
    sorter : Sorter { a | sugar : comparable }
 | 
			
		||||
    sorter =
 | 
			
		||||
      decreasingOrIncreasingBy .sugar
 | 
			
		||||
        decreasingOrIncreasingBy .sugar
 | 
			
		||||
 | 
			
		||||
-}
 | 
			
		||||
decreasingOrIncreasingBy : (data -> comparable) -> Sorter data
 | 
			
		||||
decreasingOrIncreasingBy toComparable =
 | 
			
		||||
  DecOrInc (List.sortBy toComparable)
 | 
			
		||||
    DecOrInc (List.sortBy toComparable)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{-| Sometimes you want to be able to sort data in increasing *or* decreasing
 | 
			
		||||
{-| Sometimes you want to be able to sort data in increasing _or_ decreasing
 | 
			
		||||
order. Maybe you have race times for the 100 meter sprint. This function lets
 | 
			
		||||
sort by best time by default, but also see the other order.
 | 
			
		||||
 | 
			
		||||
    sorter : Sorter { a | time : comparable }
 | 
			
		||||
    sorter =
 | 
			
		||||
      increasingOrDecreasingBy .time
 | 
			
		||||
        increasingOrDecreasingBy .time
 | 
			
		||||
 | 
			
		||||
-}
 | 
			
		||||
increasingOrDecreasingBy : (data -> comparable) -> Sorter data
 | 
			
		||||
increasingOrDecreasingBy toComparable =
 | 
			
		||||
  IncOrDec (List.sortBy toComparable)
 | 
			
		||||
    IncOrDec (List.sortBy toComparable)
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user