NoRedInk / noredink-ui / Nri.Ui.SortableTable.V4

Changes from V3:


type Column id entry msg


type alias Sorter a =
Nri.Ui.Table.V7.SortDirection -> a -> a -> Basics.Order


type alias State id =
{ column : id
, sortDirection : Nri.Ui.Table.V7.SortDirection 
}

init : id -> State id

initDescending : id -> State id

custom : { id : id, header : Html.Styled.Html msg, view : entry -> Html.Styled.Html msg, sorter : Maybe (Sorter entry), width : Basics.Int, cellStyles : entry -> List Css.Style } -> Column id entry msg

string : { id : id, header : String, value : entry -> String, width : Basics.Int, cellStyles : entry -> List Css.Style } -> Column id entry msg


type Attribute id msg

Customize how the table is rendered, for example by adding sorting or stickiness.

updateMsg : (State id -> msg) -> Attribute id msg

Add interactivity in sorting columns. When this attribute is provided and sorting is enabled, columns will be sortable by clicking the headers.

state : State id -> Attribute id msg

Sort a column. You can get an initial state with init or initDescending. If you make this sorting interactive, you should store the state in your model and provide it to this function instead of recreating it on every update.

stickyHeader : Attribute id msg

Make the header sticky (that is, it will stick to the top of the viewport when it otherwise would have been scrolled off.) You probably will want to set a background color on the header as well.

stickyHeaderCustom : StickyConfig -> Attribute id msg

Does the same thing as stickyHeader, but with adaptations for your specific use.


type alias StickyConfig =
{ topOffset : Basics.Float
, zIndex : Basics.Int
, pageBackgroundColor : Css.Color
, hoverZIndex : Maybe Basics.Int 
}

How the header will be set up to be sticky.

Headers are never sticky on mobile-sized viewports because doing so causes some accessibility issues with zooming and panning.

view : List (Attribute id msg) -> List (Column id entry msg) -> List entry -> Html.Styled.Html msg

viewLoading : List (Attribute id msg) -> List (Column id entry msg) -> Html.Styled.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