This sample shows you how to map a built-in region state to a custom state of your choice.
In the example below, the spry:region has no markup that would render when the "ready" state for the region is fired. All of the markup in the region belongs to a specific custom region.
The reason why the data shows up initially in a table is because there is a spry:readystate attribute on the region which maps the "ready" state to "tableState". This means that whenever the region fires off its "ready" state, the region will render whatever content is marked with the "tableState".
You can use the buttons below to map the "ready" state to other custom states.
Changing the value of the select form element causes the data set to load new data. Notice that whenever new data is loaded, the region displays this data with whatever custom state was last used. This is because mapped region states persist across changes in the data, until they are unmapped, or mapped to some other state.
{firstname} {lastname}
| Name | ID | username | Phone |
|---|---|---|---|
| {lastname}, {firstname} | {@id} | {username} | {phone} |