EdutainmentLIVE / elm-bootstrap / Bootstrap.Table

Create simple and customizable tables in a fairly type safe manner!

Table

simpleTable : ( THead msg, TBody msg ) -> Html msg

Allows you to create a simple default table

table : { options : List (TableOption msg), thead : THead msg, tbody : TBody msg } -> Html msg

Create a customizable table

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

Table options

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


type TableOption msg

Opaque type representing possible styling options for a table

Table headers

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

headAttr : Html.Attribute msg -> TableHeadOption msg

When you need to customize a thead element with a standard Html.Attribute, use this function to create a TableHeadOption


type THead msg

Opaque type representing a thead element

Header options

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


type TableHeadOption msg

Opaque type representing possible styling options for a thead element

Table body

tbody : List (Html.Attribute msg) -> List (Row msg) -> TBody msg

Create a tbody element

keyedTBody : List (Html.Attribute msg) -> List ( String, Row msg ) -> TBody msg

Create a tbody element where each row is keyed


type TBody msg

Opaque type representing a tbody element

Rows

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.


type Row msg

Opaque type representing a tr

Row options

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.Attribute msg -> RowOption msg

When you need to customize a tr element with standard Html.Attribute attributes, use this function


type RowOption msg

Opaque type representing possible styling options for a tr element (both in thead and tbody)

Cells

td : List (CellOption msg) -> List (Html msg) -> Cell msg

Create a td element

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

th : List (CellOption msg) -> List (Html msg) -> Cell msg

Create a th element

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


type Cell msg

Opaque type representing a cell (tr or td)

Cell options

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.Attribute msg -> CellOption msg

When you need to customize a td or th with standard Html.Attribute attributes, use this function


type CellOption msg

Opaque type representing possible styling options for a cell, ie td and th