Data tables display information in a way that’s easy to scan, so that users can look for patterns and insights.
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 of a data table
config : Config msg
Default configuration of a data table
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
dataTable : Config msg -> { thead : List (Row msg), tbody : List (Row msg) } -> Html msg
Data table view function
Row type
row : List (Html.Attribute msg) -> List (Cell msg) -> Row msg
Row view function
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 : List (Html.Attribute msg) -> List (Html msg) -> Cell msg
Data table cell
DataTable.numericCell [] [ text "9.000,00" ]
numericCell : List (Html.Attribute msg) -> List (Html msg) -> Cell msg
Numeric data table cell (right-aligned contents)
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