Tables are used to arrange and display data in a well-structured and meaningful way.
This component is deprecated! Please use the new Table instead.
Old component won’t get updates unless extraordinary circumstances require otherwise → reach out to our PO to discuss it.
New component should always be used unless extraordinary circumstances require otherwise → reach out to our PO to discuss it.
If you are looking to migrate this component and require help, reach out to the #ask-design-system Slack channel.
| 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.