NoRedInk/noredink-ui/35.3.2

NOTE: the latest version is 35.9.3

Nri.Ui.SortableTable.V6

Changes from V5:

  • Moves update function out of onClick handler and into an explicit update function
  • State is renamed Model
  • Model is is opaque (and because of this, exposes encoder, decoder, and entriesSorter)
  • removed loading function. Now if view is not passed the model, it will render as loading
  • performance: caches sorting in Model instead of performing it in the view.
  • move msgWrapper and model attributes into required param for view

Initializing the model

type Model id entry
type Msg id

Encoding and Decoding

decoder comes from SortableTable type

encode : (id -> Value) -> Model id entry -> Value

encode model to Json

Columns

type Column id entry msg
{ 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
{ id : id
, width : Int
}
-> Column id entry msg

Creates a placeholder column which will reserve the space for the column, this can be used when multiple tables have similar data and we want to keep the size consistent.

type alias Sorter a =
SortDirection -> a -> a -> Order
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

Rendering

type alias ViewConfig id entry msg =
{ msgWrapper : Msg id -> msg
, model : Model id entry
}

Attributes

type Attribute id entry msg

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

stickyHeaderCustom : StickyConfig -> Attribute id entry msg

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

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

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.

Attributes forwarded to the underlying Nri.Ui.Table

table : TableConfig id entry msg -> SortableTable id entry msg
type alias SortableTable id entry msg =
{ update : Msg id -> Model id entry -> Model id entry
, view :
ViewConfig id entry msg
-> List (Attribute id entry msg)
-> Html msg
, decoder :
Decoder id -> Maybe (List entry) -> Decoder (Model id entry)
, currentEntriesSorter : Model id entry -> entry -> entry -> Order
, rebuild : Model id entry -> Maybe (List entry) -> Model id entry
, init : id -> Maybe (List entry) -> Model id entry
, initDescending : id -> Maybe (List entry) -> Model id entry
}

Modules