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">
  <thead>
    <tr>
      <th class="table__header">Title</th>
      <th class="table__header"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Comparison Study (Draft)</td>
      <td>
        <tk-dropdown dropdown-class="ml-auto" trigger-type="action">
          <tk-dropdown-item>
            <button class="dropdown__link" type="button">Archive</button>
          </tk-dropdown-item>
        </tk-dropdown>
      </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.

Insight

Users quickly and easily understood what the More icon meant. The More icon did not interfere with core functionality of the product.

Usage

Do

  • Include very dense tabular content

Don't

  • Include many varying actions within a table