Material.DataTable

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

Resources
Configution
- Configuration Options
Basic Usage
Data Table
Row
- Selected Row
Cell
- Numeric Cell
- Checkbox Cell

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 (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 (Attribute msg) -> List (Cell msg) -> Row msg

Row view function

Selected Row

DataTable.row DataTable.selected []

selected : List (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 (Attribute msg) -> List (Html msg) -> Cell msg

Data table cell

Numeric Cell

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

numericCell : List (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 (Attribute msg) -> Config msg -> Cell msg

Data table cell that contians a checkbox

aforemny/material-components-web-elm/3.0.1