Lists are the main way to view many records at once. Records are clearly delimited, even when they take up more than one line. Controls are present to help users access specific records, refine the set of records displayed, or work with the entire set of data at once.
To create a basic table or list, just add the "table" class to an existing table. Special modes can be done with special classes. Please beware that on platform lists, users are given the preference to enable or disable each special mode. There may be an existing user preference for these behaviors that should be followed.
| Number | Updated | Caller | Category |
|---|---|---|---|
| INC0000046 | 3 days ago | Bud Richman | Software |
| INC0000047 | 1 month ago | Bow Ruggeri | |
| INC0000044 | 2 months ago | Jerrod Bennett | Network |
<table id="testtable1" class="table">
<thead>
<tr>
<th>Number</th>
<th>Updated</th>
<th>Caller</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">INC0000046</a></td>
<td><span title="2014-10-02 12:48:48">3 days ago</span></td>
<td><a href="#">Bud Richman</a></td>
<td>Software</td>
</tr>
<tr>
<td><a href="#">INC0000047</a></td>
<td><span title="2014-9-02 12:48:48">1 month ago</span></td>
<td><a href="#">Bow Ruggeri</a></td>
<td></td>
</tr>
<tr>
<td><a href="#">INC0000044</a></td>
<td><span title="2014-8-01 12:48:48">2 months ago</span></td>
<td><a href="#">Jerrod Bennett</a></td>
<td>Network</td>
</tr>
</tbody>
</table>
| Number Configure column Number | Sorted ascending Updated Configure column Updated | Caller Configure column Caller | Category Configure column Category | ||
|---|---|---|---|---|---|
| Preview INC0000046 | INC0000046 | 3 days ago | Bud Richman | Software | |
| Can't access SFA Software | |||||
| Preview INC0000047 | INC0000047 | 1 month ago | Bow Ruggeri | ||
| Can't get to network file shares | |||||
| Preview INC0000044 | INC0000044 | 2 months ago | Jerrod Bennett | Network | |
| I can't get my weather report | |||||
<table class="table table-hover">
<thead>
<tr>
<th class="col-control">
<button class="icon-cog btn btn-icon table-btn-lg">
<span class="sr-only">Personalize List</span>
</button>
</th>
<th class="col-control">
<button class="icon-search btn btn-icon table-btn-lg">
<span class="sr-only">Search</span>
</button>
</th>
<th>
Number
<i class="icon-arrow-down-rounded col-menu">
<span class="sr-only">Configure column Number</span>
</i>
</th>
<th>
<a href="#" class="col-change-sort">
<i class="icon-sort-ascending col-sort">
<span class="sr-only">Sorted ascending</span>
</i>
Updated
</a>
<i class="icon-arrow-down-rounded col-menu">
<span class="sr-only">Configure column Updated</span>
</i>
</th>
<th>
Caller
<i class="icon-arrow-down-rounded col-menu">
<span class="sr-only">Configure column Caller</span>
</i>
</th>
<th>
Category
<i class="icon-arrow-down-rounded col-menu">
<span class="sr-only">Configure column Category</span>
</i>
</th>
</tr></thead>
<tbody>
<tr>
<td class="col-control col-small col-center" rowspan="2">
<span class="input-group-checkbox">
<input id="record1-checkbox" class="checkbox" type="checkbox" name="record1-checkbox">
<label for="record1-checkbox" class="checkbox-label">
<span class="sr-only">Select record for action</span>
</label>
</span>
</td>
<td class="col-center col-small" rowspan="2">
<a href="#" class="btn btn-icon table-btn-lg icon-info" title="Preview INC0000046">
<span class="sr-only">Preview INC0000046</span>
</a>
</td>
<td><a href="#">INC0000046</a></td>
<td><span title="2014-10-02 12:48:48">3 days ago</span></td>
<td><a href="#">Bud Richman</a></td>
<td>Software</td>
</tr>
<tr class="detail-row">
<td colspan="4">Can't access SFA Software</td>
</tr>
<tr>
<td class="col-control col-small col-center" rowspan="2">
<span class="input-group-checkbox">
<input id="record2-checkbox" class="checkbox" type="checkbox" name="record2-checkbox">
<label for="record2-checkbox" class="checkbox-label">
<span class="sr-only">Select record for action</span>
</label>
</span>
</td>
<td class="col-center col-small" rowspan="2">
<a href="#" class="btn btn-icon table-btn-lg icon-info" title="Preview INC0000047">
<span class="sr-only">Preview INC0000047</span>
</a>
</td>
<td><a href="#">INC0000047</a></td>
<td><span title="2014-9-02 12:48:48">1 month ago</span></td>
<td><a href="#">Bow Ruggeri</a></td>
<td></td>
</tr>
<tr class="detail-row">
<td colspan="4">Can't get to network file shares</td>
</tr>
<tr>
<td class="col-control col-small col-center" rowspan="2">
<span class="input-group-checkbox">
<input id="record3-checkbox" class="checkbox" type="checkbox" name="record3-checkbox">
<label for="record3-checkbox" class="checkbox-label">
<span class="sr-only">
Select record for action</span>
</label>
</span>
</td>
<td class="col-center col-small" rowspan="2">
<a href="#" class="btn btn-icon table-btn-lg icon-info" title="Preview INC0000044">
<span class="sr-only">Preview INC0000044</span>
</a>
</td>
<td><a href="#">INC0000044</a></td>
<td><span title="2014-8-01 12:48:48">2 months ago</span></td>
<td><a href="#">Jerrod Bennett</a></td>
<td>Network</td>
</tr>
<tr class="detail-row">
<td colspan="4">I can't get my weather report</td>
</tr>
</tbody>
</table>