Create simple and customizable tables in a fairly type safe manner!
simpleTable : ( THead msg, TBody msg ) -> Html.Styled.Html msg
Allows you to create a simple default table
thead
, tbody
) - A tuple of a thead item and a tbody itemtable : { options : List (TableOption msg), thead : THead msg, tbody : TBody msg } -> Html.Styled.Html msg
Create a customizable table
Table.table
{ options = [ Table.striped ] -- list of table options
, thead = Table.thead ... etc
, tbody = Table.tbody ... etc
}
inversed : TableOption msg
Option to give a table an inversed color scheme (dark backround, light text)
striped : TableOption msg
Option to give a table a striped look (zebra style)
bordered : TableOption msg
Option to put borders around a table
hover : TableOption msg
Change row coloring to highlight row when hovered over
small : TableOption msg
Option to give a more condensed table with less padding/margins
responsive : TableOption msg
Make table responsive for horizontally scrolling tables accross all breakpoints.
responsiveSm : TableOption msg
Make table responsive for up until the -sm breakpoint.
responsiveMd : TableOption msg
Make table responsive for up until the -md breakpoint.
responsiveLg : TableOption msg
Make table responsive for up until the -lg breakpoint.
responsiveXl : TableOption msg
Make table responsive for up until the -xl breakpoint.
attr : Html.Styled.Attribute msg -> TableOption msg
When you need to customize a table element with a standard Html.Attribute, use this function to create it as a TableOption
Opaque type representing possible styling options for a table
simpleThead : List (Cell msg) -> THead msg
Create a default thead with one row of cells (typically th elements)
simpleThead
[ Table.th [] [ text "Col1" ]
, Table.th [] [ text "Col2" ]
]
thead : List (TableHeadOption msg) -> List (Row msg) -> THead msg
Create a customizable thead element
options
List of options to style the thead elementrows
List of rows (aka tr)headAttr : Html.Styled.Attribute msg -> TableHeadOption msg
When you need to customize a thead element with a standard Html.Attribute, use this function to create a TableHeadOption
Opaque type representing a thead element
defaultHead : TableHeadOption msg
Option to color header with default color scheme.
inversedHead : TableHeadOption msg
Option to inverse thead element. Dark background and light text color
Opaque type representing possible styling options for a thead element
tbody : List (Html.Styled.Attribute msg) -> List (Row msg) -> TBody msg
Create a tbody element
attributes
List of standard Elm html attributesrows
List of table row elements (tr)keyedTBody : List (Html.Styled.Attribute msg) -> List ( String, Row msg ) -> TBody msg
Create a tbody element where each row is keyed
attributes
List of standard Elm html attributesrows
List of key table row elements (tr) tuplesOpaque type representing a tbody element
tr : List (RowOption msg) -> List (Cell msg) -> Row msg
Create a table row
-- For use (typically) in a tbody
Table.tr
[ Table.rowInfo ]
[ Table.td [] [ text "Some cell" ]
, Table.td [] [ text "Another cell" ]
]
-- alternatively when creating a thead
Table.tr
[ Table.rowInfo ]
[ Table.th [] [ text "Col1" ]
, Table.th [] [ text "Col2" ]
]
keyedTr : List (RowOption msg) -> List ( String, Cell msg ) -> Row msg
Create a table row with keyed td or th child elements.
Opaque type representing a tr
rowActive : RowOption msg
Style a table row with the active color.
rowPrimary : RowOption msg
Style a table row with the primary color.
rowSecondary : RowOption msg
Style a table row with the secondary color.
rowInfo : RowOption msg
Style a table row with the info color.
rowSuccess : RowOption msg
Style a table row with the success color.
rowWarning : RowOption msg
Style a table row with the warning color.
rowDanger : RowOption msg
Style a table row with the danger color.
rowLight : RowOption msg
Style a table row with the light color.
rowDark : RowOption msg
Style a table row with the dark color.
rowAttr : Html.Styled.Attribute msg -> RowOption msg
When you need to customize a tr element with standard Html.Attribute attributes, use this function
Opaque type representing possible styling options for a tr element (both in thead and tbody)
td : List (CellOption msg) -> List (Html.Styled.Html msg) -> Cell msg
Create a td element
Table.td [ Table.cellInfo ] [ text "Some info cell" ]
options
List of options for customizingchildren
List of child elementsth : List (CellOption msg) -> List (Html.Styled.Html msg) -> Cell msg
Create a th element
Table.th [ Table.cellInfo ] [ text "Some info header cell" ]
options
List of options for customizingchildren
List of child elementsOpaque type representing a cell (tr or td)
cellActive : CellOption msg
Option to style an individual cell with the active color
cellPrimary : CellOption msg
Option to style an individual cell with the primary color
cellSecondary : CellOption msg
Option to style an individual cell with the secondary color
cellInfo : CellOption msg
Option to style an individual cell with the info color
cellSuccess : CellOption msg
Option to style an individual cell with the success color
cellWarning : CellOption msg
Option to style an individual cell with the warning color
cellDanger : CellOption msg
Option to style an individual cell with the danger color
cellLight : CellOption msg
Option to style an individual cell with the light color
cellDark : CellOption msg
Option to style an individual cell with the dark color
cellAttr : Html.Styled.Attribute msg -> CellOption msg
When you need to customize a td or th with standard Html.Attribute attributes, use this function
Opaque type representing possible styling options for a cell, ie td and th