NoRedInk / noredink-ui / Nri.Ui.Table.V7

Upgrading from V6:


type Column data msg

Closed representation of how to render the header and cells of a column in the table


type SortDirection
    = Ascending
    | Descending

Which direction is a table column sorted? Only set these on columns that actually have an explicit sort!

custom : { header : Html.Styled.Html msg, view : data -> Html.Styled.Html msg, width : Css.LengthOrAuto compatible, cellStyles : data -> List Css.Style, sort : Maybe SortDirection } -> Column data msg

A column that renders however you want it to

string : { header : String, value : data -> String, width : Css.LengthOrAuto compatible, cellStyles : data -> List Css.Style, sort : Maybe SortDirection } -> Column data msg

A column that renders some aspect of a value as text

rowHeader : { header : Html.Styled.Html msg, view : data -> Html.Styled.Html msg, width : Css.LengthOrAuto compatible, cellStyles : data -> List Css.Style, sort : Maybe SortDirection } -> Column data msg

A column whose cells are row headers

view : List Css.Style -> List (Column data msg) -> List data -> Html.Styled.Html msg

Displays a table of data based on the provided column definitions

viewWithoutHeader : List Css.Style -> List (Column data msg) -> List data -> Html.Styled.Html msg

Displays a table of data without a header row

viewLoading : List Css.Style -> List (Column data msg) -> Html.Styled.Html msg

Display a table with the given columns but instead of data, show blocked out text with an interesting animation. This view lets the user know that data is on its way and what it will look like when it arrives.

viewLoadingWithoutHeader : List Css.Style -> List (Column data msg) -> Html.Styled.Html msg

Display the loading table without a header row