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.
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.