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 responsive for horizontally scrolling tables accross all breakpoints.

Make table responsive for up until the -sm breakpoint.

Make table responsive for up until the -md breakpoint.

Make table responsive for up until the -lg breakpoint.

Make table responsive for up until the -xl breakpoint.

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 primary color.

Style a table row with the secondary 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.

Style a table row with the light color.

Style a table row with the dark 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 primary color

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

Option to style an individual cell with the light color

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