Virtual List

VirtualList is an Elm module for efficiently displaying large lists by rendering only the visible items within the viewport, plus a configurable buffer. It dynamically measures the height of displayed elements to ensure smooth scrolling and performance.

Features

• Virtualization: Only renders visible items for improved performance.
• Dynamic Measurement: Adjusts heights dynamically for accurate layout.
• Configurable Buffering: Allows fine-tuning for smooth scrolling.
• Supports Scrolling to Items: Provides methods to navigate programmatically.

Alternative

In case you know the heights in advance you might get a better performance by using FabienHenon/elm-infinite-list-view.

Installation

In your project directory run:

elm install dominikmayer/elm-virtual-list

Usage

Model Setup

Include VirtualList.Model in your app's model:

import VirtualList

type alias Model =
    { virtualList : VirtualList.Model
    -- other fields
    }

defaultModel : Model
defaultModel =
    { virtualList = VirtualList.init
    -- other fields
    }

Update Function

Include VirtualList.Msg in your app’s update function:

type Msg
    = VirtualListMsg VirtualList.Msg
    -- other messages

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        VirtualListMsg virtualListMsg ->
            let
                ( virtualListModel, virtualListCmd ) =
                    VirtualList.update virtualListMsg model.virtualList
            in
                ( { model | virtualList = virtualListModel }, Cmd.map VirtualListMsg virtualListCmd )
        -- other cases

Rendering

Render the virtual list in your view:

view : Model -> Html Msg
view model =
    VirtualList.view (renderRow model) model.virtualList VirtualListMsg

renderRow : Model -> String -> Html Msg
renderRow model id =
    div [] [text id]

Example

Check out Obsidian Note ID for an example implementation.