NoRedInk/noredink-ui/35.6.0

NOTE: the latest version is 35.9.3

Nri.Ui.Table.V8

Upgrading from V7:

  • New API using list of attributes.
  • Adds option to disable alternating row colors (disableAlternatingRowColors)
  • Adds option to enable background color changes on the hovered row (backgroundChangeOnRowHover)
type Column data msg

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

= Ascending
| Descending

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

{ 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

{ 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

{ 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

placeholderColumn : { width : LengthOrAuto compatible } -> Column data 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.

Attribute to configure the table

css : List Style -> Attribute

Add a CSS style to the table

disable alternating row colors, default behavior alternates row colors

Makes it so that rows are highlighted with a different background color when hovering over them

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

Displays a table of data based on the provided column definitions

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

Displays a table of data without a header row

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

Display the loading table without a header row

Modules