AngularJS Smart Table Example with Demos

Smart table is an Angularjs module to display data into an HTML table in a gentle way. It supported many built-in features such as pagination, filtering, sorting, etc in a declarative way. These are common features of any table grid plugin.

smart-table module converts HTML table into beautiful grid listing which can be used to paginate records, search records, sort the column and filter the records based on the search string. The smart-table is very lightweight(less than 4kb minified) and has no dependencies other than Angular itself. You can access top-level features using controller API which is created by the top-level directive.

This tutorial helps you create a beautiful table listing using smart-table angular module.I am assuming you have basic knowledge of angularjs. I will discuss many features and built-in angular directive of smart-table module.

Also Checkout other tutorials of angular grid,

• Angularjs Smart Table Example & demo
• Simple Example of Angularjs Datatable
• Example of In-Place Editing using Angular Xeditable
• Best Free Angularjs Grid & Table Plugin Examples
• Add,Edit and Delete Example Using Ng2-smart With Angular 4

Simple Example Smart Table With AngularJS

angularjs is the most popular front-end framework. There are many jquery plugins that are converted in angularjs module and directive to easy to use in angulrjs application. One of the most popular angular grid module is Angularjs Datatable.

I will use the following files for this angular smart table tutorial,

1. index.html : This file will contain all HTML markup and initialize angularjs application.
2. app.js : This file will contain angularjs controller code and scope methods.

Update : AngularJS Smart Table with Add, Edit and Delete Records

Let’s Demonstrate AngularJS smart-table Example

Step 1: Included all necessary CSS and js files in the head section of index.html page.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<script src="app.js"></script>

I have added angularjs and bootstrap css file. I also added app.js file which is our angular application controller file and font-awesome file for Font enhancement.

Step 2: Define Table layout and smart-table directives into index.html page.

<div class="container">
<h1>Listing Example with smart-table and AngularJS</h1>
<div>
<h3>Loading...</h3>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Profile</th>
<th width="100px">Name</th>
<th>Salary</th>
<th>Age</th>
<th>Action</th>
</tr>
<tr>
<th colspan="5"><input class="input-sm form-control" type="search" placeholder="global search"></th>
</tr>
</thead>
<tbody>
<tr>
<td><img class="img-thumbnail img-responsive" style="width: 50px; height: 50px;" alt="image"></td>
<td>{{row.employee_name}}</td>
<td>{{row.employee_salary}}</td>
<td>{{row.employee_age}}</td>
<td>&nbsp;</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-center" colspan="5">
<div>&nbsp;</div>
</td>
</tr>
</tfoot>
</table>
</div>

I have used many smart-table inbuilt directive in above code. I will describe each directive’s functionality details in these tutorials.

• st-safe-src : This directive is used for source data records which are passed from the angular model asynchronously.
• st-table : This directive contains the soft copy of the records data.
• st-sort : This directive is used to sort column data in the table.
• st-search : This angularjs directive is used for add search functionality into the smart-table.
• st-pagination : This is used for add pagination nav bar into div.
• st-items-by-page : This directive is used number of records in page, default is 10.

Step 3: Created app.js file and write get method to fetch records from server rest API.

TestApp = angular.module('TestApp', ['TestApp.controllers', 'smart-table']);
	
angular.module('TestApp.controllers', []).controller('testController',  ['$scope', '$http', function($scope, $http) {
	$scope.loading = false;
	$scope.getData = function() {
		$scope.loading = true;
		$http.get("https://dummy.restapiexample.com/api/v1/employees")
		.then(function(response){
			$scope.employees = response.data;
			$scope.loading = false;
		});
	}
	$scope.getData();
}]);

I have used following parameters in above angularjs controller,

• TestApp: Angularjs application name.
• testController: Angularjs application controller name which will use in index.html file.
• $scope.getData: This method use to get data from "https://dummy.restapiexample.com/api/v1/employees" rest api and stored into 'employees' scope variable.

Conclusion:

This tutorial help to add a listing into an HTML table using angularjs smart-table. I added sorting into the salary column and pagination on client-side. The smart-table is a very well documented angularjs grid module and easy to use.

You can download the Source code and Demo from the below link.