6.8.1. Sortable Table Simple

Example

<div class="table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th class="table-cell-id" data-sort-onload="asc" data-toggle="sort" tabindex="0">#</th>
                <th data-toggle="sort" tabindex="0">Page Title</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="table-cell-id">1</td>
                <td><a href="#">Hotforwords Can Explain Lorem Ipsum far better than I can</a></td>
                <td class="table-cell-actions">
                    <a href="#" class="item-action" title="Edit">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                    </a>
                    <a href="#" class="item-action item-action-danger" title="Delete">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                    </a>
                </td>
            </tr>
            <tr>
                <td class="table-cell-id">2</td>
                <td><a href="#">Seas spirit morning, fill seasons every I wherein kind</a></td>
                <td class="table-cell-actions">
                    <a href="#" class="item-action" title="Edit">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                    </a>
                    <a href="#" class="item-action item-action-danger" title="Delete">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                    </a>
                </td>
            </tr>
            <tr>
                <td class="table-cell-id">3</td>
                <td><a href="#">Cattle she’d of herb third</a></td>
                <td class="table-cell-actions">
                    <a href="#" class="item-action" title="Edit">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                    </a>
                    <a href="#" class="item-action item-action-danger" title="Delete">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>