Working sample

 

For working sample take a look at official minisite http://bs-table.com.

 

 

 

How to use

 

1. Include necessary source files

// add bootstrap theme from http://bootswatch.com
<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>
    <thead>
        <tr>
            <th data-ng-click="predicate='FirstName'; reverse=!reverse">First name</th>
            <th data-ng-click="predicate='LastName'; reverse=!reverse">Last name</th>
            <th>Actions</th>
        </tr>
    </thead>
    <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>{{contact.FirstName}}</td>
            <td>{{contact.LastName}}</td>
            <td class="action-column">
                <button type="button" class="btn btn-info btn-sm" data-ng-click="Edit(contact)">Edit</button>
            </td>
        </tr>
    </tbody>
</table>

 

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: https://github.com/janholinka/bs-table.

 

License

 

BsTable is licensed under the MIT license. (http://opensource.org/licenses/MIT)