- Using ngTable module we can create a table for displaying data.
- This ngTable module can be found in this link.
- To demonstrate the use of ngTable we have created the NgTableDemo project structure.
- The data.json contains the code for person data.The content of data.json file are as follows:-
{
"person":[
{
"id" : 1,
"primary" : {"name":"John", "age":"20"},
"secondary" : {"name":"LINDA", "age":"23"}
},
{
"id" : 2,
"primary" : {"name":"SMITH", "age":"20"},
"secondary" : {"name":"KATE", "age":"25"}
},
{
"id" : 3,
"primary" : {"name":"Sandeep", "age":"20"},
"secondary" : {"name":"Sumanta", "age":"21"}
},
{
"id" : 4,
"primary" : {"name":"Bapi", "age":"20"},
"secondary" : {"name":"Tapi", "age":"25"}
},
{
"id" : 5,
"primary" : {"name":"John", "age":"20"},
"secondary" : {"name":"LINDA", "age":"23"}
},
{
"id" : 6,
"primary" : {"name":"SMITH", "age":"20"},
"secondary" : {"name":"KATE", "age":"25"}
},
{
"id" : 7,
"primary" : {"name":"Sandeep", "age":"20"},
"secondary" : {"name":"Sumanta", "age":"21"}
},
{
"id" : 8,
"primary" : {"name":"Bapi", "age":"20"},
"secondary" : {"name":"Tapi", "age":"25"}
},
{
"id" : 1,
"primary" : {"name":"John", "age":"20"},
"secondary" : {"name":"LINDA", "age":"23"}
},
{
"id" : 2,
"primary" : {"name":"SMITH", "age":"20"},
"secondary" : {"name":"KATE", "age":"25"}
},
{
"id" : 3,
"primary" : {"name":"Sandeep", "age":"20"},
"secondary" : {"name":"Sumanta", "age":"21"}
},
{
"id" : 4,
"primary" : {"name":"Bapi", "age":"20"},
"secondary" : {"name":"Tapi", "age":"25"}
},
{
"id" : 5,
"primary" : {"name":"John", "age":"20"},
"secondary" : {"name":"LINDA", "age":"23"}
},
{
"id" : 6,
"primary" : {"name":"SMITH", "age":"20"},
"secondary" : {"name":"KATE", "age":"25"}
},
{
"id" : 7,
"primary" : {"name":"Sandeep", "age":"20"},
"secondary" : {"name":"Sumanta", "age":"21"}
},
{
"id" : 8,
"primary" : {"name":"Bapi", "age":"20"},
"secondary" : {"name":"Tapi", "age":"25"}
},
{
"id" : 1,
"primary" : {"name":"John", "age":"20"},
"secondary" : {"name":"LINDA", "age":"23"}
},
{
"id" : 2,
"primary" : {"name":"SMITH", "age":"20"},
"secondary" : {"name":"KATE", "age":"25"}
},
{
"id" : 3,
"primary" : {"name":"Sandeep", "age":"20"},
"secondary" : {"name":"Sumanta", "age":"21"}
},
{
"id" : 4,
"primary" : {"name":"Bapi", "age":"20"},
"secondary" : {"name":"Tapi", "age":"25"}
},
{
"id" : 5,
"primary" : {"name":"John", "age":"20"},
"secondary" : {"name":"LINDA", "age":"23"}
},
{
"id" : 6,
"primary" : {"name":"SMITH", "age":"20"},
"secondary" : {"name":"KATE", "age":"25"}
},
{
"id" : 7,
"primary" : {"name":"Sandeep", "age":"20"},
"secondary" : {"name":"Sumanta", "age":"21"}
},
{
"id" : 8,
"primary" : {"name":"Bapi", "age":"20"},
"secondary" : {"name":"Tapi", "age":"25"}
},
{
"id" : 1,
"primary" : {"name":"John", "age":"20"},
"secondary" : {"name":"LINDA", "age":"23"}
},
{
"id" : 2,
"primary" : {"name":"SMITH", "age":"20"},
"secondary" : {"name":"KATE", "age":"25"}
},
{
"id" : 3,
"primary" : {"name":"Sandeep", "age":"20"},
"secondary" : {"name":"Sumanta", "age":"21"}
},
{
"id" : 4,
"primary" : {"name":"Bapi", "age":"20"},
"secondary" : {"name":"Tapi", "age":"25"}
},
{
"id" : 5,
"primary" : {"name":"John", "age":"20"},
"secondary" : {"name":"LINDA", "age":"23"}
},
{
"id" : 6,
"primary" : {"name":"SMITH", "age":"20"},
"secondary" : {"name":"KATE", "age":"25"}
},
{
"id" : 7,
"primary" : {"name":"Sandeep", "age":"20"},
"secondary" : {"name":"Sumanta", "age":"21"}
},
{
"id" : 8,
"primary" : {"name":"Bapi", "age":"20"},
"secondary" : {"name":"Tapi", "age":"25"}
}
]
}
- The package.json file contains the dependencies for the example.The content of package.json file are as follows:-
{
"name": "NgTableDemo",
"version": "0.0.1",
"description": "NgTableDemo",
"dependencies": {
"angular": "^1.4.4",
"bootstrap": "^3.3.5",
"ng-table": "^0.5.4"
}
}
- The demo.html file contains the code for rendering table .the content of demo.html file are as follows:-
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>ng-table demo</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/ng-table/dist/ng-table.min.css">
</head>
<body ng-controller="MainCtrl" class="container">
<table ng-table="tableParams" class="table table-bordered" >
<thead>
<tr>
<th rowspan="2">ID</th>
<th colspan="2">primary</th>
<th colspan="2">secondary</th>
</tr>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>NAME</th>
<th>AGE</th>
</tr>
<thead>
<tbody>
<tr ng-repeat="person in $data">
<td data-title="'id'" >
{{person.id}}
</td>
<td data-title="'Name'">
{{person.primary.name}}
</td>
<td data-title="'Age'">
{{person.primary.age}}
</td>
<td data-title="'Name'">
{{person.secondary.name}}
</td>
<td data-title="'Age'">
{{person.secondary.age}}
</td>
</tr>
</tbody>
</tbody>
</table>
</body>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/ng-table/dist/ng-table.min.js"></script>
<script src="app.js"></script>
</html>
- The app.js contains the code for the initializing the ngTable instance.The content of app.js file are as follows:-
var app = angular.module('app', ['ngTable']);
app.controller('MainCtrl', ['$scope', '$http','ngTableParams' ,
function ($scope, $http, ngTableParams) {
var tableData = []
//Table configuration
$scope.tableParams = new ngTableParams({
page: 1,
count: 6
},{
total:tableData.length,
//Returns the data for rendering
getData : function($defer,params){
$http.get('data.json').then(function(response) {
tableData = response.data.person;
$defer.resolve(tableData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
params.total(tableData.length);
});
}
});
}]);
- The output of code looks like following screenshot.
- The demo code can be found in the following GitHub link:-
