Grid

This library displays a grid of data. It offers filtering, sorting, multiple selection, click event listener and customizable rendering of the lines, cells and columns.

A grid is defined using a Config

The list of data can be very long, thanks to the use of FabienHenon/elm-infinite-list-view under the hood.

Configure the grid

type alias Config a =

{ canSelectRows : Bool

, columns : List (ColumnConfig a)

, containerHeight : Int

, containerWidth : Int

, hasFilters : Bool

, lineHeight : Int

, rowStyle : Item a -> Style

}

The configuration for the grid

gridConfig =
    { canSelectRows = True
    , columns = columnList
    , containerHeight = 500
    , containerWidth = 700
    , hasFilters = True
    , lineHeight = 20
    , rowStyle = rowColor
    }


rowColor : Item -> Style
rowColor item =
    if item.selected then
        backgroundColor (hex "FFE3AA")


    else
        backgroundColor transparent

Configure a column

type alias ColumnConfig a =

{ properties : ColumnProperties

, comparator : Item a -> Item a -> Order

, filteringValue : Maybe String

, filters : Filter a

, renderer : ColumnProperties -> Item a -> Html (Msg a)

}

The configuration for a column. The grid content is described using a list of ColumnConfigs.

idColumn =
    { properties =
        { id = "Id"
        , order = Unsorted
        , title = "Id"
        , visible = True
        , width = 50
        }
    , filters = IntFilter <| intFilter (\item -> item.id)
    , filteringValue = Nothing
    , renderer = viewInt (\item -> item.id)
    , comparator = compareIntField (\item -> item.id)
    }

Configure the column sorting

compareBoolField : (Item a -> Bool) -> Item a -> Item a -> Order

Compares two boolean. Use this function in a ColumnConfig to define how the values in a given column should be compared. The unique parameter to be provided is a lambda which returns the field to be displayed in this column.

comparator =
    compareBoolField (\item -> item.even)

compareFloatField : (Item a -> Float) -> Item a -> Item a -> Order

Compares two floating point numbers. Use this function in a ColumnConfig to define how the values in a given column should be compared. The unique parameter to be provided is a lambda which returns the field to be displayed in this column.

comparator =
    compareFloatField (\item -> item.value)

compareIntField : (Item a -> Int) -> Item a -> Item a -> Order

Compares two integers. Use this function in a ColumnConfig to define how the values in a given column should be compared. The unique parameter to be provided is a lambda which returns the field to be displayed in this column.

comparator =
    compareIntField (\item -> item.id)

compareStringField : (Item a -> String) -> Item a -> Item a -> Order

Compares two strings. Use this function in a ColumnConfig to define how the values in a given column should be compared. The unique parameter to be provided is a lambda which returns the field to be displayed in this column.

comparator =
    compareStringField (\item -> item.name)

Configure the column rendering

viewBool : (Item a -> Bool) -> ColumnProperties -> Item a -> Html (Msg a)

Renders a cell containing a boolean value. Use this function in a ColumnConfig to define how the values in a given column should be rendered. The unique parameter to be provided is a lambda which returns the field to be displayed in this column.

renderer =
    viewBool (\item -> item.even)

viewFloat : (Item a -> Float) -> ColumnProperties -> Item a -> Html (Msg a)

Renders a cell containing a floating number. Use this function in a ColumnConfig to define how the values in a given column should be rendered. The unique parameter to be provided is a lambda which returns the field to be displayed in this column.

renderer =
    viewFloat (\item -> item.value)

viewInt : (Item a -> Int) -> ColumnProperties -> Item a -> Html (Msg a)

Renders a cell containing an int value. Use this function in a ColumnConfig to define how the values in a given column should be rendered. The unique parameter to be provided is a lambda which returns the field to be displayed in this column.

renderer =
    viewInt (\item -> item.id)

viewProgressBar : Int -> (Item a -> Float) -> ColumnProperties -> Item a -> Html (Msg a)

Renders a progress bar in a a cell containing a integer. Use this function in a ColumnConfig to define how the values in a given column should be rendered. The unique parameter to be provided is a lambda which returns the field to be displayed in this column.

renderer =
    viewProgressBar 8 (\item -> item.value)

viewString : (Item a -> String) -> ColumnProperties -> Item a -> Html (Msg a)

Renders a cell containing a string. Use this function in a ColumnConfig to define how the values in a given column should be rendered. The unique parameter to be provided is a lambda which returns the field to be displayed in this column.

renderer =
    viewString (\item -> item.name)

Boilerplate

type alias Model a =

{ clickedItem : Maybe (Item a)

, config : Config a

, content : List (Item a)

, infList : Model

, order : Sorting

, sortedBy : Maybe (ColumnConfig a)

}

The grid model. You'll use it but should not have to access its fields, and definitely should not modify them directly

init : Config a -> List (Item a) -> Model a

Initializes the grid model, according to the given grid configuration and content.

  init : () -> ( Model, Cmd Msg )
  init _ =
     ( { gridModel = Grid.init gridConfig items
       }
     , Cmd.none
     )

update : Msg a -> Model a -> ( Model a, Cmd (Msg a) )

Updates the grid model

view : Model a -> Html (Msg a)

Renders the grid

Docs for Msg

It seems that Msg(..) does not have any docs. The module's documentation names it in an @docs line, but the package does not expose it.

#Docs for Sorting

It seems that Sorting(..) does not have any docs. The module's documentation names it in an @docs line, but the package does not expose it.

xdelph/elm-slick-grid/1.1.0