Causeway Style
Tables should be wrapped in a
<div class="table-wrapper"> <!--table goes in here --> </div> with a class
.table-wrapper
<div class="table-wrapper"></div> should basically contain tree first level container divs.
<div class="table-toolbar"></div> -- Its optional. Should be used to hold table related action buttons as in below example.
<div class="table-content"></div> -- This should hold the table.
<tfoot></tfoot> should not be the part of table.
<div class="table-footer"></div> -- This should hold table footer content which normally exists in
<tfoot></tfoot>
Tables must be created with the classes "table" and "table-striped" and contain
<thead>,
<tbody> tags only, preferably in that order and should be wrapped in
<div class="table-content"></div>.
<tfoot> contents should go in
<div class="table-footer"></div> and be placed immediately after
<div class="table-content"></div>.
To control the width of individual column use <col> tag nested inside
<colgroup></colgroup>. Refer the code below.
<col> accepts "width" attribute and the value can specified in
"%", "px" or "relative units"
For table group heading add <tr></tr> as first element of
<thead> and add class "has-table-group" to <thead>
| Column 1, width = 20% | Column 2, width = 30% | Column 3, width = 50% |
|---|---|---|
|
|
|
|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 7 | Cell 8 | Cell 9 |
| Cell 77 | Cell 88 | Cell 99 |
<div class="table-wrapper">
<div class="table-toolbar">
<!-- Table action button or filters -->
<button type="button" class="btn btn-filter">
Filter
</button>
<div class="toolbar-filter">
<!--Toolbar related any content goes in here. This content toggles on above filter button-->
</div>
</div>
<div class="table-content">
<table class="table table-striped">
<colgroup>
<col width="20%">
<col width="30%">
<col width="50%">
</colgroup>
<thead class="has-table-group">
<tr>
<th colspan="2"></th>
<th>Title</th>
</tr>
<tr>
<th>
Column 1, width = 20%
</th>
<th>
Column 2, width = 30%
</th>
<th>
Column 3, width = 50%
</th>
</tr>
<tr class="filter">
<th>
<div class="form-group">
<input class="form-control" type="text" id="col1_filter" name="col1_filter">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col2_filter" name="col2_filter" value=" ">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col3_filter" name="col3_filter">
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td>
Cell 4
</td>
<td>
Cell 5
</td>
<td>
Cell 6
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<!--Table Footer contents of <tfoot> should be place here-->
</div>
</div>
Tables that can have their rows re-ordered by a user (as by using the
jQuery UI sortable component) must have an empty cell at the start of every row (<th> in the
<thead> section and <td> in the <tfoot> and
<tbody> sections).
<div class="table-wrapper">
<div class="table-content">
<table class="table table-striped table-handles">
<thead>
<tr>
<th class="handle"></th>
<th>
Column 1
</th>
<th>
Column 2
</th>
<th>
Column 3
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="handle"></td>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td class="handle"></td>
<td>
Cell 4
</td>
<td>
Cell 5
</td>
<td>
Cell 6
</td>
</tr>
<tr>
<td class="handle"></td>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<div class="col-md-9"></div>
<div class="col-md-3"></div>
</div>
</div>
Tables that can have columns sorted by a user must use the appropriate sorting handles in each of the column headings that can be sorted (the
<th> elements in the <thead> element). Each
<th> element must have a class of
"sorting" and an optional class based on the sorting capability and currently active sort as detailed below.
| Column | Class |
|---|---|
| Can be sorted but is not the currently active sorted column. | No class required |
| Is currently sorted ascending. | sorting-asc |
| Is currently sorted descending. | sorting-desc |
| Can be sorted but sorting is currently disabled | sorting-disabled |
| Can only be sorted ascending but is not the currently active sorted column. | sorting-desc-disabled |
| Can only be sorted ascending and is the currently active sorted column. | sorting-desc-disabled-asc |
| Can only be sorted descending but is not the currently active sorted column. | sorting-asc-disabled |
| Can only be sorted descending and is the currently active sorted column. | sorting-asc-disabled-desc |
Table with horizontal scrolling.
<div class="table-wrapper">
<div class="table-content">
<table class="table table-striped">
<thead>
<tr>
<th>
Column
</th>
<th>
Class
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Can be sorted but is not the currently active sorted column.
</td>
<td>
No class required
</td>
</tr>
<tr>
<td>
Is currently sorted ascending.
</td>
<td>
sorting-asc
</td>
</tr>
<tr>
<td>
Is currently sorted descending.
</td>
<td>
sorting-desc
</td>
</tr>
<tr>
<td>
Can be sorted but sorting is currently disabled
</td>
<td>
sorting-disabled
</td>
</tr>
<tr>
<td>
Can only be sorted ascending but is not the currently active sorted column.
</td>
<td>
sorting-desc-disabled
</td>
</tr>
<tr>
<td>
Can only be sorted ascending and is the currently active sorted column.
</td>
<td>
sorting-desc-disabled-asc
</td>
</tr>
<tr>
<td>
Can only be sorted descending but is not the currently active sorted column.
</td>
<td>
sorting-asc-disabled
</td>
</tr>
<tr>
<td>
Can only be sorted descending and is the currently active sorted column.
</td>
<td>
sorting-asc-disabled-desc
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<ul class="pagination pull-right">
<li><span class="glyphicon glyphicon-pagination-first"></span></li>
<li class="disabled"><span class="glyphicon glyphicon-pagination-prev"></span></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" class="glyphicon glyphicon-pagination-next"></a></li>
<li><a href="#" class="glyphicon glyphicon-pagination-last"></a></li>
</ul>
</div>
</div>
Tables that can have columns filtered by a user must add a second row to the
<thead> element with a class of "filter" that contains
<th> elements containing the appropriate
<a href="/docs/components/forms.html#forms">form elements</a> without their accompanying labels.
<div class="table-wrapper">
<div class="table-toolbar">
<button type="button" class="btn btn-filter">
Filter
</button>
</div>
<div class="form-row table-content">
<table class="table table-striped">
<thead>
<tr class="filter">
<th>
<div class="form-group checkbox no-label">
<input type="checkbox" class="form-control filter" value="true">
<label><span class="checkbox-icon"></span></label>
</div>
</th>
<th>
Column 2
</th>
<th>
Column 3
</th>
</tr>
<tr class="filter">
<th>
<div class="form-group">
<input class="form-control" type="text" id="col1_filter" name="col1_filter" value="Hello World">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col2_filter" name="col2_filter">
</div>
</th>
<th>
<div class="form-group">
<input class="form-control" type="text" id="col3_filter" name="col3_filter">
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td>
<div class="form-group">
<input class="form-control" type="text" id="col4_filter" name="col1_filter">
</div>
</td>
<td>
<div class="form-group">
<input class="form-control" type="text" id="col5_filter" name="col1_filter">
</div>
</td>
<td>
<div class="form-group">
<input class="form-control" type="text" id="col6_filter" name="col1_filter">
</div>
</td>
</tr>
<tr>
<td>
Cell 7
</td>
<td>
Cell 8
</td>
<td>
Cell 9
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
</div>
</div>
| Name | User Name | |
|---|---|---|
|
|
|
|
| Vijay Sharma | vijay | vijay@example.com |
| Saaib Zafar | saaib | saaib@example.com |
| Dixon Thomas | dixon | dixon@example.com |
| Vijay Sharma | vijay | vijay@example.com |
| Saaib Zafar | saaib | saaib@example.com |
| Dixon Thomas | dixon | dixon@example.com |
| Vijay Sharma | vijay | vijay@example.com |
| Saaib Zafar | saaib | saaib@example.com |
| Dixon Thomas | dixon | dixon@example.com |
| Vijay Sharma | vijay | vijay@example.com |
| Saaib Zafar | saaib | saaib@example.com |
| Dixon Thomas | dixon | dixon@example.com |
| Vijay Sharma | saaib | dixon@example.com |
| Dixon | saaib | vijay@example.com |