Material.DataTable

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

Resources
Basic Usage
Data Table
Header Row
Header Cell
- Numeric Header Cell
- Checkbox Header Cell
Row
- Selected Row
Cell
- Numeric Cell
- Checkbox Cell

Resources

Basic Usage

import Material.DataTable
    exposing
        ( dataTable
        , dataTableCell
        , dataTableCellConfig
        , dataTableConfig
        , dataTableHeaderCell
        , dataTableHeaderCellConfig
        , dataTableHeaderRow
        , dataTableRow
        , dataTableRowConfig
        )


main =
    dataTable dataTableConfig
        { thead =
            [ dataTableHeaderRow []
                [ dataTableHeaderCell
                    dataTableHeaderCellConfig
                    [ text "Desert" ]
                ]
            ]
        , tbody =
            [ dataTableRow dataTableRowConfig
                [ dataTableCell dataTableCellConfig
                    [ text "Frozen yogurt" ]
                ]
            ]
        }

Data Table

dataTable :

DataTableConfig msg

-> { thead : List (DataTableHeaderRow msg)

, tbody : List (DataTableRow msg)

}

-> Html msg

Data Table view function

dataTableConfig : DataTableConfig msg

Default configuration of a data table

Header Row

dataTableHeaderRow :

List (Attribute msg)

-> List (DataTableHeaderCell msg)

-> DataTableHeaderRow msg

Header row view function

type DataTableHeaderRow msg

Header row type

Header Cell

dataTableHeaderCell :

DataTableHeaderCellConfig msg

-> List (Html msg)

-> DataTableHeaderCell msg

Header cell view function

type DataTableHeaderCell msg

Header cell type

dataTableHeaderCellConfig : DataTableHeaderCellConfig msg

Default configuration of a header cell

type alias DataTableHeaderCellConfig msg =

{ numeric : Bool

, checkbox : Bool

, additionalAttributes : List (Attribute msg)

}

Configuration of a header cell

Numeric Header Cell

dataTableHeaderCell
    { dataTableHeaderCellConfig | numeric = True }
    [ text "Number" ]

Checkbox Header Cell

import Material.Checkbox exposing (checkboxConfig)


dataTableHeaderCell
    { dataTableHeaderCellConfig | checkbox = True }
    [ dataTableHeaderRowCheckbox checkboxConfig ]

dataTableHeaderRowCheckbox : CheckboxConfig msg -> Html msg

Checkbox view function (header row variant)

Row

dataTableRow :

DataTableRowConfig msg

-> List (DataTableCell msg)

-> DataTableRow msg

Row view function

type DataTableRow msg

Row type

dataTableRowConfig : DataTableRowConfig msg

Default configuration of a row

type alias DataTableRowConfig msg =

{ selected : Bool

, additionalAttributes : List (Attribute msg)

}

Configuartion of a row

Selected Row

dataTableRow { dataTableRowConfig | selected = True }
  [ … ]

Cell

dataTableCell : DataTableCellConfig msg -> List (Html msg) -> DataTableCell msg

Cell view function

type DataTableCell msg

Cell type

dataTableCellConfig : DataTableCellConfig msg

Default configuration of a cell

type alias DataTableCellConfig msg =

{ numeric : Bool

, checkbox : Bool

, additionalAttributes : List (Attribute msg)

}

Configuration of a cell

Numeric Cell

dataTableCell { dataTableCellConfig | numeric = True }
    [ text "123" ]

Checkbox Cell

import Material.Checkbox exposing (checkboxConfig)


dataTableCell { dataTableCellConfig | checkbox = True }
    [ dataTableRowCheckbox checkboxConfig ]

dataTableRowCheckbox : CheckboxConfig msg -> Html msg

Checkbox view function (row variant)

aforemny/material-components-web-elm/2.1.0

Material.DataTable

Table of Contents

Resources

Basic Usage

Data Table

Header Row

Header Cell

Numeric Header Cell

Checkbox Header Cell

Row

Selected Row

Cell

Numeric Cell

Checkbox Cell

Modules

Material