Create a Spry dynamic region and display data

After you create a Spry data set, you bind a Spry dynamic region to the data set. A Spry dynamic region is an area on the page that displays the data and automatically updates the data display whenever the data set is modified.

Make sure that you’ve linked the Spry data library files to your web page and created a Spry data set. For more information, see Working with Spry data sets.
In Code view, create a Spry dynamic region by adding the spry:region attribute to the tag that will contain the region. The attribute uses the syntax: spry:region="datasetName".
Note: Most, but not all, HTML elements can act as containers for dynamic regions. For more information, see Spry dynamic region overview and structure.

For example, to use a div tag as the container for the dynamic region displaying data from the dsSpecials data set, add the spry:region attribute to the tag as follows:
```
<div id="Specials_DIV" spry:region="dsSpecials"></div>
```
Note: Dynamic regions can depend on more than one data set. To add more data sets to the region, list them as additional values of the spry:region attribute, separated by a space. For example, you can create a dynamic region by using spry:region="dsSpecials dsSpecials2 dsSpecials3".
Within the tag containing the dynamic region (this example uses a div tag), insert an HTML element to display the first row of the data set. You can use any HTML element to display data. One of the most typical elements used for this purpose, however, is a two-row HTML table, where the first row contains static column headings and the second row contains the data:
```
<table id="Specials_Table">	
	<tr>		
		<th>Item</th>	
		<th>Description</th>	
		<th>Price</th>	
	</tr>		
	<tr spry:repeat="dsSpecials">	
		<td>{item}</td>
		<td>{description}</td>
		<td>{price}</td>
	</tr>
</table>
```
The values in curly braces in the second row—the data references—specify columns in the data set. The data references bind the table cells to data in specific columns of the data set.

Note: If the Spry region depends on more than one data set, specify the data set to which you’re binding the dynamic region. The full syntax of the data reference takes the form of {datasetName::columnName}. For example, to bind the dynamic region to two or three different data sets, enter the data in the preceding example as follows: {dsSpecials::item}, {dsSpecials::description}, and so forth. Spry regions also support multiple data sets which you can specify by adding the data set names to the value of the attribute, separated by a space (i.e. <div spry:region=”ds1 ds2 ds3”>.

Make the HTML element repeat automatically to display all the rows of the data set by adding the spry:repeat attribute and value to the HTML element tag using the following syntax:

spry:repeat="datasetName"

In the example, you add the spry:repeat attribute to the table row tag as follows (in bold):

<tr spry:repeat="dsSpecials">
	<td>{item}</td>
	<td>{description}</td>	
	<td>{price}</td>
</tr>

In the example, the completed code binding the dynamic region to the data set would look as follows:

<div id="Specials_DIV" spry:region="dsSpecials">
	<table id="Specials_Table">
		<tr>	
			<th>Item</th>	
			<th>Description</th>
			<th>Price</th>		</tr>
		<tr spry:repeat="dsSpecials">
			<td>{item}</td>
			<td>{description}</td>	
			<td>{price}</td>
		</tr>
	</table>
</div>

You can make the dynamic region more interactive by defining click events that allow users to sort data. For instructions, see Let users sort data.