o-table

FT-branded tables

active

Basic

<table class="o-table " data-o-component="o-table">
	<thead>
		<th>Cheese <span class="o-table__cell--content-secondary">Type of cheese</span></th>
		<th>Bread <span class="o-table__cell--content-secondary">Type of bread</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>
	</thead>
	<tbody>
		<tr>
			<td>cheddar</td>
			<td>rye</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>stilton</td>
			<td>wholemeal</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>red leicester</td>
			<td>white</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>
		<th>Cheese</th>
		<th>Bread</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>
	</thead>
	<tbody>
		<tr>
			<td>cheddar</td>
			<td>rye</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.13</td>
		</tr>
		<tr>
			<td>stilton</td>
			<td>wholemeal</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">2.25</td>
		</tr>
		<tr>
			<td>red leicester</td>
			<td>white</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">7.89</td>
		</tr>
	</tbody>
</table>

Compact

<table class="o-table o-table--compact" data-o-component="o-table">
	<thead>
		<th>Cheese <span class="o-table__cell--content-secondary">Type of cheese</span></th>
		<th>Bread <span class="o-table__cell--content-secondary">Type of bread</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>
	</thead>
	<tbody>
		<tr>
			<td>cheddar</td>
			<td>rye</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>stilton</td>
			<td>wholemeal</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>red leicester</td>
			<td>white</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>
		<th>Cheese</th>
		<th>Bread</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>
	</thead>
	<tbody>
		<tr>
			<td>cheddar</td>
			<td>rye</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.13</td>
		</tr>
		<tr>
			<td>stilton</td>
			<td>wholemeal</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">2.25</td>
		</tr>
		<tr>
			<td>red leicester</td>
			<td>white</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">7.89</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>Heading</th>
		<th>Heading</th>
		<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Heading</th>
		<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Heading</th>
	</tr>
	<tr>
		<td>text data</td>
		<td>text data</td>
		<td data-o-table-data-type="numeric" class="o-table__cell--numeric">123</td>
		<td data-o-table-data-type="numeric" class="o-table__cell--numeric">123.45</td>
	</tr>
	<tr>
		<td>text data</td>
		<td>text data</td>
		<td data-o-table-data-type="numeric" class="o-table__cell--numeric">22</td>
		<td data-o-table-data-type="numeric" class="o-table__cell--numeric">22.2</td>
	</tr>
	<tr>
		<td>text data</td>
		<td>text data</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">3.0</td>
	</tr>
</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>
		<th>Cheese</th>
		<th>Bread</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>Taste Note</th>
	</thead>
	<tbody>
		<tr>
			<td>cheddar</td>
			<td>rye</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>
			<td>sharp</td>
		</tr>
		<tr>
			<td>stilton</td>
			<td>wholemeal</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>strong</td>
		</tr>
		<tr>
			<td>red leicester</td>
			<td>white</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>sweet</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">7.89</td>
			<td>blue</td>
		</tr>
	</tbody>
</table>

Responsive-overflow

This is an overflow responsive version

<table class="o-table o-table--responsive-overflow o-table--row-stripes" data-o-component="o-table">
	<thead>
		<th>Cheese</th>
		<th>Bread</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>Taste Note</th>
	</thead>
	<tbody>
		<tr>
			<td>cheddar</td>
			<td>rye</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>
			<td>sharp</td>
		</tr>
		<tr>
			<td>stilton</td>
			<td>wholemeal</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>strong</td>
		</tr>
		<tr>
			<td>red leicester</td>
			<td>white</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>sweet</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">7.89</td>
			<td>blue</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>
		<th>Cheese</th>
		<th>Bread</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>Taste Note</th>
	</thead>
	<tbody>
		<tr>
			<td>cheddar</td>
			<td>rye</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>
			<td>sharp</td>
		</tr>
		<tr>
			<td>stilton</td>
			<td>wholemeal</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>strong</td>
		</tr>
		<tr>
			<td>red leicester</td>
			<td>white</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>sweet</td>
		</tr>
		<tr>
			<td>cheddar</td>
			<td>rye</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>
			<td>sharp</td>
		</tr>
		<tr>
			<td>stilton</td>
			<td>wholemeal</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>strong</td>
		</tr>
		<tr>
			<td>red leicester</td>
			<td>white</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>sweet</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">7.89</td>
			<td>blue</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
GitHub Repository

Quickstart

Build Service

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

o-table@^6.3.4

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

For more information see the Origami build process.