Origami Frontend Components & Services

Demos: o-table

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

Sorting Disabled

This demo shows how to disable sorting on an entire table.

<div class="o-table-container">
      <div class="o-table-scroll-wrapper">
        <table class="o-table o-table--horizontal-lines" data-o-component="o-table" data-o-table-sortable="false">
          <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.

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

Filter

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

<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>
Status
active
Switch component view

GitHub Repository

Install o-table

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

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-table@^9.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: #origami-support
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: #origami-support
Email: origami.support@ft.com