No Results Found
Tables are used to arrange and display data in a well-structured and meaningful way.
| 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-wrapper">
<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>Tables might need an introduction label or description. Use table__header to visually label tables.
| 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>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.