AngularJS Tables with ng-table

  Total Views : 4126
  Comments : 1
 
  Keywords : Angularjs bind data to tables using ng-table module, Angularjs ngTable examples, AngularJS table with sorting, filtering and pagination using ng-table module with example

Here we will learn how to bind data to tables in angularjs using ng-table module and implement sorting, paging or pagination and filtering to table using ng-table module in angularjs applications with example.

AngularJS Tables with ng-table Example

In angularjs if we want to bind data to tables and implement functionalities like sorting, paging and filtering it’s better to use ng-table module. By using ng-table module in angularjs applications we can achieve functionalities like showing data in table format, sorting, filtering and paging without writing much code.

Steps to use ng-Table in AngualrJS

Following are the steps to use ng-table in angularjs applications.

 

First create new application and open page and add following angularjs reference file in header section.

 

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

Now add the following ng-table css and script files in header section of your page.

 

<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">

<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>

Once we add files now add ngTable and ngTableParams references in angularjs while declaring module and controller like as shown following

 

var app = angular.module("ngtableApp", ["ngTable"]);

app.controller("ngtableCtrl", function ($scope, ngTableParams) {

 

});

In JavaScript file write the code like as shown below to render data with ng-table.

 

<script type="text/javascript">

var app = angular.module("ngtableApp", ["ngTable"]);

app.controller("ngtableCtrl", function ($scope, ngTableParams) {

$scope.users = [

{ name: "Suresh Dasari", age: 30, location: 'Chennai' },

-------

-------

-------

{ name: "Rohini Alavala", age: 29, location: 'Chennai' },

];

$scope.usersTable = new ngTableParams({}, { dataset: $scope.users });

});

</script>

In html code we need to write the code like as shown below to render our JSON data with ng-table.

 

<table ng-table ="usersTable">

<tr ng-repeat="user in users">

<td data-title="'Name'">{{user.name}}</td>

<td data-title="'Age'">{{user.age}}</td>

<td data-title="'Location'">{{user.location}}</td>

</tr>

</table>

This is how we need to use ng-table in our angularjs applications to render data in table formats. 

AngularJS ng-table Module Example

Following is the complete example of biding data to tables using angularjs ng-table module.

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs Table with ng-table module Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">

<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">

<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>

<script type="text/javascript">

var app = angular.module("ngtableApp", ["ngTable"]);

app.controller("ngtableCtrl"function ($scope, ngTableParams) {

$scope.users = [

{ name: "Madhav Sai", age: 10, location: 'Nagpur' },

{ name: "Suresh Dasari", age: 30, location: 'Chennai' },

{ name: "Rohini Alavala", age: 29, location: 'Chennai' },

{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },

{ name: "Sateesh Chandra", age: 27, location: 'Vizag' },

];

$scope.usersTable = new ngTableParams({}, { dataset: $scope.users });

});

</script>

</head>

<body ng-app="ngtableApp">

<div ng-controller="ngtableCtrl">

<h2>AngularJS Table with ng-table Example</h2>

<table ng-table ="usersTable" class="table table-striped">

<tr ng-repeat="user in users">

<td data-title="'Name'">{{user.name}}</td>

<td data-title="'Age'">{{user.age}}</td>

<td data-title="'Location'">{{user.location}}</td>

</tr>

</table>

</div>

</body>

</html>

If you observe above code we added bootstrap css plugin in header section to apply bootstrap styles to table. Now we will run and see the output of ng-table example.

Output of AngularJS ng-table Example

Following is the result of binding data in table format using ng-table module in angularjs applications.

 

AngularJS Tables with ng-table Module Example Result

 

This is how we can use ng-table module in angularjs applications to bind data to tables.

 Comments (1)

  • MohanRaj tutlane registered profile image
     
    MohanRaj   Reply

    In live preview not showing table.it ll show only title..

     Sep 15, 2016

Leave a comment

  • Default Tutlane User