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 the table element with 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 the thead element with 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)

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

Opaque type representing a tr

Style table row with active color.

Style table row with info color.

Style table row with success color.

Style table row with warning color.

Style table row with 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 active color

Option to style an individual cell with info color

Option to style an individual cell with success color

Option to style an individual cell with warning color

Option to style an individual cell with 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