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.

Do

  • Include very dense tabular content

Don't

  • Include many varying actions within a table