UI.Tables.Stateless

Tables are a matrixial data disposition with rows, columns, headers, and cells.

UI.Tables are type-safe, which means that every row needs to have the same number of columns (including the headers). Otherwise, compilation fails.

Stateless.table
    { columns = Book.tableColumns
    , toRow = Book.toTableRow
    }
    |> Stateless.withWidth (Element.fill |> Element.maximum 640)
    |> Stateless.withItems
        [ Book "Dan Brown" "Angels & Demons" "2000"
        , Book "Dan Brown" "The Da Vinci Code" "2003"
        , Book "Dan Brown" "The Lost Symbol" "2009"
        , Book "Dan Brown" "Inferno" "2013"
        , Book "Dan Brown" "Origin" "2017"
        ]
    |> Stateless.renderElement renderConfig

Where Book is:

type alias Book =
    { author : String, title : String, year : String }


tableColumns =
    columnsEmpty
        |> column "Title" (columnWidthPixels 320)
        |> column "Author" (columnWidthPixels 240)
        |> column "Year" (columnWidthPixels 120)


toTableRow { author, title, year } =
    rowEmpty
        |> rowCellText (Text.body1 title)
        |> rowCellText (Text.body2 author)
        |> rowCellText (Text.caption year)

Stateless

type StatelessTable msg item columns

The StatelessTable msg item columns type is used for describing the component for later rendering.

This is type that constrains type-safe sized-arrays. See TypeNumbers for how to compose its phantom type.

type alias StatelessConfig msg item columns =

{ columns : Columns columns

, toRow : ToRow msg item columns

}

Record with parameters for the creation of a StatelessTable.

This is record that constrains type-safe sized-arrays. See TypeNumbers for how to compose its phantom type.

table :

StatelessConfig msg item columns

-> StatelessTable msg item columns

Constructs a stateless table from its columns and rows.

table
    { columns = Book.tableColumns
    , toRow = Book.toTableRow
    }

withItems :

List item

-> StatelessTable msg item columns

Each of these items will become a row in this table.

withItems
    [ Book "Dan Brown" "Angels & Demons" "2000"
    , Book "Dan Brown" "The Da Vinci Code" "2003"
    , Book "Dan Brown" "The Lost Symbol" "2009"
    , Book "Dan Brown" "Inferno" "2013"
    , Book "Dan Brown" "Origin" "2017"
    ]
    someTable

Width

withWidth :

Length

-> StatelessTable msg item columns

Applies Element.width to the component.

Table.withWidth
    (Element.fill |> Element.minimum 220)
    someTable

Rendering

renderElement : RenderConfig -> StatelessTable msg item columns -> Element msg

End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.

PaackEng/paack-ui/2.1.0

UI.Tables.Stateless

Stateless

Width

Rendering

Modules