BsTable directive - simple list pagination and size selection

BsTable is an AngularJS directive which adds tfoot tag with pagination and page size selection to your table and watches changes on your collection in ng-repeat attribute.

Working sample


For working sample take a look at official minisite




How to use


1. Include necessary source files

// add bootstrap theme from
<link type="text/css" href="/bootstrap/bootstrap.min.css" rel="stylesheet" />
// include latest jquery.min.js
<script type="text/javascript" src="/js/jquery.min.js"></script>
// include bs-table.min.js
<script type="text/javascript" src="/js/bs-table.min.js"></script>


2. Import module to your application

angular.module("BsTableApplication", ["bsTable"]);


3. Add this HTML code to your template

<table class="table table-hover table-bordered" bs-table>
            <th data-ng-click="predicate='FirstName'; reverse=!reverse">First name</th>
            <th data-ng-click="predicate='LastName'; reverse=!reverse">Last name</th>
    <tbody> // you can use ng-repeat in tbody as below in tr html tag
        <tr data-ng-repeat="contact in contactList | orderBy:predicate:reverse">
            <td class="action-column">
                <button type="button" class="btn btn-info btn-sm" data-ng-click="Edit(contact)">Edit</button>


READ ME: It is possible to use ng-repeat attribute in tr or tbody tag.


4. Add this JS code to your controller

// model for bs-table
$scope.contactList = [];

// get contact list
$scope.contactList = SomeService.GetAll();


5. Additional CSS code (not necessary)

.table th:hover{
    text-decoration: underline;
    cursor: pointer;
.table .action-column{
    width: 230px;
.table .action-column:hover{
    text-decoration: none;
    cursor: default;
.table tfoot .pagination{
    float: right;
    margin: 0;
.table tfoot .pagination li{
    cursor: pointer;
.table tfoot select{
    width: 90px;
    float: right;
    margin-right: 8px;


GitHub repository


For more info you can visit BsTable repository on the GitHub:




BsTable is licensed under the MIT license. (

Share on Twitter or Facebook or Google+