rjbma / elm-listview / ListView.Viewers

Standard viewers for ListView.

The idea is that you first configure the list using functions from the ListView module and then use this module to transform that into Html. Check the documentation of ListView for details.

viewAsHtmlTable : (ListViewMsg -> msg) -> ListView.Config a msg -> ListView.State -> List a -> Html msg

Views the ListView as a HTML table.

Generated markup looks like:

    <table class="listView listView--htmlTable">
        <thead class="listView-header">
            <tr>
                <th class="listView-headerColumn listView-headerColumn--colCode">...</th>
                ...
            </tr>
        </thead>
        <tbody>
            <tr class="listView-row">
                <td>
                    <div class="listView-column listView-column--colCode">...</div>
                </td>
                ...
            </tr>
        </tbody>
        <tfoot class="listView-footer">
            <tr>
                <td colspan="$numCols">
                    <div class="listView-paginator">...</div>
                </td>
            </tr>
        </tfoot>
    </table>

viewAsCssGrid : (ListViewMsg -> msg) -> ListView.Config a msg -> ListView.State -> List a -> Html msg

Views the List as a bunch of HTML elements that can by laid out using CSS only (ususlly CSS Grid or Flexbox) as a CSS grid.

Generated markup looks like:

    <div class="listView listView--cssGrid">
        <div class="listView-header">
            <th class="listView-headerColumn listView-headerColumn--colCode">...</th>
            ...
        </div>
        <div class="listView-row">
            <div class="listView-column listView-column--colCode">...</div>
            ...
        </div>
        ...
        <div class="listView-paginator">...</div>
    </div>

update : List a -> ListViewMsg -> ListView.State -> ListView.State

Main function for updating the ListView state. Should be called by the app's update function.

Note that, even if you decide to implement your own viewer, you can still use this update function message type (provided it's enough for your use case, of course). In that case, you'll also have to user ListViewMsg as well.


type ListViewMsg

Messages specific to the standard ListView viewers included in this module.

Note that, even if you decide to implement your own viewer, you can still use this message type (provided it's enough for your use case, of course). In that case, you'll probably want to use ListView.Viewers.update as well.