Components
Tables
Tables are used to structure and display content logically so users can clearly see relationships between data. Using tables also helps users quickly scan content and determine relevant data with ease.
| Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
|---|---|---|---|---|---|
| 209 | Gate Parts for Repair | Magnolia Heritage Construction | $32,456.92 | Jul 15, 2019 | Geralt Rivera |
| 209 | Gate Parts for Repair | Magnolia Heritage Construction | $32,456.92 | Jul 15, 2019 | Geralt Rivera |
| 209 | Gate Parts for Repair | Magnolia Heritage Construction | $32,456.92 | Jul 15, 2019 | Geralt Rivera |
<table class="table table-striped">
<thead>
<tr>
<th>Lorem Ipsum</th>
<th>Lorem Ipsum</th>
<th>Lorem Ipsum</th>
<th>Lorem Ipsum</th>
<th>Lorem Ipsum</th>
<th>Lorem Ipsum</th>
</tr>
</thead>
</table>
Table Sorting
Users may click the Up or Down arrows in the Table header columns to sort data by ascending or descending order. The Table must conform to the design below, but the implementation of the Table Sorting functionality may be left to developer discretion.
| Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
|---|---|---|---|---|---|
| 209 | Gate Parts for Repair | Magnolia Heritage Construction | $32,456.92 | Jul 15, 2019 | Geralt Rivera |
| 209 | Gate Parts for Repair | Magnolia Heritage Construction | $32,456.92 | Jul 15, 2019 | Geralt Rivera |
| 209 | Gate Parts for Repair | Magnolia Heritage Construction | $32,456.92 | Jul 15, 2019 | Geralt Rivera |
<table class="table table-striped">
<thead>
<tr>
<th>Lorem Ipsum</th>
<th>Lorem Ipsum</th>
<th>Lorem Ipsum</th>
<th>Lorem Ipsum</th>
<th>Lorem Ipsum</th>
<th>Lorem Ipsum</th>
</tr>
</thead>
</table>
Expanded Rows
Users may interact with a table with Expanded Rows to display additional content by clicking on the Down-Caret icon to expand a row vertically. Hidden elements like those with the sr-only class are required to ensure all content can be read by a screen reader.
| heading one | heading two | heading three | heading four | heading five | heading six | Supplier ID |
|---|---|---|---|---|---|---|
| 209 | Gate Parts for Repair | Magnolia Heritage Construction | $32,456.92 | Jul 15, 2019 | Geralt Rivera | 2165465536484 |
| 209 | Gate Parts for Repair | Magnolia Heritage Construction | $32,456.92 | Jul 15, 2019 | Geralt Rivera | 2165465536484 |
| 209 | Gate Parts for Repair | Magnolia Heritage Construction | $32,456.92 | Jul 15, 2019 | Geralt Rivera | 2165465536484 |
| 209 | Gate Parts for Repair | Magnolia Heritage Construction | $32,456.92 | Jul 15, 2019 | Geralt Rivera | 2165465536484 |
<table class="table">
<thead>
<tr>
<th>heading one</th>
<th>heading two</th>
<th>heading three</th>
<th>heading four</th>
<th>heading five</th>
<th>heading six</th>
</tr>
</thead>
</table>