Changes from V3:
Nri.Ui.Table.V7.SortDirection -> a -> a -> Basics.Order
{ 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
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.
{ topOffset : Basics.Float
, zIndex : Basics.Int
, pageBackgroundColor : Css.Color
, hoverZIndex : Maybe Basics.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.
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