PF6.Table

PF6 Table component

Tables organize and display data efficiently in rows and columns.

See: https://www.patternfly.org/components/table

Definition

type Table row msg

Opaque Table type

type Column row msg

A table column definition

type SortDirection

= Ascending

| Descending

Sort direction

Constructor

table :

{ columns : List (Column row msg)

, rows : List row

}

-> Table row msg

Construct a Table

table
    { columns = [ nameCol, emailCol, statusCol ]
    , rows = model.users
    }

Column constructor

column :

{ key : String

, label : String

, view : row -> Element msg

}

-> Column row msg

Construct a column

column
    { key = "name"
    , label = "Name"
    , view = \row -> Element.text row.name
    }

Table modifiers

withCaption : String -> Table row msg -> Table row msg

Set a table caption

withSortable : Table row msg -> Table row msg

Enable sortable columns

withStriped : Table row msg -> Table row msg

Striped rows

withCompact : Table row msg -> Table row msg

Compact row height

withBordered : Table row msg -> Table row msg

Add borders between rows and columns

Sort state

withSortedBy :

{ key : String

, direction : SortDirection

}

-> Table row msg

Set current sort state

Rendering

toMarkup : Table row msg -> Element msg

Render the Table as an Element msg

lenards/elm-ui-patternfly/2.1.0