Table with automatically generated header sections and letter navigation.
Example
# | User |
---|---|
1 | Brown, James |
2 | Paisley, Brad |
3 | Parker, Maceo |
4 | Wesley, Fred |
<div class="row">
<div class="col-sm-2 col-sm-push-10">
<nav class="sortable-table-nav" id="tableSortNavigation"></nav>
</div>
<div class="col-sm-10 col-sm-pull-2">
<div class="table-responsive">
<table class="table table-hover" data-sort-navigation="#tableSortNavigation">
<thead>
<tr>
<th class="table-cell-id" data-toggle="sort" tabindex="0">#</th>
<th data-toggle="sort" data-sort-onload="desc" tabindex="0">User</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-cell-id">1</td>
<td data-sort-group="B"><a href="#"><strong>Brown</strong>, James</a></td>
</tr>
<tr>
<td class="table-cell-id">2</td>
<td data-sort-group="P"><a href="#"><strong>Paisley</strong>, Brad</a></td>
</tr>
<tr>
<td class="table-cell-id">3</td>
<td data-sort-group="P"><a href="#"><strong>Parker</strong>, Maceo</a></td>
</tr>
<tr>
<td class="table-cell-id">4</td>
<td data-sort-group="W"><a href="#"><strong>Wesley</strong>, Fred</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div><!-- .row -->