Allows you to create a simple default table

• (thead, tbody) - A tuple of a thead item and a tbody item

Create a customizable table

Table.table
    { options = [ Table.striped ] -- list of table options
    , thead = Table.thead ... etc
    , tbody = Table.tbody ... etc
    }

Option to give a table an inversed color scheme (dark backround, light text)

Option to give a table a striped look (zebra style)

Option to put borders around a table

Change row coloring to highlight row when hovered over

Option to give a more condensed table with less padding/margins

Make table scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in the table.

Turn traditional tables on their side. When using reflow, the table header becomes the first column of the table, the first row within the table body becomes the second column, the second row becomes the third column, etc. Only works out nicely for simple tables (e.g. no colspans, rowspans or multiple header rows etc.)

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

Create a default thead with one row of cells (typically th elements)

simpleThead
    [ Table.th [] [ text "Col1" ]
    , Table.th [] [ text "Col2" ]
    ]

Create a customizable thead element

• options List of options to style the thead element
• rows List of rows (aka tr)

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

Option to color header with default color scheme.

Option to inverse thead element. Dark background and light text color

Opaque type representing possible styling options for a thead element

Create a tbody element

• attributes List of standard Elm html attributes
• rows List of table row elements (tr)

Create a tbody element where each row is keyed

• attributes List of standard Elm html attributes
• rows List of key table row elements (tr) tuples

Opaque type representing a tbody element

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

Create a table row with keyed td or th child elements.

Opaque type representing a tr

Style a table row with the active color.

Style a table row with the info color.

Style a table row with the success color.

Style a table row with the warning color.

Style a table row with the danger color.

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)

Create a td element

Table.td [ Table.cellInfo ] [ text "Some info cell"]

• options List of options for customizing
• children List of child elements

Create a th element

Table.th [ Table.cellInfo ] [ text "Some info header cell"]

• options List of options for customizing
• children List of child elements

Opaque type representing a cell (tr or td)

Option to style an individual cell with the active color

Option to style an individual cell with the info color

Option to style an individual cell with the success color

Option to style an individual cell with the warning color

Option to style an individual cell with the danger color

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