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 Origami v1
Switch component view

GitHub Repository

Install o-table

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

If running a Manual Build, run npm install "o-table@^8.1.4".

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