Nri.Ui.Table.V4

Upgrading from V1:

All the width fields in column configurations now take an elm-css length value rather than an Integer. Change width = 100 to width = px 100 to get the same widths as before.
Tables now by default take the full width of the container they are placed in. If this is not what you want, wrap the table in an element with a fixed width.
The table module now makes use of Html.Styled and no longer exposes a separate styles value. Check out the elm-css documentation on Html.Styled to see how to work with it.
The default cell padding has been removed and content is not vertically centered in its cell. If you need to overwrite this, wrap your cells in elements providing custom styling to the cell.

type Column data msg

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

custom :

{ header : Html msg

, view : data -> Html msg

, width : LengthOrAuto compatible

}

-> Column data msg

A column that renders however you want it to

string :

{ header : String

, value : data -> String

, width : LengthOrAuto compatible

}

-> Column data msg

A column that renders some aspect of a value as text

view : List (Column data msg) -> List data -> Html msg

Displays a table of data based on the provided column definitions

viewWithoutHeader : List (Column data msg) -> List data -> Html msg

Displays a table of data without a header row

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

Display the loading table without a header row

NoRedInk/noredink-ui/7.10.0

Nri.Ui.Table.V4

Modules