NoRedInk/noredink-ui/22.10.0

NOTE: the latest version is 35.9.3

Nri.Ui.SortableTable.V4

Changes from V3:

  • Change to an HTML-like API
  • Allow the table header to be sticky
type 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
{ id : id
, header : Html msg
, view : entry -> Html msg
, sorter : Maybe (Sorter entry)
, width : Int
, cellStyles : entry -> List Style
}
-> Column id entry msg
{ id : id
, header : String
, value : entry -> String
, width : Int
, cellStyles : entry -> List 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.

stickyHeaderCustom : StickyConfig -> Attribute id msg

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

type alias StickyConfig =
{ topOffset : Float
, zIndex : Int
, pageBackgroundColor : Color
}

How the header will be set up to be sticky.

  • topOffset controls how far off the top of the viewport the headers will stick, in pixels. (Default value: 0)
  • zIndex controls where in the stacking context the header will end up. Useful to prevent elements in rows from appearing over the header. (Default value: 0)

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

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

Modules