AngularJS Tables

In AngularJS, tables can be dynamically populated with data, and the data can be updated, filtered, and sorted using AngularJS directives and two-way data binding. AngularJS makes working with tables efficient and interactive, allowing for easy manipulation of table data.

Key Concepts of AngularJS Tables

1. ng-repeat: Used to iterate over an array and generate rows in a table.
2. ng-model: Binds form elements or table inputs to model data.
3. ng-click: Allows performing actions like sorting, deleting, or modifying rows.
4. ng-show/ng-hide: Used to control the visibility of table rows or columns based on conditions.

 

Basic Example of a Table

This example demonstrates how to create a table using AngularJS where data is dynamically bound to the model.

Simple Table Example

<div ng-app="myApp" ng-controller="myCtrl">
  <table border="1">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="person in people">
        <td>{{person.name}}</td>
        <td>{{person.age}}</td>
        <td>{{person.city}}</td>
      </tr>
    </tbody>
  </table>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.people = [
      { name: "John", age: 28, city: "New York" },
      { name: "Jane", age: 32, city: "Chicago" },
      { name: "Mike", age: 45, city: "Los Angeles" }
    ];
  });
</script>

• ng-repeat="person in people": Iterates over the people array and creates a row for each person.

 

Sorting Table Data

You can implement sorting of table data by using AngularJS expressions combined with the ng-click directive.

Example with Sorting

<div ng-app="myApp" ng-controller="myCtrl">
  <table border="1">
    <thead>
      <tr>
        <th ng-click="sortData('name')">Name</th>
        <th ng-click="sortData('age')">Age</th>
        <th ng-click="sortData('city')">City</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="person in people | orderBy:sortColumn">
        <td>{{person.name}}</td>
        <td>{{person.age}}</td>
        <td>{{person.city}}</td>
      </tr>
    </tbody>
  </table>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.people = [
      { name: "John", age: 28, city: "New York" },
      { name: "Jane", age: 32, city: "Chicago" },
      { name: "Mike", age: 45, city: "Los Angeles" }
    ];

    $scope.sortColumn = 'name';

    $scope.sortData = function(column) {
      $scope.sortColumn = column;
    };
  });
</script>

• ng-click="sortData('name')": Sorts the table when clicking the column header.
• orderBy:sortColumn: Sorts the table data based on the sortColumn variable.

 

Filtering Table Data

AngularJS provides the filter filter to dynamically search and filter table rows based on a search term.

Example with Filtering

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="searchText" placeholder="Search">
  <table border="1">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="person in people | filter:searchText">
        <td>{{person.name}}</td>
        <td>{{person.age}}</td>
        <td>{{person.city}}</td>
      </tr>
    </tbody>
  </table>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.people = [
      { name: "John", age: 28, city: "New York" },
      { name: "Jane", age: 32, city: "Chicago" },
      { name: "Mike", age: 45, city: "Los Angeles" }
    ];
  });
</script>

• ng-model="searchText": Binds the input field to the searchText model.
• filter:searchText: Filters the table rows based on the searchText.

 

Pagination for Tables

AngularJS allows easy pagination with the help of custom logic or third-party libraries like angular-ui-bootstrap.

Example with Pagination (Manual)

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="searchText" placeholder="Search">
  <table border="1">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="person in people.slice((currentPage-1)*pageSize, currentPage*pageSize) | filter:searchText">
        <td>{{person.name}}</td>
        <td>{{person.age}}</td>
        <td>{{person.city}}</td>
      </tr>
    </tbody>
  </table>
  <button ng-click="prevPage()">Previous</button>
  <button ng-click="nextPage()">Next</button>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.people = [
      { name: "John", age: 28, city: "New York" },
      { name: "Jane", age: 32, city: "Chicago" },
      { name: "Mike", age: 45, city: "Los Angeles" },
      { name: "Emma", age: 25, city: "Boston" },
      { name: "Lucas", age: 30, city: "Dallas" }
    ];

    $scope.currentPage = 1;
    $scope.pageSize = 2;

    $scope.prevPage = function() {
      if ($scope.currentPage > 1) {
        $scope.currentPage--;
      }
    };

    $scope.nextPage = function() {
      if ($scope.currentPage < Math.ceil($scope.people.length / $scope.pageSize)) {
        $scope.currentPage++;
      }
    };
  });
</script>

• ng-repeat="person in people.slice((currentPage-1)pageSize, currentPagepageSize)": Manages pagination by slicing the array.
• currentPage: Tracks the current page.
• pageSize: Specifies how many items per page to display.

 

Summary

In AngularJS, working with tables involves using directives such as ng-repeat, ng-click, and ng-model to manage the display and behavior of table rows. Features like sorting, filtering, and pagination can be easily implemented to create interactive, data-driven tables. Whether displaying static or dynamic data, AngularJS provides powerful tools to manipulate and present data in a tabular format.