AngularJS Tables

Here we will learn tables in angularjs, how to show json data in table format using ng-repeat directive, change the style of table using css, sort table columns using orderby filter with examples.

AngularJS Tables

In angularjs if we want to show data in table formats it’s better to use ng-repeat directive because the table will contain data in repeated format.

 

In angularjs the ng-repeat directive will loop through the array data objects in the DOM elements and help us to show data in tables easily.

Syntax of AngularJS Tables

Following is the syntax of using ng-repeat directive in angularjs to display data in tables

 

<tr ng-repeat="user in users">

<td>{{user.name}}</td>

<td>{{user.age}}</td>

<td>{{user.location}}</td>

</tr>

If you observe above syntax we used angularjs ng-repeat directive to loop through users object to bind values to each row in table.

Example of AngularJS Tables

Following is the example of binding tables in angularjs applications.

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs Tables Example with ng-repeat Directive

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module("tablesApp", []);

app.controller("tablesCtrl", function ($scope) {

$scope.users = [{

name: "Madhav Sai",

age: 30,

location:'Nagpur'

}, {

name: "Suresh Dasari",

age: 29,

location:'Chennai'

}, {

name: "Rohini Alavala",

age: 29,

location:'Chennai'

}, {

name: "Praveen Kumar",

age: 24,

location:'Bangalore'

}];

});

</script>

<style type="text/css">

table, tr , td {

border: 1px solid grey;

border-collapse: collapse;

padding: 3px;

}

</style>

</head>

<body ng-app="tablesApp">

<div ng-controller="tablesCtrl">

<h2>AngularJS Tables Example</h2>

<table>

<tr>

<td>Name</td>

<td>Age</td>

<td>Location</td>

</tr>

<tr ng-repeat="user in users">

<td>{{user.name}}</td>

<td>{{user.age}}</td>

<td>{{user.location}}</td>

</tr>

</table>

</div>

</body>

</html>

If you observe above example we are looping through array object using ng-repeat directive and binding table row values in angularjs.

Output of AngularJS Tables Example

Following is the result of binding tables in angularjs applications.

 

Angularjs Tables with ng-repeat Directive Example Result

 

We can change the style of tables by using CSS styles in angularjs applications.

AngularJS Change the Style of Tables

In angularjs we can apply custom styles to table rows and columns by using CSS classes. Following is the example of changing style of table in angularjs applications using CSS styles.

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs Tables with CSS Styles Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module("tablesApp", []);

app.controller("tablesCtrl", function ($scope) {

$scope.users = [{

name: "Madhav Sai",

age: 30,

location:'Nagpur'

}, {

name: "Suresh Dasari",

age: 29,

location:'Chennai'

}, {

name: "Rohini Alavala",

age: 29,

location:'Chennai'

}, {

name: "Praveen Kumar",

age: 24,

location:'Bangalore'

}];

});

</script>

<style type="text/css">

table, tr , td {

border: 1px solid grey;

border-collapse: collapse;

padding: 5px;

}

table tr:nth-child(odd) {

background-color: #d6f1f8;

}

table tr:nth-child(even) {

background-color: #ffffff;

}

</style>

</head>

<body ng-app="tablesApp">

<div ng-controller="tablesCtrl">

<h2>AngularJS Tables with CSS Styles</h2>

<table>

<tr>

<td>Name</td>

<td>Age</td>

<td>Location</td>

</tr>

<tr ng-repeat="user in users">

<td>{{user.name}}</td>

<td>{{user.age}}</td>

<td>{{user.location}}</td>

</tr>

</table>

</div>

</body>

</html>

If you observe above example we are changing row styles using odd and even properties of css in angularjs application.

Output of AngularJS Table with CSS

Following is the example to change the style of table rows in angularjs application.

 

Angularjs change style of tables example result

 

In angularjs we can sort the columns of the table by using orderby filter. We will how to sort table columns with example.

AngularJS Sort Table Columns with OrderBy Filter

By using orderby filter in angularjs application we can sort table columns. Following is the example to sort table columns using orderby filter in angularjs applications.

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs Sort Table Columns Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module("tablesApp", []);

app.controller("tablesCtrl", function ($scope) {

$scope.users = [{

name: "Madhav Sai",

age: 10,

location:'Nagpur'

}, {

name: "Suresh Dasari",

age: 30,

location:'Chennai'

}, {

name: "Rohini Alavala",

age: 29,

location:'Chennai'

}, {

name: "Praveen Kumar",

age: 24,

location:'Bangalore'

}];

});

</script>

<style type="text/css">

table, tr , td {

border: 1px solid grey;

border-collapse: collapse;

padding: 5px;

}

</style>

</head>

<body ng-app="tablesApp">

<div ng-controller="tablesCtrl">

<h2>AngularJS Sort Table Columns</h2>

<table>

<tr>

<td>Name</td>

<td>Age</td>

<td>Location</td>

</tr>

<tr ng-repeat="user in users | orderBy : 'age'">

<td>{{user.name}}</td>

<td>{{user.age}}</td>

<td>{{user.location}}</td>

</tr>

</table>

</div>

</body>

</html>

If you observe above code we are sorting table column “age” by using orderby filter in angularjs applications.

Output of AngularJS Sort Table Columns Example

Following is the result of sorting table columns in angularjs applications using orderby filter.

 

Angularjs sort table columns using orderby filter example result

 

This is how we can bind tables, change styles of tables and sort columns of tables in angularjs applications.