aforemny / material-components-web-elm / Material.DataTable

Data tables display information in a way that’s easy to scan, so that users can look for patterns and insights.

Table of Contents

Resources

Basic Usage

import Material.DataTable as DataTable

main =
    DataTable.dataTable DataTable.config
        { thead =
            [ DataTable.row []
                [ DataTable.cell [] [ text "Desert" ] ]
            ]
        , tbody =
            [ DataTable.row []
                [ DataTable.cell [] [ text "Frozen yogurt" ]
                ]
            ]
        }

Configuration


type Config msg

Configuration of a data table

config : Config msg

Default configuration of a data table

Configuration Options

setLabel : Maybe String -> Config msg -> Config msg

Specify the data table's HTML5 aria-label attribute

setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Data Table

dataTable : Config msg -> { thead : List (Row msg), tbody : List (Row msg) } -> Html msg

Data table view function

Row


type Row msg

Row type

row : List (Html.Attribute msg) -> List (Cell msg) -> Row msg

Row view function

Selected Row

DataTable.row DataTable.selected []

selected : List (Html.Attribute msg)

Attribute to mark a row as selected

This has no effect on a header row.

Note that this is a list of attributes because it actually sets two HTML attributes at once.

Cell


type Cell msg

Cell type

cell : List (Html.Attribute msg) -> List (Html msg) -> Cell msg

Data table cell

Numeric Cell

DataTable.numericCell [] [ text "9.000,00" ]

numericCell : List (Html.Attribute msg) -> List (Html msg) -> Cell msg

Numeric data table cell (right-aligned contents)

Checkbox Cell

import Material.Checkbox as Checkbox

DataTable.checkboxCell [] Checkbox.config

checkboxCell : List (Html.Attribute msg) -> Material.Checkbox.Config msg -> Cell msg

Data table cell that contians a checkbox