<table class="o-table o-table--horizontal-lines " data-o-component="o-table">
<thead>
<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 (GBP)</th>
<th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (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>
<table class="o-table o-table--horizontal-lines o-table--compact" data-o-component="o-table">
<thead>
<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 (GBP)</th>
<th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (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>
Caption elements may include flow content such as a heading, this demo uses o-typography to add a h2. The footer may also include any flow content, but in this case uses the footnote class to style a source.
<table class="o-table o-table--horizontal-lines " data-o-component="o-table">
<caption class="o-table__caption">
<h2 class="o-typography-heading-level-2">Table Caption</h2>
</caption>
<tfoot>
<tr>
<td colspan="5" class="o-table-footnote">
Source: The Origami team's love of fruit.
</td>
</tr>
</tfoot>
<thead>
<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 (GBP)</th>
<th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (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>
Open demo and shrink browser to preview. On small viewports this table overflows and may be scrolled left/right. This demo includes the optional row stripes from the previous demo.
<div class="o-table-container">
<div class="o-table-overlay-wrapper">
<div class="o-table-scroll-wrapper">
<table aria-describedby=" demo-footnote" class="o-table o-table--horizontal-lines o-table--responsive-overflow" data-o-component="o-table" data-o-table-responsive="overflow">
<thead>
<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 (GBP)</th>
<th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (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>
Open demo and shrink browser to preview. This table moves headers into the first column on small viewports. The headers stick to the left edge as the table data is scrolled. This demo includes the optional row stripes from the previous demo.
<div class="o-table-container">
<div class="o-table-overlay-wrapper">
<div class="o-table-scroll-wrapper">
<table aria-describedby=" demo-footnote" class="o-table o-table--horizontal-lines o-table--responsive-scroll" data-o-component="o-table" data-o-table-responsive="scroll">
<thead>
<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 (GBP)</th>
<th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (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>
Open demo and shrink browser to preview. Each entry in the flat table is shown individually with headers on small viewports. This demo includes the optional row stripes from the previous demo.
<div class="o-table-container">
<div class="o-table-overlay-wrapper">
<div class="o-table-scroll-wrapper">
<table aria-describedby=" demo-footnote" class="o-table o-table--horizontal-lines o-table--responsive-flat" data-o-component="o-table" data-o-table-responsive="flat">
<thead>
<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 (GBP)</th>
<th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (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>
Open demo and shrink browser to preview. Responsive Overflow tables may be configured to expand/contract.
<div class="o-table-container">
<div class="o-table-overlay-wrapper">
<div class="o-table-scroll-wrapper">
<table class="o-table o-table--horizontal-lines o-table--responsive-overflow" data-o-component="o-table" data-o-table-responsive="overflow" data-o-table-minimum-row-count="10" data-o-table-expanded="false">
<thead>
<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 (GBP)</th>
<th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (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>
<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>
<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>
<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 class="o-table-footnote">
Source: The Origami team's love of fruit.
</div>
</div>
This demo shows sorting columns of various data types, including FT style dates, times, and abbreviated numbers. The demo also shows a column with sort disabled.
<div class="o-table-container">
<div class="o-table-scroll-wrapper">
<table class="o-table o-table--horizontal-lines" data-o-component="o-table">
<thead>
<tr>
<th scope="col" role="columnheader">Links</th>
<th scope="col" role="columnheader" data-o-table-data-type="date">Date</th>
<th scope="col" role="columnheader" data-o-table-data-type="date"><abbr title="Abbreviated">ABBR</abbr> Date</th>
<th scope="col" role="columnheader" data-o-table-data-type="date">Date & Time</th>
<th scope="col" role="columnheader" data-o-table-data-type="date">Time</th>
<th scope="col" role="columnheader" data-o-table-data-type="number">Formatted numbers</th>
<th scope="col" role="columnheader" data-o-table-data-type="number"><abbr title="Abbreviated">ABBR</abbr> numbers</th>
<th scope="col" role="columnheader" data-o-table-data-type="number">Ranged numbers</th>
<th scope="col" role="columnheader" data-o-table-data-type="currency">Ranged currency</th>
<th scope="col" role="columnheader" data-o-table-data-type="currency"><abbr title="Abbreviated">ABBR</abbr> currency</th>
<th scope="col" role="columnheader" data-o-table-data-type="percent">Percentage</th>
<!-- do not show the actions column as sortable -->
<th scope="col" role="columnheader" data-o-table-heading-disable-sort="">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="o-typography-link" href="https://en.wikipedia.org/wiki/Pitaya">Dragonfruit <i class="list-view__icon o-icons-icon o-icons-icon--tick"></i></a></td>
<td>August 17 2018</td>
<td>Aug 17</td>
<td>Aug 17 9pm</td>
<td>1.30am</td>
<td>138,000</td>
<td>84m</td>
<td>5m–10m</td>
<td>$84m–$86m</td>
<td>$84m</td>
<td>30%</td>
<td><a class="o-typography-link" href="#">Edit</a></td>
</tr>
<tr>
<td><a class="o-typography-link" href="https://en.wikipedia.org/wiki/Durian">Durian*</a></td>
<td>August 02 2012</td>
<td>Aug 7</td>
<td>Aug 17 10am</td>
<td>1.30pm</td>
<td>1,439,165.43**</td>
<td>36bn</td>
<td>5bn–8bn</td>
<td>£36bn–£40bn</td>
<td>£36bn</td>
<td>50%</td>
<td><a class="o-typography-link" href="#">Edit</a></td>
</tr>
<tr>
<td><a class="o-typography-link" href="https://en.wikipedia.org/wiki/Manilkara_zapota">Naseberry</a></td>
<td>August 10 2012</td>
<td>Dec 21</td>
<td>February 12 4.05pm</td>
<td>2.45pm</td>
<td>1.28</td>
<td>1.5bn</td>
<td>8.6tn–12tn</td>
<td>HK$74.9bn–HK$90bn</td>
<td>HK$74.9bn</td>
<td>15%</td>
<td><a class="o-typography-link" href="#">Edit</a></td>
</tr>
<tr>
<td><a class="o-typography-link" href="https://en.wikipedia.org/wiki/Gruy%C3%A8re_cheese">Gruyère</a></td>
<td>February 03 2018</td>
<td>Feb 16</td>
<td>February 12 4.20pm</td>
<td>5.00am</td>
<td>138,000.45</td>
<td>8.27tn</td>
<td>1.3–5</td>
<td>Rp14.595–Rp20</td>
<td>Rp14.595</td>
<td>60%</td>
<td><a class="o-typography-link" href="#">Edit</a></td>
</tr>
<tr>
<td><a class="o-typography-link" href="https://en.wikipedia.org/wiki/Pitaya">Dragonfruit <i class="list-view__icon o-icons-icon o-icons-icon--tick"></i></a></td>
<td>August 17 2018</td>
<td>Aug 17</td>
<td>Aug 17 9pm</td>
<td>1.30am</td>
<td>138,000</td>
<td>84m</td>
<td>5m–10m</td>
<td>$84m–$86m</td>
<td>$84m</td>
<td>30%</td>
<td><a class="o-typography-link" href="#">Edit</a></td>
</tr>
<tr>
<td><a class="o-typography-link" href="https://en.wikipedia.org/wiki/Durian">Durian*</a></td>
<td>August 02 2012</td>
<td>Aug 7</td>
<td>Aug 17 10am</td>
<td>1.30pm</td>
<td>1,439,165.43**</td>
<td>36bn</td>
<td>5bn–8bn</td>
<td>£36bn–£40bn</td>
<td>£36bn</td>
<td>50%</td>
<td><a class="o-typography-link" href="#">Edit</a></td>
</tr>
<tr>
<td><a class="o-typography-link" href="https://en.wikipedia.org/wiki/Manilkara_zapota">Naseberry</a></td>
<td>August 10 2012</td>
<td>Dec 21</td>
<td>February 12 4.05pm</td>
<td>2.45pm</td>
<td>1.28</td>
<td>1.5bn</td>
<td>8.6tn–12tn</td>
<td>HK$74.9bn–HK$90bn</td>
<td>HK$74.9bn</td>
<td>15%</td>
<td><a class="o-typography-link" href="#">Edit</a></td>
</tr>
<tr>
<td><a class="o-typography-link" href="https://en.wikipedia.org/wiki/Gruy%C3%A8re_cheese">Gruyère</a></td>
<td>February 03 2018</td>
<td>Feb 16</td>
<td>February 12 4.20pm</td>
<td>5.00am</td>
<td>138,000.45</td>
<td>8.27tn</td>
<td>1.3–5</td>
<td>Rp14.595–Rp20</td>
<td>Rp14.595</td>
<td>60%</td>
<td><a class="o-typography-link" href="#">Edit</a></td>
</tr>
</tbody>
</table>
</div>
</div>
Adds a modifier class to make alternate table rows striped. An alternative to lined tables.
<table class="o-table o-table--row-stripes" data-o-component="o-table">
<thead>
<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 (GBP)</th>
<th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (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>
<table class="o-table o-table--horizontal-lines" data-o-component="o-table">
<thead>
<tr>
<th>Report date</th>
<th data-o-table-heading-disable-sort="">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="o-table__cell--vertically-center">Vertically centred row</td>
<td class="o-table__cell--vertically-center">
<div><a class="o-typography-link" href="#">View</a></div>
<div><a class="o-typography-link" href="#">Edit</a></div>
<div><a class="o-typography-link" href="#">Download</a></div>
</td>
</tr>
<tr>
<td class="o-table__cell--vertically-center">Another vertically centred row</td>
<td class="o-table__cell--vertically-center">
<div><a class="o-typography-link" href="#">View</a></div>
<div><a class="o-typography-link" href="#">Edit</a></div>
<div><a class="o-typography-link" href="#">Download</a></div>
</td>
</tr>
<tr>
<td class="o-table__cell--vertically-center">A third vertically centred row</td>
<td class="o-table__cell--vertically-center">
<div><a class="o-typography-link" href="#">View</a></div>
<div><a class="o-typography-link" href="#">Edit</a></div>
<div><a class="o-typography-link" href="#">Download</a></div>
</td>
</tr>
</tbody>
</table>
This demo shows a table with columns which may be filtered by a value.
<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">
Showing data for:
</span>
</span>
<span class="o-forms-input o-forms-input--select o-forms-input--invalid">
<select data-o-table-filter-id="fruit-table" 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>
</label>
</div>
<div class="o-table-container">
<div class="o-table-overlay-wrapper">
<div class="o-table-scroll-wrapper">
<table id="fruit-table" aria-describedby="demo-table-caption demo-footnote" class="o-table o-table--horizontal-lines o-table--responsive-overflow" data-o-component="o-table" data-o-table-responsive="overflow">
<thead>
<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 (GBP)</th>
<th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (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>