pattern

Stateful lists

Ten disclosures per page in a scrollable viewport. Paging removes the old items, so expanded rows start collapsed when they return.

Showing 1-10 of 20

Page code

// Page
<div class="ui-disclosure-list">
	for _, item := range model.Visible {
		<ui.Disclosure key={ item.ID } item={ item } />
	}
</div>
<div class="row">
	<ui.Button label="Previous page" primary={ false } onclick={ PrevPage{} } />
	<ui.Button label="Next page" primary={ true } onclick={ NextPage{} } />
</div>
<p class="server-count">{ model.PageLabel }</p>

// Messages and update
type NextPage struct{}
type PrevPage struct{}

case NextPage:
	m.ListPage = 1
	m.Visible = m.PageTwo
	m.PageLabel = "Showing 11-20 of 20"
case PrevPage:
	m.ListPage = 0
	m.Visible = m.PageOne
	m.PageLabel = "Showing 1-10 of 20"