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.

Leave a Comment