AngularJS Tables - How we can create Tables in AngularJS

Published August 13, 2022

AngularJS uses the ng-repeat directive to draw tables. With AngularJS, displaying tables is incredibly straightforward and quick. The table shows data in a format and distributed data with a particular heading.

Syntax 

The following syntax helps to use any AngularJS filter with value in the expression.

<table>  

   <tr>  

      <th> Heading 1 </th>  

      <th> Heading 2 </th>  

   </tr>  

   <tr ng-repeat = "scope_variable">  

      <td>{{ value1}}</td>  

      <td>{{ value2 }}</td>  

   </tr>  

</table>  

 

Examples

The following examples show the table and its data using the AngularJS function.

Example#1: The basic AngularJS table with its data.

<!DOCTYPE html>

<html>

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

<body>

<div ng-app="firstApp" ng-controller="firstCtroller">

<h4> AngularJS Table </h4>

<table border="1" width="80%">  

<tr>  

<th> Name </th>  

<th> Country </th>  

</tr>  

<tr ng-repeat="x in places">  

<td>{{x.student}}</td>  

<td>{{x.country}}</td>  

</tr>  

</table>  

</div>

<script>

angular.module('firstApp', []).controller('firstCtroller', function($scope) {

    $scope.places = [

        {student:'Sita',country:'India'},  

        {student:'John',country:'Germany'},  

        {student:'Ram',country:'Mexico'},  

        {student:'Sham',country:'Iran'},  

        {student:'Alex',country:'Koria'},  

        {student:'Radha',country:'India'},  

        {student:'Karl',country:'Japan'},  

        {student:'John',country:'UK'},  

        {student:'Tia',country:'America'}  

    ];

});

</script>

</body>

</html>

 

Output

Create Table in AngularJS

 

Example#2: The basic AngularJS table with CSS Style.

<!DOCTYPE html>

<html>

<head>

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

<style>

table, th , td {

border: 1px solid black;

border-collapse: collapse;

padding: 3px;

}

table tr:nth-child(even) {

background-color: lightgrey;

}

</style>

</head>

<body>

<div ng-app="firstApp" ng-controller="firstCtroller">

<h4> AngularJS Table with CSS </h4>

<table border="1" width="80%">

<tr>

<th> Name </th>  

<th> Country </th>  

</tr>

<tr ng-repeat="x in places">

<td>{{x.student}}</td>

<td>{{x.country}}</td>

</tr>

</table>

</div>

<script>

angular.module('firstApp', []).controller('firstCtroller', function($scope) {

$scope.places = [

{student:'Sita',country:'India'},

{student:'John',country:'Germany'},

{student:'Ram',country:'Mexico'},

{student:'Sham',country:'Iran'},

{student:'Alex',country:'Koria'},

{student:'Radha',country:'India'},

{student:'Karl',country:'Japan'},

{student:'John',country:'UK'},

{student:'Tia',country:'America'}

];

});

</script>

</body>

</html>

 

Output 

Create Table in AngularJS example 2

 

Example#3: The AngularJS table with the "orderby" filter.

<!DOCTYPE html>

<html>

<head>

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

<style>  

   table, th , td {  

      border: 1px solid black;  

      border-collapse: collapse;  

      padding: 3px;  

   }  

     

   table tr:nth-child(even) {  

      background-color: lightgrey;  

   }  

    

</style>  

</head>

<body>

<div ng-app="firstApp" ng-controller="firstCtroller">

<h4> AngularJS Table with CSS </h4>

<table border="1" width="80%">  

<tr>  

<th> Name </th>  

<th> Country </th>  

</tr>  

<tr ng-repeat="x in places | orderBy:'student'">

<td>{{x.student}}</td>  

<td>{{x.country}}</td>  

</tr>  

</table>  

</div>

<script>

angular.module('firstApp', []).controller('firstCtroller', function($scope) {

    $scope.places = [

        {student:'Sita',country:'India'},  

        {student:'John',country:'Germany'},  

        {student:'Ram',country:'Mexico'},  

        {student:'Sham',country:'Iran'},  

        {student:'Alex',country:'Koria'},  

        {student:'Radha',country:'India'},  

        {student:'Karl',country:'Japan'},  

        {student:'John',country:'UK'},  

        {student:'Tia',country:'America'}  

    ];

});

</script>

</body>

</html>

 

Output 

Tables in AngularJS

 

Summary

The AngularJS table helps to display large-size data in a proper format. It shows understandable data for all types of users. The AngularJS table uses CSS style and filters to offer information with a heading