xdelph / elm-slick-grid / 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 : Basics.Bool
, columns : List (ColumnConfig a)
, containerHeight : Basics.Int
, containerWidth : Basics.Int
, hasFilters : Basics.Bool
, lineHeight : Basics.Int
, rowStyle : Filters.Item a -> Css.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 : Filters.Item a -> Filters.Item a -> Basics.Order
, filteringValue : Maybe String
, filters : Filters.Filter a
, renderer : ColumnProperties -> Filters.Item a -> Html.Styled.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 : (Filters.Item a -> Basics.Bool) -> Filters.Item a -> Filters.Item a -> Basics.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 : (Filters.Item a -> Basics.Float) -> Filters.Item a -> Filters.Item a -> Basics.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 : (Filters.Item a -> Basics.Int) -> Filters.Item a -> Filters.Item a -> Basics.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 : (Filters.Item a -> String) -> Filters.Item a -> Filters.Item a -> Basics.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 : (Filters.Item a -> Basics.Bool) -> ColumnProperties -> Filters.Item a -> Html.Styled.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 : (Filters.Item a -> Basics.Float) -> ColumnProperties -> Filters.Item a -> Html.Styled.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 : (Filters.Item a -> Basics.Int) -> ColumnProperties -> Filters.Item a -> Html.Styled.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 : Basics.Int -> (Filters.Item a -> Basics.Float) -> ColumnProperties -> Filters.Item a -> Html.Styled.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 : (Filters.Item a -> String) -> ColumnProperties -> Filters.Item a -> Html.Styled.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 (Filters.Item a)
, config : Config a
, content : List (Filters.Item a)
, infList : InfiniteList.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 (Filters.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, Platform.Cmd.Cmd (Msg a) )

Updates the grid model

view : Model a -> Html (Msg a)

Renders the grid

Docs for Msg