Skip to content
MENU

Soracom

Design System

Table

Displays tabular label/value pairs of text content

Overview 

The ds-table label/value columns are primarily for presenting pairs of text based content. While certain form elements can be used in value column - if all the content in the value column are form fields, they should instead use ds-field.

It is always preferable to use html dl/dt/dd elements, rather than a table\tr\td elements - table elements should only be used when multiple columns of values are required.

Options 

Basic usage 

Single html <dl> element with multiple children
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
Multiple html <dl> elements
<div class="ds-table">
  <dl>
    <dt>Label</dt>
    <dd>
      <div>Value</div>
    </dd>
  </dl>
  <dl>
    <dt>Label</dt>
    <dd>
      <div>Value</div>
    </dd>
  </dl>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-table">
  <dl>
    <dt>Label</dt>
    <dd>
      <div>Value</div>
    </dd>
  </dl>
  <dl>
    <dt>Label</dt>
    <dd>
      <div>Value</div>
    </dd>
  </dl>
</div>

Multiple columns 

Multiple columns are only supported when using html <table> element. Available from v1.6.55+

Html <table> element
<table class="ds-table">
  <tr>
    <th>Label</th>
    <td>
      <div>Value</div>
    </td>
    <td>
      <div>Value</div>
    </td>
  </tr>
  <tr>
    <th>Label</th>
    <td>
      <div>Value</div>
    </td>
    <td>
      <div>Value</div>
    </td>
  </tr>
</table>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<table class="ds-table">
  <tr>
    <th>Label</th>
    <td>
      <div>Value</div>
    </td>
    <td>
      <div>Value</div>
    </td>
  </tr>
  <tr>
    <th>Label</th>
    <td>
      <div>Value</div>
    </td>
    <td>
      <div>Value</div>
    </td>
  </tr>
</table>

Column headings 

Column headings are only supported when using html <table> element. Available from v1.6.55+

Html <table> element
<table class="ds-table">
  <thead>
    <tr>
      <th></th>
      <th>Item A</th>
      <th>Item B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Label</th>
      <td>
        <div>Value</div>
      </td>
      <td>
        <div>Value</div>
      </td>
    </tr>
    <tr>
      <th>Label</th>
      <td>
        <div>Value</div>
      </td>
      <td>
        <div>Value</div>
      </td>
    </tr>
  </tbody>
</table>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<table class="ds-table">
  <thead>
    <tr>
      <th></th>
      <th>Item A</th>
      <th>Item B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Label</th>
      <td>
        <div>Value</div>
      </td>
      <td>
        <div>Value</div>
      </td>
    </tr>
    <tr>
      <th>Label</th>
      <td>
        <div>Value</div>
      </td>
      <td>
        <div>Value</div>
      </td>
    </tr>
  </tbody>
</table>

Styles 

Vertical style - <dl> element
<dl class="ds-table--vertical">
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-table--vertical">
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
Vertical style - <table> element
<table class="ds-table--vertical">
  <tr>
    <th>Label</th>
    <td>
      <div>Value</div>
    </td>
    <td>
      <div>Value</div>
    </td>
  </tr>
  <tr>
    <th>Label</th>
    <td>
      <div>Value</div>
    </td>
    <td>
      <div>Value</div>
    </td>
  </tr>
</table>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<table class="ds-table--vertical">
  <tr>
    <th>Label</th>
    <td>
      <div>Value</div>
    </td>
    <td>
      <div>Value</div>
    </td>
  </tr>
  <tr>
    <th>Label</th>
    <td>
      <div>Value</div>
    </td>
    <td>
      <div>Value</div>
    </td>
  </tr>
</table>

Simple style when applied to tables uses simpler more standard rules for styling table contents and is useful for text based table contents.

Simple style - <table> element
<table class="ds-table--simple">
  <tbody>
    <tr>
      <th>Label</th>
      <td>Value</td>
      <td>Value</td>
    </tr>
    <tr>
      <th>Label</th>
      <td>Value</td>
      <td>Value</td>
    </tr>
  </tbody>
</table>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<table class="ds-table--simple">
  <tbody>
    <tr>
      <th>Label</th>
      <td>Value</td>
      <td>Value</td>
    </tr>
    <tr>
      <th>Label</th>
      <td>Value</td>
      <td>Value</td>
    </tr>
  </tbody>
</table>

Buttons 

Any buttons directly inside the dd or td will be ‘appended’ to the right of the cell.

Example with buttons integrated into the table
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <button class="ds-button --icon-edit --hide-label">
      <span>Edit</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <button class="ds-button --icon-edit --hide-label">
      <span>Edit</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>

To retain standard buttons styling, wrap the buttons in a div.

Example with default button style
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <div>
      <button class="ds-button --icon-edit --hide-label">
        <span>Edit</span>
      </button>
    </div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <div>
      <button class="ds-button --icon-edit --hide-label">
        <span>Edit</span>
      </button>
    </div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
Example with --addon-light buttons
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <button class="ds-button --addon-light --icon-edit --hide-label">
      <span>Edit</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <button class="ds-button --addon-light --icon-edit --hide-label">
      <span>Edit</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
Example with primary button style
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <button class="ds-button --primary --icon-edit --hide-label">
      <span>Edit</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <button class="ds-button --primary --icon-edit --hide-label">
      <span>Edit</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>

Multiple buttons 

Example with multiple buttons
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <button class="ds-button --icon-cancel --hide-label">
      <span>Cancel</span>
    </button>
    <button class="ds-button --icon-confirm --hide-label">
      <span>Confirm</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <button class="ds-button --icon-cancel --hide-label">
      <span>Cancel</span>
    </button>
    <button class="ds-button --icon-confirm --hide-label">
      <span>Confirm</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>

Fields 

The following field components are optimised to be used directly inside ds-table:

Example ds-input with 2 ds-buttons
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <input type="text" name="test" class="ds-input" value="Value"/>
    <button class="ds-button --icon-cancel --hide-label">
      <span>Cancel</span>
    </button>
    <button class="ds-button --icon-confirm --hide-label">
      <span>Confirm</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <input type="text" name="test" class="ds-input" value="Value"/>
    <button class="ds-button --icon-cancel --hide-label">
      <span>Cancel</span>
    </button>
    <button class="ds-button --icon-confirm --hide-label">
      <span>Confirm</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
Example ds-select
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <select class="ds-select" id="example-2" name="example">
      <option label="Australia" value="AU">Australia</option>
      <option label="Japan" value="JP">Japan</option>
      <option label="United States of America" value="US">United States of America</option>
    </select>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <select class="ds-select" id="example-2" name="example">
      <option label="Australia" value="AU">Australia</option>
      <option label="Japan" value="JP">Japan</option>
      <option label="United States of America" value="US">United States of America</option>
    </select>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
Example ds-menubutton
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <details class="ds-menubutton">
      <summary>
        <span class="ds-button --plain --right-icon --icon-settings">
          <span>Button label</span>
        </span>
      </summary>
      <div class="ds-menubutton__content">
        <ul>
          <li>
            <a href="#">Change email</a>
          </li>
          <li>
            <a href="#">Contact information</a>
          </li>
          <li>
            <a href="#">Billing</a>
          </li>
          <li>
            <a href="#">Payment settings</a>
          </li>
        </ul>
      </div>
    </details>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-table">
  <dt>Label</dt>
  <dd>
    <details class="ds-menubutton">
      <summary>
        <span class="ds-button --plain --right-icon --icon-settings">
          <span>Button label</span>
        </span>
      </summary>
      <div class="ds-menubutton__content">
        <ul>
          <li>
            <a href="#">Change email</a>
          </li>
          <li>
            <a href="#">Contact information</a>
          </li>
          <li>
            <a href="#">Billing</a>
          </li>
          <li>
            <a href="#">Payment settings</a>
          </li>
        </ul>
      </div>
    </details>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>

Loading state 

Available from v1.7.9+

When a table has the the class ds-table--loading any content inside the table is not visible and the loading state animation is shown.

Loading state using --loading icon
<dl class="ds-table--loading">
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-table--loading">
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
Loading state using --loading-refresh icon
<div class="ds-table--loading-refresh">
  <dl>
    <dt>Label</dt>
    <dd>
      <div>Value</div>
    </dd>
  </dl>
  <dl>
    <dt>Label</dt>
    <dd>
      <div>Value</div>
    </dd>
  </dl>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-table--loading-refresh">
  <dl>
    <dt>Label</dt>
    <dd>
      <div>Value</div>
    </dd>
  </dl>
  <dl>
    <dt>Label</dt>
    <dd>
      <div>Value</div>
    </dd>
  </dl>
</div>