Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024
Easy

AngularJS Tables

Author Sneha Mallik
0 upvote
gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

Hello Ninjas! You must have heard about AngularJS. AngularJS is a framework to make dynamic and high-quality web apps and games. Today we will take a step into one more exciting topic for a better understanding of workflow and concepts.

AngularJS Tables

In this blog, we will be discussing AngularJS Tables in detail. We'll also look at how to display Angular table indexes using the orderBy and uppercase filters and the $index parameter.

AngularJS Tables

Tables provide a visual grouping of information, making it more visible and clear. Moreover, tables are a basic HTML(HyperText Markup Language) component when creating websites/ web pages.

AngularJS Logo

When we want to display data in a table format in AngularJS, we should use the ng-repeat directive because the table will include data in a repeated manner.

This directive is used to fetch data easily and is very simple to use. The directive called AngularJStable is used to display vast and complex data sets.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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:

Output without CSS

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:

Output with CSS

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:

Changing the CSS Style

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:

Output of Sorting Columns with OrderBy Filter

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:

Output of Displaying Table with Uppercase Filter

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:

Output of Displaying Table With Index

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:

Output of Displaying Table with Odd and Even

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!🥷✨

Previous article
AngularJS | AJAX-$http
Next article
AngularJS Select Boxes
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass