Array with all the columns from a table.

This is a type-safe sized-array. See TypeNumbers for how to compose its phantom type.

An empty Columns set.

columnsEmpty
    |> column "Star" (columnWidthPortion 3)
    |> column "Constellation" (columnWidthPortion 3)
    |> column "Distance" (columnWidthPortion 2)

Appends a new column to the list of columns, defining its header's label and the entire column's width.

columnsEmpty
    |> column "Name" (columnWidthPortion 3)
    |> column "Age" (columnWidthPortion 1)

ColumnWidth specifies a cell's width.

Similar to Element.fillPortion but applied to an entire Table's column.

columnsEmpty
    |> column "Title" (columnWidthPortion 3)
    |> column "Author" (columnWidthPortion 3)
    |> column "Year" (columnWidthPortion 2)

Similar to Element.px but applied to an entire Table's column.

columnEmpty
    |> column "Name" (columnWidthPixels 320)
    |> column "Length" (columnWidthPixels 240)
    |> column "Population" (columnWidthPixels 240)

Array with all the cells in a single row.

This is a type-safe sized-array. See TypeNumbers for how to compose the phantom type.

Helper for composing a map function for a single row.

An empty set of cells for a row.

rowEmpty
    |> rowCellText (Text.body1 "Hello")
    |> rowCellText (Text.body2 "World")

Transforms a UI.Text into a cell appending it to a row.

Similar to cellFromText but infused for rows.

rowEmpty
    |> rowCellText (Text.body1 "Coffee")
    |> rowCellText (Text.body2 "Brazil")

Transforms a UI.Button into a cell appending it to a row.

Similar to cellFromButton but infused for rows.

rowEmpty
    |> rowCellText (Text.body1 "Aldebaran")
    |> rowCellButton
        ("See in Stellarium"
            |> Button.fromText
            |> Button.redirect "stellarium://gj/9159"
                Button.hyperlink
        )

Transforms a UI.Text into a hyperlinked-cell appending it to a row.

Similar to cellFromText but infused for rows.

rowEmpty
    |> rowCellLink (Link.link "https://starbucks.com") (Text.body1 "Starbucks")
    |> rowCellText (Text.body2 "Coffe and Capuccino")

Transforms any Element msg into a cell appending it to a row.

Similar to cellFromCustom but infused for rows.

rowEmpty
    |> rowCellText (Text.body1 "Aldebaran")
    |> rowCellCustom (Element.text "Hello")

A singular cell of a table. Can hold texts, buttons or any custom Element msg.

Creates a cell with some text content.

Text may be ellipsized to fit cell's width.

cellFromText <| Text.body2 "Watermelon"

Creates a cell with a button inside.

Button.fromText "Delete"
    |> Button.cmd Msg.Delete Button.danger
    |> cellFromButton

Creates a cell with a good-old hyperlink from a text.

Text may be ellipsized to fit cell's width.

cellFromLink
    (Link.link "https://www.google.com")
    (Text.body2 "Go to Google")

Creates a cell with an Element msg inside.

cellFromCustom <| Element.row [] [ Element.text "Hello", Element.text "World" ]