master brand internal brand whitelabel brand

o-table

FT-branded tables

active

Version:

Basic

Demo
HTML

<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

Demo
HTML

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

Demo
HTML

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

Demo
HTML

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

Demo
HTML

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

Demo
HTML

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

Demo
HTML

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

Demo
HTML

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>

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

Support

Email origami.support@ft.com

Slack #ft-origami

Report an issue on GitHub

GitHub Repository

Quickstart

Build Service

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

o-table@^6.9.2

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.2"

For more information see the Origami build process.