The Basic Structure
Some of the HTML tags are used when creating tables in AngularJS. We can make it easier to populate the data in a table by using the HTML tags listed below in combination with AngularJS. In a nutshell, the data in a table is loaded using the 'ng-repeat' directive.
The HTML tags and their usage is mentioned below:
- <table>: It is used to display the table.
- <tr>: It is used to segregate the rows within the table.
- <th>: It is used to display the table header data.
-
<td>: It is used to display the actual data in the table.
Syntax:
The syntax of using the ng-repeat directive in AngularJS to display data in tables is as follows:
<table>
<tr ng-repeat="student in students">
<td>{{student.name}}</td>
<td>{{student.age}}</td>
<td>{{student.location}}</td>
</tr>
</table>
In the above syntax, we used the AngularJS ‘ng-repeat’ directive. It is used to loop through the 'students' object in order to assign values to each row of the table.
Examples
In the example below, a basic table has been made using AngularJS.
<!-- AngularJS Tables without CSS -->
<!DOCTYPE html>
<html>
<title>AngularJs Tables</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("codingNinjaApp", []);
app.controller("angularController", function ($scope) {
$scope.employees = [{
name: "Ramya Kapoor",
age: 10,
location:'Nagpur'
},
{
name: "Rehana Suri",
age: 30,
location:'Chennai'
},
{
name: "Geetha Iyer",
age: 29,
location:'Chennai'
},
{
name: "Shiva Kumar",
age: 24,
location:'Bangalore'
},
{
name: "Mahesh Patel",
age: 27,
location:'Bangalore'
}];
});
</script>
<body>
<div ng-app="codingNinjaApp" ng-controller="angularController">
<table>
<tr>
<td>Name</td>
<td>Age</td>
<td>Location</td>
</tr>
<tr ng-repeat="employee in employees">
<td>{{employee.name}}</td>
<td>{{employee.age}}</td>
<td>{{employee.location}}</td>
</tr>
</table>
</div>
</body>
</html>
Output:
Now, let us add some CSS to the table that has been made using AngularJS.
Code:
<!-- AngularJS Tables with CSS -->
<!DOCTYPE html>
<html>
<title>AngularJs Tables</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("codingNinjaApp", []);
app.controller("angularController", function ($scope) {
$scope.employees = [{
name: "Ramya Kapoor",
age: 10,
location:'Nagpur'
},
{
name: "Rehana Suri",
age: 30,
location:'Chennai'
},
{
name: "Geetha Iyer",
age: 29,
location:'Chennai'
},
{
name: "Shiva Kumar",
age: 24,
location:'Bangalore'
},
{
name: "Mahesh Patel",
age: 27,
location:'Bangalore'
}];
});
</script>
<style type="text/css">
table, tr, th, td {
border-collapse: collapse;
border: 1px solid black;
background-color: aquamarine;
padding: 10px;
}
</style>
<body>
<div ng-app="codingNinjaApp" ng-controller="angularController">
<table>
<caption>AngularJS Table Example</caption>
<tr >
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
<tr ng-repeat="employee in employees">
<td>{{employee.name}}</td>
<td>{{employee.age}}</td>
<td>{{employee.location}}</td>
</tr>
</table>
</div>
</body>
</html>
Output:
Operations on AngularJS Tables
Tables in AngularJS are very flexible. We can perform a lot of operations on tables. Let’s see some of them below.
Changing the CSS Style
Using CSS classes in AngularJS, we can add custom styles to table rows and columns.
The following is an example of using CSS styles to change the style of a table in an AngularJS application.
Code:
<style type="text/css">
table, tr, td {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
border: 1px solid black;
padding: 10px;
}
th {
text-align: center;
border: 1px solid black;
color: black;
padding: 10px;
}
caption {
font-size: 22px;
}
table tr:nth-child(even) {
background-color: pink;
}
table tr:nth-child(odd) {
background-color: rgb(246, 135, 153);
}
</style>
Output:
Note: We will be keeping these CSS properties throughout the blog.
Sorting Columns with OrderBy Filter
By using an orderBy filter in the AngularJS application, we can sort table columns.
Following is the example of sorting table columns using the orderBy filter.
Code:
<body>
<div ng-app="codingNinjaApp" ng-controller="angularController">
<table>
<caption>AngularJS Table Example</caption>
<tr >
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
<tr ng-repeat="employee in employees | orderBy:'age'">
<td>{{employee.name}}</td>
<td>{{employee.age}}</td>
<td>{{employee.location}}</td>
</tr>
</table>
</div>
</body>
Output:
Displaying Table with Uppercase Filter
Using uppercase filters in AngularJS, we can display the table content in uppercase.
Following is an example of an uppercase filter:
Code:
<body>
<div ng-app="codingNinjaApp" ng-controller="angularController">
<table>
<caption>AngularJS Table Example</caption>
<tr >
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
<tr ng-repeat="employee in employees">
<td>{{employee.name}}</td>
<td>{{employee.age}}</td>
<td>{{employee.location | uppercase }}</td>
</tr>
</table>
</div>
</body>
Output:
Displaying Table With Index
We can also display the index of the tables in angularJS. See the syntax below.
Code:
<body>
<div ng-app="codingNinjaApp" ng-controller="angularController">
<table>
<caption>AngularJS Table Example</caption>
<tr>
<th>Index</th>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
<tr ng-repeat="employee in employees">
<td>{{$index + 1}}</td>
<td>{{employee.name}}</td>
<td>{{employee.age}}</td>
<td>{{employee.location}}</td>
</tr>
</table>
</div>
</body>
Output:
Displaying Table with Odd and Even
We can separately work on odd and even rows in AngularJS. Following is a working example:
Code:
<body>
<div ng-app="codingNinjaApp" ng-controller="angularController">
<table>
<caption>AngularJS Table Example</caption>
<tr style="background-color: yellow;">
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
<tr ng-repeat="employee in employees">
<td ng-if="$odd" style="background-color: plum">{{employee.name}}</td>
<td ng-if="$even" style="background-color: lightcyan">{{employee.name}}</td>
<td ng-if="$odd" style="background-color: plum">{{employee.age}}</td>
<td ng-if="$even" style="background-color: lightcyan">{{employee.age}}</td>
<td ng-if="$odd" style="background-color: plum">{{employee.location}}</td>
<td ng-if="$even" style="background-color: lightcyan">{{employee.location}}</td>
</tr>
</table>
</div>
</body>
Output:
This was all about tables in AngularJS. Let us see some of the frequently asked questions on this topic.
Frequently Asked Questions
Why is ‘ng’ in AngularJS?
The ‘ng’ in AngularJS refers to the ‘next generation’. This basically means the next generation of HTML(HyperText Markup Language).
What is a table in AngularJS?
In AngularJS, we can arrange information into tables, which increases its visibility and clarity. Tables are a typical HTML element when creating web pages. It is used for data display.
Which directive can be used to display a table in AngularJS?
The 'ng-repeat' directive is used to display a table in AngularJS.
How can we effectively implement tables in AngularJS?
The ng-repeat directive loops through the array of data objects in Document Object Model(DOM) components, making it easier to display data in tables.
Can we implement tables in HTML without using AngularJS?
Yes, we can implement tables in HTML without AngularJS. AngularJS uses the ng-repeat directive to fetch data easily. It is simple to fetch as the data is repeatable.
Conclusion
In this article, we covered AngularJS Tables. We learned about the basic structure of the table, along with working examples of a table without CSS and a table with CSS. We discussed sorting columns in a table using the orderBy filter. We also looked at tables with uppercase, index and odd-even filters.
If you would like to learn more similar to this topic, check out our related articles on-
Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, JavaScript, System Design, DBMS, Java, etc. Enroll in our courses and refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.
Happy Coding, Ninja!🥷✨
38+ registered 
