Nri.Ui.SortableTable.V3

TODO for next major version:

add the possibility to pass Aria.sortAscending and Aria.sortDescending attributes to the <th> tag

Changes from V2:

made column non-sortable (e.g. buttons in a column should not be sorted)
use a button instead of a clickable div in headers
use Aria.roleDescription instead of Aria.label in sortable columns headers
use Nri.Ui.UiIcon.V1 sortArrow and Nri.Ui.UiIcon.V1 sortArrowDown icons for the sort indicators

type Column id entry msg

type alias Config id entry msg =

{ updateMsg : State id -> msg

, columns : List (Column id entry msg)

}

type alias Sorter a =

SortDirection -> a -> a -> Order

type alias State id =

{ column : id

, sortDirection : SortDirection

}

init : id -> State id

initDescending : id -> State id

custom :

{ id : id

, header : Html msg

, view : entry -> Html msg

, sorter : Maybe (Sorter entry)

, width : Int

, cellStyles : entry -> List Style

}

-> Column id entry msg

string :

{ id : id

, header : String

, value : entry -> String

, width : Int

, cellStyles : entry -> List Style

}

-> Column id entry msg

view : Config id entry msg -> State id -> List entry -> Html msg

viewLoading : Config id entry msg -> State id -> Html msg

invariantSort : (entry -> comparable) -> Sorter entry

Create a sorter function that always orders the entries in the same order. For example, this is useful when we want to resolve ties and sort the tied entries by name, no matter of the sort direction set on the table.

simpleSort : (entry -> comparable) -> Sorter entry

Create a simple sorter function that orders entries by mapping a function over the collection. It will also reverse it when the sort direction is descending.

combineSorters : List (Sorter entry) -> Sorter entry

NoRedInk/noredink-ui/22.5.1

Nri.Ui.SortableTable.V3

Modules