o-table

FT-branded tables

active

Basic

<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

<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

<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

<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>

Row headings

<table class="o-table o-table--row-headings" data-o-component="o-table">
	<tr>
		<th>Item</th>
		<td>Holiday</td>
		<td>Lunch</td>
	</tr>
	<tr>
		<th>Cost</th>
		<td data-o-table-data-type="numeric">&#xA3;123.45</td>
		<td data-o-table-data-type="numeric">&#xA3;7</td>
	</tr>
</table>

Cell styles

<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

<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

<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

<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>
Bower Dependencies
o-colors ^4.0.0
o-grid ^4.0.6
o-icons >=4.0.0 <6
o-typography ^5.0.0
o-brand >=2.2.0 <4
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

o-table@^6.9.0

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-table"@"^6.9.0"

For more information see the Origami build process.