<div class="control-list">
<table class="table data">
<thead>
<tr>
<th class="sort-desc"><a href="/">Title</a></th>
<th class="active sort-asc"><a href="/">Created</a></th>
<th><span>Categories</span></th>
<th><span>Updated</span></th>
<th class="list-setup"><a href="/" title="List options"></a></th>
</tr>
</thead>
<tbody>
<tr>
<td>Welcome to October</td>
<td>Oct 01, 2013</td>
<td>News</td>
<td>Oct 01, 2013</td>
<td> </td>
</tr>
</tbody>
</table>
</div><div class="control-list">
<table class="table data" data-control="rowlink">
<thead>
<tr>
<th class="list-checkbox">
<div class="checkbox custom-checkbox nolabel">
<input type="checkbox" id="checkboxAll" />
<label for="checkboxAll" class="storm-icon-pseudo"></label>
</div>
</th>
<th class="sort-desc"><a href="/">Title</a></th>
<th class="active sort-asc"><a href="/">Created</a></th>
<th class="sort-desc"><a href="/">Author</a></th>
<th><span>Categories</span></th>
<th><span>Published</span></th>
<th><span>Updated</span></th>
<th class="list-setup"><a href="/" title="List options"></a></th>
</tr>
</thead>
<tbody>
<tr>
<td class="list-checkbox nolink">
<div class="checkbox custom-checkbox nolabel">
<input id="checkbox_1" type="checkbox" />
<label for="checkbox_1" class="storm-icon-pseudo">Check</label>
</div>
</td>
<td><a href="/">Welcome to October</a></td>
<td>Oct 01, 2013</td>
<td>Adam Person</td>
<td>News</td>
<td>Oct 01, 2013</td>
<td>Oct 01, 2013</td>
<td> </td>
</tr>
<tr class="active">
<td class="list-checkbox nolink">
<div class="checkbox custom-checkbox nolabel">
<input id="checkbox_2" type="checkbox" checked="checked" />
<label for="checkbox_2" class="storm-icon-pseudo">Check The marketplace is open!</label>
</div>
</td>
<td><a href="/">The marketplace is open!</a></td>
<td>Oct 15, 2013</td>
<td>Sam Georges</td>
<td>Features</td>
<td>Oct 16, 2013</td>
<td>Oct 16, 2013</td>
<td> </td>
</tr>
<tr>
<td class="list-checkbox nolink">
<div class="checkbox custom-checkbox nolabel">
<input id="checkbox_3" type="checkbox" />
<label for="checkbox_3" class="storm-icon-pseudo">Check Welcome to the Builder!</label>
</div>
</td>
<td><a href="/">Welcome to the Builder!</a></td>
<td>Oct 21, 2013</td>
<td>Alexey Bobkov</td>
<td>News, Features</td>
<td>Oct 21, 2013</td>
<td>Oct 21, 2013</td>
<td> </td>
</tr>
<tr>
<td class="list-checkbox nolink">
<div class="checkbox custom-checkbox nolabel">
<input id="checkbox_4" type="checkbox" />
<label for="checkbox_4" class="storm-icon-pseudo">Check Components explained</label>
</div>
</td>
<td><a href="/">Components explained</a></td>
<td>Nov 12, 2013</td>
<td>Alexey Bobkov</td>
<td>Tutorials</td>
<td>Nov 12, 2013</td>
<td>Nov 12, 2013</td>
<td> </td>
</tr>
<tr>
<td class="list-checkbox nolink">
<div class="checkbox custom-checkbox nolabel">
<input id="checkbox_5" type="checkbox" />
<label for="checkbox_5" class="storm-icon-pseudo">Check Creating a module in 90 seconds</label>
</div>
</td>
<td><a href="/">Creating a module in 90 seconds</a></td>
<td>Nov 15, 2013</td>
<td>Sam Georges</td>
<td>Tutorials</td>
<td>Nov 15, 2013</td>
<td>Nov 15, 2013</td>
<td> </td>
</tr>
</body>
</table>
<div class="list-footer">
<div class="list-pagination">
<div class="control-pagination">
<span class="page-iteration">1-5 of 20</span>
<a href="#" class="page-back" title="Previous page"></a><a href="#" class="page-next" title="Next page"></a>
</div>
</div>
</div>
</div>Use the no-data class to display a list that contains no records.
<div class="control-list">
<table class="table data">
<thead>
<tr>
<th class="sort-desc"><a href="/">Title</a></th>
<th class="active sort-asc"><a href="/">Created</a></th>
</tr>
</thead>
<tbody>
<tr class="no-data">
<td colspan="100" class="nolink">
<p class="no-data">
There are no records in this view.
</p>
</td>
</tr>
</tbody>
</table>
</div>The following colored classes are available to use on the table row elements.
<div class="control-list">
<table class="table data">
<thead>
<tr>
<th class="sort-desc"><a href="/">Class</a></th>
</tr>
</thead>
<tbody>
<tr><td>Normal text</td></tr>
<tr class="hidden"><td>.hidden</td></tr>
<tr class="strike"><td>.strike</td></tr>
<tr class="frozen"><td>.frozen</td></tr>
<tr class="processing"><td>.processing</td></tr>
<tr class="negative"><td>.negative</td></tr>
<tr class="positive"><td>.positive</td></tr>
<tr class="disabled"><td>.disabled / .deleted</td></tr>
<tr class="new"><td>.new / .important</td></tr>
<tr class="safe"><td>.safe / .special</td></tr>
</tbody>
</table>
</div>It might be fun to include a status column!
<div class="control-list">
<table class="table data">
<thead>
<tr>
<th style="width: 150px"><span>Status</span></th>
<th class="active sort-asc"><a href="/">Title</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="oc-icon-circle text-muted">
Draft
</span>
</td>
<td>Welcome to October</td>
</tr>
<tr>
<td>
<span class="oc-icon-circle text-info">
Pending
</span>
</td>
<td>What a wonderful day</td>
</tr>
<tr>
<td>
<span class="oc-icon-circle text-success">
Approved
</span>
</td>
<td>The sun is shining</td>
</tr>
<tr>
<td>
<span class="oc-icon-circle text-danger">
Cancelled
</span>
</td>
<td>The weather is sweet here</td>
</tr>
</tbody>
</table>
</div>You can also include an icon badge inside a column.
<div class="control-list">
<table class="table data">
<thead>
<tr>
<th style="width: 150px"><span>Status</span></th>
<th class="active sort-asc"><a href="/">Title</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="list-badge badge-info">
<i class="icon-info"></i>
</span>
Draft
</td>
<td>Welcome to October</td>
</tr>
<tr>
<td>
<span class="list-badge badge-warning">
<i class="icon-exclamation"></i>
</span>
Pending
</td>
<td>What a wonderful day</td>
</tr>
<tr>
<td>
<span class="list-badge badge-success">
<i class="icon-check"></i>
</span>
Approved
</td>
<td>The sun is shining</td>
</tr>
<tr>
<td>
<span class="list-badge badge-danger">
<i class="icon-times"></i>
</span>
Cancelled
</td>
<td>The weather is sweet here</td>
</tr>
</tbody>
</table>
</div>You may link an entire row by adding the data-control="rowlink" attribute to the table element. The first table data (TD) column with an anchor will be used to link the entire row. To bypass this behavior, simply add the nolink class to the column.
<div class="control-list">
<table class="table data" data-control="rowlink">
<tbody>
<tr>
<td>
<a href="http://octobercms.com">Link to this</a>
</td>
<td>Row will be linked</td>
<td>This will also be linked</td>
<td class="nolink">No link applied here</td>
</tr>
</tbody>
</table>
</div>You may add a small button to a list column by adding the column-button class to the table data (TD) element.
<div class="control-list">
<table class="table data" data-control="rowlink">
<thead>
<tr>
<th style="width: 150px"><span>Action</span></th>
<th><a href="javascript:;">Name</a></th>
</tr>
</thead>
<tbody>
<tr>
<td class="column-button nolink">
<a
href="http://google.com"
target="_blank"
class="btn btn-secondary btn-sm">
Open Google
</a>
</td>
<td>
<a href="javascript:;">
Petoria
</a>
</td>
</tr>
</tbody>
</table>
</div>