This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
README

AutoGrid

This library extends the mdgriffith/style-elements library with a grid that will include as many rows as there are rows in your data. It is excellent for displaying tables of data, where the amount of data to display is dynamic.

Grid of text

simple : style -> List (Attribute variation msg) -> style -> List (Attribute variation msg) -> AutoGrid String -> Element style variation msg

Create a grid of cells containing only text. This eliminates a lot of the boilerplate that you would need to write if you chose to use grid, but still covers a lot of use cases.

simple accepts a style and attributes-list to apply to the entire grid; a style and attribute-list to apply to each cell in the grid; and finally, an AutoGrid configuration. (Note: the matrix passed in through the configuration object can be of any size, and rows can even be of disparate lengths.)

simple GridStyle
    [ padding 10
    , spacing 10
    ]
    CellStyle
    [ padding 10 ]
    { columns = [ fill, fillPortion 3, fill ]
    , row = fill
    , matrix =
        [ [ "ID", "Name", "Level"]
        , [ "1", "Angelina", "2"]
        , [ "2", "Evan", "3"]
        ]
    }

Grid of custom data

grid : style -> List (Attribute variation msg) -> AutoGrid a -> (a -> Element style variation msg) -> Element style variation msg

Create a grid of custom elements. It allows much more customization of the individual cells by allowing you to pass in a matrix of any kind of data to display.

grid accepts a style and an attributes-list to apply to the entire grid; a transformer function which will take in a single element of the matrix and produce its corresponding Element view; and finally, an AutoGrid configuration. (Note: the matrix passed in through the configuration object can be of any size, and rows can even be of disparate lengths.)

let
    makeEl anInt =
        el CellStyle
            [ padding 10 ]
            (text (toString anInt))
in
    grid GridStyle
        [ padding 10
        , spacing 10
        ]
        { columns = List.repeat 5 fill
        , row = fill
        , matrix =
            List.range 1 10
                |> List.map (\x -> List.range x (x+10))
        }
        makeEl

Configuration

type alias AutoGrid element = { columns : List Length , row : Length , matrix : List (List element) }

A datatype representing a configuration for an autogrid layout.

  • row is a singular Length that represents the height of each row.
  • columns is a list of Lengths that represents the widths of each column (applied left-to-right).
  • matrix is the table of data to be displayed, in the form of a nested List.
module AutoGrid exposing (AutoGrid, simple, grid)

{-| This library extends the [`mdgriffith/style-elements`](https://github.com/mdgriffith/style-elements) library with a grid that will include as many rows as there are rows in your data. It is excellent for displaying tables of data, where the amount of data to display is dynamic.


# Grid of text

@docs simple


# Grid of custom data

@docs grid


# Configuration

@docs AutoGrid

-}

import Element exposing (..)
import Element.Attributes exposing (..)


{-| A datatype representing a configuration for an autogrid layout.

  - `row` is a singular `Length` that represents the height of each row.
  - `columns` is a list of `Length`s that represents the widths of each column (applied left-to-right).
  - `matrix` is the table of data to be displayed, in the form of a nested `List`.

-}
type alias AutoGrid element =
    { columns : List Length
    , row : Length
    , matrix : List (List element)
    }


{-| Create a grid of cells containing only text. This eliminates a lot of the boilerplate that you would need to write if you chose to use `grid`, but still covers a lot of use cases.

`simple` accepts a style and attributes-list to apply to the entire grid; a style and attribute-list to apply to each cell in the grid; and finally, an `AutoGrid` configuration. (*Note*: the `matrix` passed in through the configuration object can be of any size, and rows can even be of disparate lengths.)

    simple GridStyle
        [ padding 10
        , spacing 10
        ]
        CellStyle
        [ padding 10 ]
        { columns = [ fill, fillPortion 3, fill ]
        , row = fill
        , matrix =
            [ [ "ID", "Name", "Level"]
            , [ "1", "Angelina", "2"]
            , [ "2", "Evan", "3"]
            ]
        }

-}
simple : style -> List (Attribute variation msg) -> style -> List (Attribute variation msg) -> AutoGrid String -> Element style variation msg
simple style attrs cellStyle cellAttrs config =
    let
        makeCell label =
            el cellStyle
                cellAttrs
                (text label)
    in
        grid style
            attrs
            config
            makeCell


{-| Create a grid of custom elements. It allows much more customization of the individual cells by allowing you to pass in a matrix of any kind of data to display.

`grid` accepts a style and an attributes-list to apply to the entire grid; a `transformer` function which will take in a single element of the matrix and produce its corresponding `Element` view; and finally, an `AutoGrid` configuration. (*Note*: the `matrix` passed in through the configuration object can be of any size, and rows can even be of disparate lengths.)

    let
        makeEl anInt =
            el CellStyle
                [ padding 10 ]
                (text (toString anInt))
    in
        grid GridStyle
            [ padding 10
            , spacing 10
            ]
            { columns = List.repeat 5 fill
            , row = fill
            , matrix =
                List.range 1 10
                    |> List.map (\x -> List.range x (x+10))
            }
            makeEl

-}
grid : style -> List (Attribute variation msg) -> AutoGrid a -> (a -> Element style variation msg) -> Element style variation msg
grid style attrs config transformer =
    Element.grid style
        attrs
        { columns = config.columns
        , rows = List.repeat (List.length config.matrix) config.row
        , cells = rowsOfCells (List.map (\xs -> List.map transformer xs) config.matrix)
        }


rowsOfCells : List (List (Element style variation msg)) -> List (OnGrid (Element style variation msg))
rowsOfCells contentsList =
    List.concat <|
        rowsOfCells_ 0 contentsList


rowsOfCells_ : Int -> List (List (Element style variation msg)) -> List (List (OnGrid (Element style variation msg)))
rowsOfCells_ rowNum contentsList =
    case contentsList of
        contents :: rest ->
            rowOfCells rowNum contents :: rowsOfCells_ (rowNum + 1) rest

        [] ->
            []


rowOfCells : Int -> List (Element style variation msg) -> List (OnGrid (Element style variation msg))
rowOfCells rowNum contents =
    rowOfCells_ rowNum 0 contents


rowOfCells_ : Int -> Int -> List (Element style variation msg) -> List (OnGrid (Element style variation msg))
rowOfCells_ rowNum colNum contents =
    case contents of
        content :: rest ->
            singleCell rowNum colNum content :: rowOfCells_ rowNum (colNum + 1) rest

        [] ->
            []


singleCell : Int -> Int -> Element style variation msg -> OnGrid (Element style variation msg)
singleCell rowNum colNum content =
    cell
        { start = ( colNum, rowNum )
        , width = 1
        , height = 1
        , content = content
        }