NoRedInk/noredink-ui/34.3.1

NOTE: the latest version is 35.9.3

Nri.Ui.SortableTable.V5

Changes from V4:

  • Drops disableAlternatingRowColors
  • Adds tableAttribute, which lets us add any attributes for the underlying Nri.Ui.Table
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
{ 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 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.

Attributes forwarded to the underlying Nri.Ui.Table

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
, 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.

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