<div class="table-wrapper box">
<table class=" box">
<thead>
<tr>
<th>
Table Heading 1
</th>
<th>
Table Heading 2
</th>
<th data-sort-method="none">
Table Heading 3
</th>
<th>
Table Heading 4
</th>
<th>
Table Heading 5
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
Table Footer 1
</th>
<th>
Table Footer 2
</th>
<th>
Table Footer 3
</th>
<th>
Table Footer 4
</th>
<th>
Table Footer 5
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Table Cell 1
</td>
<td>
Table Cell 1
</td>
<td>
Table Cell 1
</td>
<td>
Table Cell 1
</td>
<td>
Table Cell 1
</td>
</tr>
<tr>
<td>
Table Cell 2
</td>
<td>
Table Cell 2
</td>
<td>
Table Cell 2
</td>
<td>
Table Cell 2
</td>
<td>
Table Cell 2
</td>
</tr>
<tr>
<td>
Table Cell 3
</td>
<td>
Table Cell 3
</td>
<td>
Table Cell 3
</td>
<td>
Table Cell 3
</td>
<td>
Table Cell 3
</td>
</tr>
<tr>
<td>
Table Cell 4
</td>
<td>
Table Cell 4
</td>
<td>
Table Cell 4
</td>
<td>
Table Cell 4
</td>
<td>
Table Cell 4
</td>
</tr>
</tbody>
</table>
</div>
{% if table_wrapper %}
<div class="table-wrapper {{ table_box ? 'box' }}">
{% include '@table-example' %}
</div>
{% else %}
{% include '@table-example' %}
{% endif %}
{
"table_wrapper": true,
"table_box": true
}
Tables can be wrapped in a div with class .table-wrapper which adds a horizontal scroll if the with is wider then it’s container.
To make a table sortable, simply apply the class .table-sort or ‘.table-sort-desc’ on <table> tag.
To prevent a column from beeing sorted, add the attribute data-sort-method="none" to it’s <th> tag.
To sort on a separate value then <td> content, add the attribute data-sort"" with the value that should be sorted.
Read more documentaiton on http://tristen.ca/tablesort/demo/