1
1
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-31 01:23:09 +03:00
noredink-ui/styleguide-app/Examples/SortableTable.elm
2020-09-09 11:43:10 -07:00

108 lines
3.1 KiB
Elm

module Examples.SortableTable exposing (Msg, State, example)
{-|
@docs Msg, State, example
-}
import AtomicDesignType exposing (AtomicDesignType(..))
import Category exposing (Category(..))
import Example exposing (Example)
import Html.Styled as Html
import KeyboardSupport exposing (Direction(..), Key(..))
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.SortableTable.V2 as SortableTable
type Column
= FirstName
| LastName
| Coins
{-| -}
type Msg
= NoOp
| SetSortState (SortableTable.State Column)
{-| -}
type alias State =
{ sortState : SortableTable.State Column }
{-| -}
example : Example State Msg
example =
{ name = "SortableTable"
, version = 2
, categories = [ Tables, Layout ]
, atomicDesignType = Molecule
, keyboardSupport = []
, state = init
, update = update
, subscriptions = \_ -> Sub.none
, view =
\{ sortState } ->
let
config =
{ updateMsg = SetSortState
, columns =
[ SortableTable.string
{ id = FirstName
, header = "First name"
, value = .firstName
, width = 125
, cellStyles = \_ -> []
}
, SortableTable.string
{ id = LastName
, header = "Last name"
, value = .lastName
, width = 125
, cellStyles = \_ -> []
}
, SortableTable.custom
{ id = Coins
, header = Html.text "Coins"
, view = .coins >> String.fromInt >> Html.text
, sorter = SortableTable.simpleSort .coins
, width = 125
, cellStyles = \_ -> []
}
]
}
data =
[ { firstName = "First1", lastName = "Last1", coins = 1 }
, { firstName = "First2", lastName = "Last2", coins = 2 }
, { firstName = "First3", lastName = "Last3", coins = 3 }
, { firstName = "First4", lastName = "Last4", coins = 4 }
, { firstName = "First5", lastName = "Last5", coins = 5 }
]
in
[ Heading.h3 [] [ Html.text "With sortable headers" ]
, SortableTable.view config sortState data
, Heading.h3 [] [ Html.text "Loading" ]
, SortableTable.viewLoading config sortState
]
}
{-| -}
init : State
init =
{ sortState = SortableTable.init FirstName }
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
case msg of
NoOp ->
( state, Cmd.none )
SetSortState sortState ->
( { state | sortState = sortState }, Cmd.none )