{{#showFilter}}
	<div id="demo-table-caption">
		<h2 class="o-typography-heading-level-2">Table Caption</h2>

		<label class="o-forms-field o-forms-field--inline o--if-js o-forms-field--demo">
			<span class="o-forms-title o-forms-title--vertical-center o-forms-title--shrink">
				<span class="o-forms-title__main">
					Filter by characteristic:
				</span>
			</span>

			{{#showTextFilter}}
			<span class="o-forms-input o-forms-input--text o-forms-input--invalid">
				<input type="text" data-o-table-filter-id="{{tableId}}" data-o-table-filter-column="2" id="demo-filter-select" class="o-forms__text"/>
			</span>
			{{/showTextFilter}}
			{{#showSelectFilter}}
			<span class="o-forms-input o-forms-input--select o-forms-input--invalid">
				<select data-o-table-filter-id="{{tableId}}" data-o-table-filter-column="2" id="demo-filter-select" class="o-forms__select">
					<option value="">All</option>
					<option value="Juicy">Juicy</option>
					<option value="Smelly">Smelly</option>
					<option value="Chewy">Chewy</option>
					<option value="Sweet">Sweet</option>
					<option value="Crunchy">Crunchy</option>
				</select>
			</span>
			{{/showSelectFilter}}
		</label>
	</div>
{{/showFilter}}
<div class="o-table-container">
	<div class="o-table-overlay-wrapper">
		<div class="o-table-scroll-wrapper">
			<table
				{{#tableId}}id="{{tableId}}"{{/tableId}}
				aria-describedby="{{#showFilter}}demo-table-caption{{/showFilter}} demo-footnote"
				class="o-table o-table--horizontal-lines {{modifierClass}} {{#tableType}}o-table--responsive-{{tableType}}{{/tableType}}"
				data-o-component="o-table"
				{{#tableType}}data-o-table-responsive="{{tableType}}"{{/tableType}}>
				<thead>
					{{#multipleHeaderRows}}
					<tr>
						<th scope="col" role="columnheader" colspan="4">Description</th>
						<th scope="col" role="columnheader" colspan="4">Price</th>
					</tr>
					{{/multipleHeaderRows}}
					<tr>
						<th scope="col" role="columnheader">Fruit</th>
						<th scope="col" role="columnheader">Genus</th>
						<th scope="col" role="columnheader">Characteristic</th>
						<th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost&nbsp;(GBP)</th>
						<th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost&nbsp;(EUR)</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Dragonfruit</td>
						<td>Stenocereus</td>
						<td>Juicy</td>
						<td class="o-table__cell--numeric">3</td>
						<td class="o-table__cell--numeric">2.72</td>
					</tr>
					<tr>
						<td>Durian</td>
						<td>Durio</td>
						<td>Smelly</td>
						<td class="o-table__cell--numeric">1.75</td>
						<td class="o-table__cell--numeric">1.33</td>
					</tr>
					<tr>
						<td>Naseberry</td>
						<td>Manilkara</td>
						<td>Chewy</td>
						<td class="o-table__cell--numeric">2</td>
						<td class="o-table__cell--numeric">1.85</td>
					</tr>
					<tr>
						<td>Strawberry</td>
						<td>Fragaria</td>
						<td>Sweet</td>
						<td class="o-table__cell--numeric">1.5</td>
						<td class="o-table__cell--numeric">1.69</td>
					</tr>
					<tr>
						<td>Apple</td>
						<td>Malus</td>
						<td>Crunchy</td>
						<td class="o-table__cell--numeric">0.5</td>
						<td class="o-table__cell--numeric">0.56</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div id="demo-footnote" class="o-table-footnote">
		Source: The Origami team's love of fruit.
	</div>
</div>