Tables

Tables are used to arrange and display data in a well-structured and meaningful way.

Default

Invoice No. Date Order Type Amount Charged Credits Transaction Type
1180281 04/10/2017 Test $0 1 Charge
1180278 04/10/2017 Test $0 1 Charge
<div class="table">
<table class="table table--stripe">
  <thead>
    <tr>
      <th class="table__header">Invoice No.</th>
      <th class="table__header">Date</th>
      <th class="table__header">Order Type</th>
      <th class="table__header">Amount Charged</th>
      <th class="table__header">Credits</th>
      <th class="table__header">Transaction Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1180281</td>
      <td>04/10/2017</td>
      <td>Test</td>
      <td>$0</td>
      <td>1</td>
      <td>
        Charge
      </td>
    </tr>
    <tr>
      <td>1180278</td>
      <td>04/10/2017</td>
      <td>Test</td>
      <td>$0</td>
      <td>1</td>
      <td>
        Charge
      </td>
    </tr>
  </tbody>
</table>
</div>

Description

Tables might need an introduction label or description. Use table__header to visually label tables.

With Actions

Title
Comparison Study (Draft)
<table class="table table--stripe" id="">
  <thead>
    <tr>
      <th class="table__header">Title</th>
      <th class="table__header"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Comparison Study (Draft)</td>
      <td>
        <div class="drop-menu ml-auto">
          <button aria-haspopup="true" aria-label="More options" class="dropdown dropdown--more" type="button" ut-dropdown-menu-link="">
            <span class="dropdown__trigger">&nbsp;</span>
          </button>
          <ul class="dropdown-options">
            <li class="dropdown-item">
              <a class="dropdown__link dropdown__link--options">Link</a>
            </li>
            <li class="dropdown-item">
              <a class="dropdown__link dropdown__link--options">Link</a>
            </li>
            <li class="dropdown-item">
              <a class="dropdown__link dropdown__link--options">Link</a>
            </li>
            <li class="dropdown-item">
              <a class="dropdown__link dropdown__link--options">Link</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Description

Some tabular data is dense with content and actions. When there are three or more actions associated with a single row of data, the more button should be used to show those actions.

Do

  • Include very dense tabular content

Don't

  • Include many varying actions within a table