o-table

FT-branded tables

active

Basic

<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&#xA0;(GBP)</th>
            <th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost&#xA0;(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>

Compact

<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&#xA0;(GBP)</th>
            <th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost&#xA0;(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 and footnote

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&apos;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&#xA0;(GBP)</th>
            <th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost&#xA0;(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>

Responsive Overflow

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&#xA0;(GBP)</th>
						<th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost&#xA0;(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&apos;s love of fruit.
	</div>
</div>

Responsive Scroll

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&#xA0;(GBP)</th>
						<th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost&#xA0;(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&apos;s love of fruit.
	</div>
</div>

Responsive Flat

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&#xA0;(GBP)</th>
						<th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost&#xA0;(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&apos;s love of fruit.
	</div>
</div>

Expanding Table

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&#xA0;(GBP)</th>
						<th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost&#xA0;(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&apos;s love of fruit.
	</div>
</div>

Sorting

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">Abbreviated&#xA0;Date</th>
					<th scope="col" role="columnheader" data-o-table-data-type="date">Date&#xA0;&amp;&#xA0;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&#xA0;numbers</th>
					<th scope="col" role="columnheader" data-o-table-data-type="number">Abbreviated&#xA0;numbers</th>
					<th scope="col" role="columnheader" data-o-table-data-type="number">Ranged&#xA0;numbers</th>
					<th scope="col" role="columnheader" data-o-table-data-type="currency">Ranged&#xA0;currency</th>
					<th scope="col" role="columnheader" data-o-table-data-type="currency">Abbreviated&#xA0;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&#x2013;10m</td>
					<td>$84m&#x2013;$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&#x2013;8bn</td>
					<td>&#xA3;36bn&#x2013;&#xA3;40bn</td>
					<td>&#xA3;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&#x2013;12tn</td>
					<td>HK$74.9bn&#x2013;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&#xE8;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&#x2013;5</td>
					<td>Rp14.595&#x2013;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&#x2013;10m</td>
					<td>$84m&#x2013;$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&#x2013;8bn</td>
					<td>&#xA3;36bn&#x2013;&#xA3;40bn</td>
					<td>&#xA3;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&#x2013;12tn</td>
					<td>HK$74.9bn&#x2013;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&#xE8;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&#x2013;5</td>
					<td>Rp14.595&#x2013;Rp20</td>
					<td>Rp14.595</td>
					<td>60%</td>
					<td><a class="o-typography-link" href="#">Edit</a></td>
				</tr>
			</tbody>
	</table>
	</div>
</div>

Row Stripes

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&#xA0;(GBP)</th>
            <th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost&#xA0;(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>

Vertically centre

<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>
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 ^3.1.1
o-visual-effects ^2.0.3
o-buttons ^5.14.0
dom-delegate ftdomdelegate#^2.2.0
GitHub Repository

Quickstart

Build Service

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

o-table@^7.0.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"@"^7.0.2"

For more information see the Origami build process.