Display Tables Using AngularJS

The data in tables are basically repeatable. In AngularJS, a better way to display tables is the ng-repeat directive. The ng-repeat directive will help us to loop through the array data in the DOM elements and helps us to display tables very easily.

Let's check how to use ng-repeat for creating tables.

Ng-repeat

The ng-repeat directive repeats a set of HTML, a given number of times.

The set of HTML will be repeated once per item in a collection.

The collection must be an array or an object.

Syntax

<element ng-repeat="expression"></element>

Here, to create tables follow given steps.

  • Set up an angularJs application.

  • Define the data for the table.

  • Using ng-repeat directive, iterate the data to display.

  • Display the data as a table

  • Style the data to look better.

Let's look into code, how to display the table using ng-repeat.

Example

Open Compiler
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>
         Table creation using Angularjs
      </title>
      <script src="https://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: "Tom",
               id: 25,
               role:'Tester'
            }, {
               name: "Thomas",
               id: 29,
               role: 'Developer'
            }, {
               name: "Jennie",
               id: 26,
               role:'UI Developer'
            },
            {
               name: "Max",
               id: 24,
               role:'PO'
            },
            {
               name: "Jon",
               id: 21,
               role:'TL'
            }];
         });
      </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>Table creation using AngularJs</h2>
         <table>
            <tr>
               <td>Name</td>
               <td>Id</td>
               <td>Role</td>
            </tr>
            <tr ng-repeat="user in users">
               <td>{{user.name}}</td>
               <td>{{user.id}}</td>
               <td>{{user.role}}</td>
            </tr>
         </table>
      </div>
   </body>
</html>

Here, we assigned some array of data and iterated each element and displayed it in a table form using ng-repeat directive. Here we added styling for the table also. We can also sort the table items using orderBy pipe. Let's see an example below

Example

Open Compiler
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>
         Table creation using Angularjs
      </title>
      <script src="https://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: "Tom",
               id: 25,
               role:'Tester'
            }, {
               name: "Thomas",
               id: 29,
               role:'Developer'
            }, {
               name: "Jennie",
               id: 26,
               role:'UI Developer'
            },
            {
               name: "Max",
               id: 24,
               role:'PO'
            },
            {
               name: "Jon",
               id: 21,
               role:'TL'
            }];
         });
      </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>Table creation using AngularJs</h2>
         <table>
            <tr>
               <td>Name</td>
               <td>Id</td>
               <td>Role</td>
            </tr>
            <tr ng-repeat="user in users | orderBy: 'id'">
               <td>{{user.name}}</td>
               <td>{{user.id}}</td>
               <td>{{user.role}}</td>
            </tr>
         </table>
      </div>
   </body>
</html>

Here, we did sort by the Id column, using orderBy pipe we can sort the table columns.

Using ng-repeat directive we can display tables easily in angularjs.

Updated on: 2023-02-21T18:14:43+05:30

624 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements