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)
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.
{ columns : UI.Tables.Common.Columns columns
, toRow : UI.Tables.Common.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 -> 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
withWidth : Element.Length -> StatelessTable msg item columns -> StatelessTable msg item columns
Applies Element.width
to the component.
Table.withWidth
(Element.fill |> Element.minimum 220)
someTable
renderElement : UI.RenderConfig.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.