Hello Friends, In this tutorial we are going to discuss Angular Js Tables and also we will create some examples on that.

Angular Js Tables:

Tables are very important DOM element for any HTML form. To display data in grid or tabular format we need to create Table in our HTML page

Example for Displaying Data in Table:

<!DOCTYPE html>
<html>
<head>
<title>
Displaying Data using Angular JS
</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;

}
table tbody tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tbody tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="employeeCtrl">

<table style="width:100%;">
<thead>
<tr>
<th>
Name
</th>
<th>
Skill
</th>
<th>
Salary
</th>
</thead>
<tbody>
<tr ng-repeat="x in EmployeeData">
<td>{{ x.Name }}</td>
 
<td>{{ x.Skill }}</td>
<td>{{ x.Salary }}</td>
</tr>
</tbody>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('employeeCtrl', function($scope) {

var Data=[{"Name":"Rohit","Skill":"C#","Salary":20000},{"Name":"Dinesh","Skill":"ASP.NET MVC","Salary":50000},{"Name":"Ketan","Skill":"ASP.NET 
MVC","Salary":60000},{"Name":"Manish","Skill":"Salesforce","Salary":70000}];


$scope.EmployeeData= Data;
});
</script>

</body>
</html>

Display Data using  Angular with Order By Filter:

<!DOCTYPE html>
<html>
<head>
<title>
Displaying Data using Angular JS
</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;

}
table tbody tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tbody tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="employeeCtrl">

<table style="width:100%;">
<thead>
<tr>
<th>
Name
</th>
<th>
Skill
</th>
<th>
Salary
</th>
</thead>
<tbody>
<tr ng-repeat="x in EmployeeData | orderBy : 'Name'">
<td>{{ x.Name }}</td>
 
<td>{{ x.Skill }}</td>
<td>{{ x.Salary }}</td>
</tr>
</tbody>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('employeeCtrl', function($scope) {

var Data=[{"Name":"Rohit","Skill":"C#","Salary":20000},{"Name":"Dinesh","Skill":"ASP.NET MVC","Salary":50000},{"Name":"Ketan","Skill":"ASP.NET 
MVC","Salary":60000},{"Name":"Manish","Skill":"Salesforce","Salary":70000}];


$scope.EmployeeData= Data;
});
</script>

</body>
</html>

Displaying Data using $index

<!DOCTYPE html>
<html>
<head>
<title>
Displaying Data using Angular JS
</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;

}
table tbody tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tbody tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="employeeCtrl">

<table style="width:100%;">
<thead>
<tr>
<th>
Sequence
</th>
<th>
Name
</th>
<th>
Skill
</th>
<th>
Salary
</th>
</thead>
<tbody>
<tr ng-repeat="x in EmployeeData">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>

<td>{{ x.Skill }}</td>
<td>{{ x.Salary }}</td>
</tr>
</tbody>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('employeeCtrl', function($scope) {

var Data=[{"Name":"Rohit","Skill":"C#","Salary":20000},{"Name":"Dinesh","Skill":"ASP.NET MVC","Salary":50000},{"Name":"Ketan","Skill":"ASP.NET
MVC","Salary":60000},{"Name":"Manish","Skill":"Salesforce","Salary":70000}];

$scope.EmployeeData= Data;
});
</script>

</body>
</html>

View More:

Conclusion:

I hope you loved my this tutorial about Angular Js Tables. I would like to have your feedback, comments and suggestions.

Thank You.

16 Comments

  • Hey would you mind letting me know which hosting company you’re using? I’ve loaded your blog in 3 completely different browsers and I must say this blog loads a lot faster then most. Can you suggest a good hosting provider at a reasonable price? Thanks a lot, I appreciate it!

  • I just wanted to jot down a small remark to be able to express gratitude to you for all the wonderful tricks you are giving out on this site. My time consuming internet research has finally been compensated with brilliant details to exchange with my co-workers. I ‘d tell you that most of us readers are undeniably lucky to live in a useful place with many brilliant professionals with beneficial concepts. I feel pretty happy to have seen your entire site and look forward to plenty of more fun moments reading here. Thanks once again for a lot of things.

  • My brother recommended I might like this blog. He was totally right. This post truly made my day. You can not imagine just how much time I had spent for this information! Thanks!

  • I’ve recently started a site, the info you provide on this web site has helped me greatly. Thanks for all of your time & work.

  • After examine just a few of the weblog posts on your web site now, and I truly like your method of blogging. I bookmarked it to my bookmark website checklist and might be checking back soon. Pls check out my website online as properly and let me know what you think.

  • Hi there! I could have sworn I’ve been to this blog before but after checking through some of the post I realized it’s new to me. Anyhow, I’m definitely delighted I found it and I’ll be book-marking and checking back often!

  • Terrific work! That is the kind of information that are supposed to be shared around the internet. Disgrace on the seek engines for now not positioning this publish higher! Come on over and discuss with my website . Thanks =)

  • I believe this is among the so much vital information for me. And i am glad reading your article. However wanna commentary on few basic issues, The site style is perfect, the articles is in point of fact nice : D. Excellent job, cheers