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.
{ 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
{ 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)
}
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)
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)
{ 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