Open primary navigation
Origami Frontend Components & Services

Demos: o-table

Basic

Open demo in a new tab 
<table class="o-table " data-o-component="o-table">
	<thead>
		<tr>
			<th>Fruit</th>
			<th>Genus</th>
			<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(GBP)</span></th>
			<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(EUR)</span></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Dragonfruit</td>
			<td>Stenocereus</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.56</td>
		</tr>
		<tr>
			<td>Durian</td>
			<td>Durio</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
		</tr>
		<tr>
			<td>Naseberry</td>
			<td>Manilkara</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric"></td>
		</tr>
		<tr>
			<td>gruy&#xE8;re</td>
			<td>sourdough</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">7</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric"></td>
		</tr>
	</tbody>
</table>

<table class="o-table " data-o-component="o-table">
	<thead>
		<tr>
			<th>Fruit<span class="o-table__cell--content-secondary">Common Name</span></th>
			<th>Genus<span class="o-table__cell--content-secondary">Scientific Name</span></th>
			<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(GBP)</span></th>
			<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(EUR)</span></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Dragonfruit</td>
			<td>Stenocereus</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric"></td>
		</tr>
		<tr>
			<td>Durian</td>
			<td>Durio</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
		</tr>
		<tr>
			<td>Naseberry</td>
			<td>Manilkara</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.56</td>
		</tr>
	</tbody>
</table>

Compact

Open demo in a new tab 
<table class="o-table o-table--compact" data-o-component="o-table">
	<thead>
		<tr>
			<th>Fruit</th>
			<th>Genus</th>
			<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(GBP)</span></th>
			<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(EUR)</span></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Dragonfruit</td>
			<td>Stenocereus</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.56</td>
		</tr>
		<tr>
			<td>Durian</td>
			<td>Durio</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
		</tr>
		<tr>
			<td>Naseberry</td>
			<td>Manilkara</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric"></td>
		</tr>
		<tr>
			<td>gruy&#xE8;re</td>
			<td>sourdough</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">7</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric"></td>
		</tr>
	</tbody>
</table>

<table class="o-table o-table--compact" data-o-component="o-table">
	<thead>
		<tr>
			<th>Fruit<span class="o-table__cell--content-secondary">Common Name</span></th>
			<th>Genus<span class="o-table__cell--content-secondary">Scientific Name</span></th>
			<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(GBP)</span></th>
			<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(EUR)</span></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Dragonfruit</td>
			<td>Stenocereus</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric"></td>
		</tr>
		<tr>
			<td>Durian</td>
			<td>Durio</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
		</tr>
		<tr>
			<td>Naseberry</td>
			<td>Manilkara</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.56</td>
		</tr>
	</tbody>
</table>

Captions

Open demo in a new tab 
<table class="o-table" data-o-component="o-table">
	<caption class="o-table__caption--top">
		Top caption (default)
	</caption>
	<caption class="o-table__caption--bottom">
		Bottom caption
	</caption>
	<tr>
		<th>Fruit</th>
		<th>Genus</th>
		<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(GBP)</span></th>
		<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(EUR)</span></th>
	</tr>
	<tr>
		<td>Dragonfruit</td>
		<td>Stenocereus</td>
		<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
		<td data-o-table-data-type="numeric" class="o-table__cell--numeric"></td>
	</tr>
	<tr>
		<td>Durian</td>
		<td>Durio</td>
		<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
		<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
	</tr>
	<tr>
		<td>Naseberry</td>
		<td>Manilkara</td>
		<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1</td>
		<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.56</td>
	</tr>
</table>

Row Stripes

Open demo in a new tab 
<table class="o-table o-table--row-stripes" data-o-component="o-table">
	<thead>
		<th>Fruit</th>
		<th>Characteristic</th>
		<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Popularity (%)</th>
	</thead>
	<tbody>
		<tr>
			<td>Naseberry</td>
			<td>chewy</td>
			<td class="o-table__cell--numeric">4</td>
		</tr>
		<tr>
			<td>Dragonfruit</td>
			<td>juicy</td>
			<td class="o-table__cell--numeric">71</td>
		</tr>
		<tr>
			<td>Durian</td>
			<td>smelly</td>
			<td class="o-table__cell--numeric">32</td>
		</tr>
	</tbody>
</table>

Cell styles

Open demo in a new tab 
<table class="o-table o-table--row-stripes" data-o-component="o-table">
	<thead>
		<th>Report date</th>
		<th data-o-table-heading-disable-sort="">Action</th>
	</thead>
	<tbody>
		<tr>
			<td class="o-table__cell--vertically-center">Vertically centred</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="#">Download</a></div>
			</td>
		</tr>
		<tr>
			<td class="o-table__cell--vertically-center">with</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="#">Download</a></div>
			</td>
		</tr>
		<tr>
			<td class="o-table__cell--vertically-center">.o-table__cell--vertically-center class</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="#">Download</a></div>
			</td>
		</tr>
	</tbody>
</table>

Responsive Flat

This is a flat responsive version

Open demo in a new tab 
<table class="o-table o-table--responsive-flat" data-o-component="o-table" data-o-table-responsive="flat">
	<thead>
		<tr>
			<th>Fruit</th>
			<th>Genus</th>
			<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (GBP)</th>
			<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (EUR)</th>
			<th>Characteristic</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Dragonfruit</td>
			<td>Stenocereus</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2.72</td>
			<td>juicy</td>
		</tr>
		<tr>
			<td>Durian</td>
			<td>Durio</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.75</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.33</td>
			<td>smelly</td>
		</tr>
		<tr>
			<td>Naseberry</td>
			<td>Manilkara</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
			<td>chewy</td>
		</tr>
	</tbody>
</table>

Responsive Overflow

This is an overflow responsive version

Open demo in a new tab 
<table class="o-table o-table--responsive-overflow" data-o-component="o-table">
	<thead>
		<tr>
			<th>Fruit</th>
			<th>Genus</th>
			<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (GBP)</th>
			<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (EUR)</th>
			<th>Characteristic</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Dragonfruit</td>
			<td>Stenocereus</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2.72</td>
			<td>juicy</td>
		</tr>
		<tr>
			<td>Durian</td>
			<td>Durio</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.75</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.33</td>
			<td>smelly</td>
		</tr>
		<tr>
			<td>Naseberry</td>
			<td>Manilkara</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
			<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
			<td>chewy</td>
		</tr>
	</tbody>
</table>

Responsive Scroll

This is a scrolling responsive version

Open demo in a new tab 
<table class="o-table o-table--responsive-scroll" data-o-component="o-table">
		<thead>
			<tr>
				<th>Fruit</th>
				<th>Genus</th>
				<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (GBP)</th>
				<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (EUR)</th>
				<th>Characteristic</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Dragonfruit</td>
				<td>Stenocereus</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2.72</td>
				<td>juicy</td>
			</tr>
			<tr>
				<td>Durian</td>
				<td>Durio</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.75</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.33</td>
				<td>smelly</td>
			</tr>
			<tr>
				<td>Naseberry</td>
				<td>Manilkara</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
				<td>chewy</td>
			</tr>
			<tr>
				<td>Dragonfruit</td>
				<td>Stenocereus</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2.72</td>
				<td>juicy</td>
			</tr>
			<tr>
				<td>Durian</td>
				<td>Durio</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.75</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.33</td>
				<td>smelly</td>
			</tr>
			<tr>
				<td>Naseberry</td>
				<td>Manilkara</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
				<td>chewy</td>
			</tr>
			<tr>
				<td>Dragonfruit</td>
				<td>Stenocereus</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2.72</td>
				<td>juicy</td>
			</tr>
			<tr>
				<td>Durian</td>
				<td>Durio</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.75</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.33</td>
				<td>smelly</td>
			</tr>
			<tr>
				<td>Naseberry</td>
				<td>Manilkara</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
				<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
				<td>chewy</td>
			</tr>
		</tbody>
	</table>
Switch component view

GitHub Repository

Install o-table

If using the Build Service, add o-table@^6.9.2 to your script and link tags.

If running a Manual Build, run bower install --save "o-table@^6.9.2".

Help & Support

o-table is maintained directly by the Origami team. If you have any questions about o-table or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com