6.8.2. Sortable Table with Navigation

Table with automatically generated header sections and letter navigation.

Example

<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 -->