Nri.Ui.Table.V7

Upgrading from V6:

If you don't have extra styles for the table, add an empty list to calls to view.
Consider moving to SortableTable, as in V4 a non-interactive table renders just the same but has additional flexibility in the API and will make future upgrades easier.

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 msg

, view : data -> Html msg

, width : LengthOrAuto compatible

, cellStyles : data -> List Style

, sort : Maybe SortDirection

}

-> Column data msg

A column that renders however you want it to

string :

{ header : String

, value : data -> String

, width : LengthOrAuto compatible

, cellStyles : data -> List Style

, sort : Maybe SortDirection

}

-> Column data msg

A column that renders some aspect of a value as text

rowHeader :

{ header : Html msg

, view : data -> Html msg

, width : LengthOrAuto compatible

, cellStyles : data -> List Style

, sort : Maybe SortDirection

}

-> Column data msg

A column whose cells are row headers

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

Displays a table of data based on the provided column definitions

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

Displays a table of data without a header row

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

Display the loading table without a header row

NoRedInk/noredink-ui/24.2.0

Nri.Ui.Table.V7

Modules