Open primary navigation
Origami Frontend Components & Services

Demos: o-table

Basic

Open demo in a new tab 
<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

Open demo in a new tab 
<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.

Open demo in a new tab 
<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.

Open demo in a new tab 
<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.

Open demo in a new tab 
<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.

Open demo in a new tab 
<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.

Open demo in a new tab 
<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.

Open demo in a new tab 
<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"><abbr title="Abbreviated">ABBR</abbr>&#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"><abbr title="Abbreviated">ABBR</abbr>&#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"><abbr title="Abbreviated">ABBR</abbr>&#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.

Open demo in a new tab 
<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

Open demo in a new tab 
<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>

Filter

This demo shows a table with columns which may be filtered by a value.

Open demo in a new tab 
<div id="demo-table-caption">
		<h2 class="o-typography-heading-level-2">Table Caption</h2>

		<label class="o-forms-field o-forms-field--inline o--if-js o-forms-field--demo">
			<span class="o-forms-title o-forms-title--vertical-center o-forms-title--shrink">
				<span class="o-forms-title__main">
					Showing data for:
				</span>
			</span>

			<span class="o-forms-input o-forms-input--select o-forms-input--invalid">
				<select data-o-table-filter-id="fruit-table" data-o-table-filter-column="2" id="demo-filter-select" class="o-forms__select">
					<option value="">All</option>
					<option value="Juicy">Juicy</option>
					<option value="Smelly">Smelly</option>
					<option value="Chewy">Chewy</option>
					<option value="Sweet">Sweet</option>
					<option value="Crunchy">Crunchy</option>
				</select>
			</span>
		</label>
	</div>

<div class="o-table-container">
	<div class="o-table-overlay-wrapper">
		<div class="o-table-scroll-wrapper">
			<table id="fruit-table" aria-describedby="demo-table-caption 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>
Switch component view

GitHub Repository

Install o-table

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

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

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