Using Angular Smart Table To Get Enhanced Features

Posted By : Sachin Arora | 28-Jan-2018

Smart-table or st-table is an angular js table module, It allows us to create a table in a declarative way providing features like sorting, filtering, and pagination etc.

 

Different Features of st-table:
 

Lightweight - It is approx 4kb minified and has no dependencies other than angular, its size can be further reduced by creating a custom build excluding the plugins that are not required.
 
Robust - It is absolutely stable as it widely used and tested.
 
Modular and Extensible - The major features can be accessed by using the controller API created by a top-level directive. Then a set of plugins(directives) allows us to create a table in a declarative way.
 
Developers Friendly - It has been designed in such a way that it is really friendly to get into the source code and modify/change it according to our requirements.
 

 

Sorting Data in Smart-table:
 

Smart-table provides a built-in sort directive st-sort, which is all declarative. We need to provide st-sort attribute to the table headers this will specify the property by which you want to sort by. It provides three different sort states ascending, descending and back to primary order. 

 

<table st-table="rowCollection" class="table table-striped">
	<thead>
	<tr>
		<th st-sort="getters.firstName">first name</th>
		<th st-sort="lastName">last name</th>
		<th st-sort="birthDate">birth date</th>
		<th st-sort="balance" st-skip-natural="true" >balance</th>
		<th>email</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="row in rowCollection">
		<td>{{row.firstName | uppercase}}</td>
		<td>{{row.lastName}}</td>
		<td>{{row.birthDate | date}}</td>
		<td>{{row.balance | currency}}</td>
		<td><a ng-href="mailto:{{row.email}}">email</a></td>
	</tr>
	</tbody>
</table>

 

app.controller('sortCtrl', ['$scope', '$filter', function (scope, filter) {
    scope.rowCollection = [
        {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: '[email protected]'},
        {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: '[email protected]'},
        {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: '[email protected]'}
    ];

    scope.getters={
        firstName: function (value) {
            //this will sort by the length of the first name string
            return value.firstName.length;
        }
    }
}]);

If you want column to sort by default you can use the attribute st-sort-default = "true" and if you want it in the reverse order then set it to "reverse". So this is how we st-table helps us to sort our data.

About Author

Author Image
Sachin Arora

Sachin is ambitious and hardworking individual with broad skills,He have the capabilities to build captivating UI applications . One of his key strength is building a strong bond with the team in order to deliver the best results on time .

Request for Proposal

Name is required

Comment is required

Sending message..