PaackEng / paack-ui / UI.Tables.Common

Desktop


type alias Columns columns =
UI.Internal.NArray.NArray UI.Internal.Tables.Common.Column columns

Array with all the columns from a table.

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

columnsEmpty : Columns UI.Utils.TypeNumbers.Zero

An empty Columns set.

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

column : String -> ColumnWidth -> Columns columns -> Columns (UI.Utils.TypeNumbers.Increase columns)

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)

Individual column


type alias ColumnWidth =
UI.Internal.Tables.Common.ColumnWidth

ColumnWidth specifies a cell's width.

columnWidthPortion : Basics.Int -> ColumnWidth

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)

columnWidthPixels : Basics.Int -> ColumnWidth

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)

Desktop rows


type alias Row msg columns =
UI.Internal.NArray.NArray (Cell msg) columns

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.


type alias ToRow msg item columns =
{ toKey : item -> String
, view : item -> Row msg columns 
}

Helper for composing a map function for a single row.

rowEmpty : Row msg UI.Utils.TypeNumbers.Zero

An empty set of cells for a row.

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

rowCellText : UI.Text.Text -> Row msg columns -> Row msg (UI.Utils.TypeNumbers.Increase columns)

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")

rowCellButton : UI.Button.Button msg -> Row msg columns -> Row msg (UI.Utils.TypeNumbers.Increase columns)

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
        )

rowCellLink : UI.Link.Link -> UI.Text.Text -> Row msg columns -> Row msg (UI.Utils.TypeNumbers.Increase columns)

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")

rowCellCustom : Element msg -> Row msg columns -> Row msg (UI.Utils.TypeNumbers.Increase columns)

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")

Individual cell


type alias Cell msg =
UI.Internal.Tables.Common.Cell msg

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

cellFromText : UI.Text.Text -> Cell msg

Creates a cell with some text content.

Text may be ellipsized to fit cell's width.

cellFromText <| Text.body2 "Watermelon"

cellFromButton : UI.Button.Button msg -> Cell msg

Creates a cell with a button inside.

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

cellFromLink : UI.Link.Link -> UI.Text.Text -> Cell msg

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")

cellFromCustom : Element msg -> Cell msg

Creates a cell with an Element msg inside.

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