AngularJS Tables: Making Data Look Good - FadiZahhar/AngularJs GitHub Wiki

The StartApp Team Turns Data into Beautiful Tables

Scene: The Client’s Review

The StartApp Task Manager app is coming together, but the client sends new feedback:

“Can you show all tasks, users, and projects in organized tables—with sorting, searching, and real-time updates?”

Lina (Designer): “Lists are great, but tables make things easier to read when there’s lots of data.”

Mike (Team Lead): “AngularJS makes it simple to build dynamic tables. Let’s use what we’ve learned!”

1. Displaying Data in a Table

Sara (Junior Dev): “Let’s start by showing a list of users in a table, using ng-repeat for table rows.”

Sample Data:

$scope.users = [
  { name: "Sara", age: 28, email: "[email protected]" },
  { name: "Mike", age: 32, email: "[email protected]" },
  { name: "Lina", age: 26, email: "[email protected]" }
];

HTML Table:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Email</th>
  </tr>
  <tr ng-repeat="u in users">
    <td>{{ u.name }}</td>
    <td>{{ u.age }}</td>
    <td>{{ u.email }}</td>
  </tr>
</table>

2. Making Tables Dynamic: Real-Time Search

Lina: “Can we add a search box to filter users by name?”

HTML:

<input ng-model="searchName" placeholder="Search by name">
<table border="1">
  <tr>
    <th>Name</th><th>Age</th><th>Email</th>
  </tr>
  <tr ng-repeat="u in users | filter:searchName">
    <td>{{ u.name }}</td>
    <td>{{ u.age }}</td>
    <td>{{ u.email }}</td>
  </tr>
</table>
  • Start typing in the search box—only matching rows are shown!

3. Sorting Tables with orderBy

Mike: “We can sort by name, age, or email using AngularJS’s orderBy filter.”

HTML:

<select ng-model="sortKey">
  <option value="name">Name</option>
  <option value="age">Age</option>
  <option value="email">Email</option>
</select>
<table border="1">
  <tr>
    <th>Name</th><th>Age</th><th>Email</th>
  </tr>
  <tr ng-repeat="u in users | orderBy:sortKey">
    <td>{{ u.name }}</td>
    <td>{{ u.age }}</td>
    <td>{{ u.email }}</td>
  </tr>
</table>
  • Choose a sort field; the table updates instantly.

4. Combining Filters: Search and Sort

<input ng-model="searchName" placeholder="Search by name">
<select ng-model="sortKey">
  <option value="name">Name</option>
  <option value="age">Age</option>
  <option value="email">Email</option>
</select>
<table border="1">
  <tr>
    <th>Name</th><th>Age</th><th>Email</th>
  </tr>
  <tr ng-repeat="u in users | filter:searchName | orderBy:sortKey">
    <td>{{ u.name }}</td>
    <td>{{ u.age }}</td>
    <td>{{ u.email }}</td>
  </tr>
</table>

5. Pulling Data from the Server

Sara: “Let’s load table data with $http for real-world scenarios.”

Controller:

app.controller('userCtrl', function($scope, $http) {
  $http.get('users.json').then(function(response) {
    $scope.users = response.data;
  });
});
  • Now the table will always show the latest server data.

6. Team Challenge: Product Table with Price Formatting

Show a product table with price in currency, real-time search, and sort by price.

Sample Solution:

<div ng-app="shopApp" ng-controller="prodCtrl">
  <input ng-model="searchProduct" placeholder="Search products">
  <select ng-model="sortKey">
    <option value="name">Name</option>
    <option value="price">Price</option>
  </select>
  <table border="1">
    <tr>
      <th>Name</th><th>Price</th>
    </tr>
    <tr ng-repeat="p in products | filter:searchProduct | orderBy:sortKey">
      <td>{{ p.name }}</td>
      <td>{{ p.price | currency }}</td>
    </tr>
  </table>
</div>
<script>
var app = angular.module('shopApp', []);
app.controller('prodCtrl', function($scope) {
  $scope.products = [
    {name: "Laptop", price: 999.99},
    {name: "Mouse", price: 29.95},
    {name: "Monitor", price: 199.50}
  ];
});
</script>

Key Takeaways

  • AngularJS tables use ng-repeat to create rows for each item in data arrays.
  • Filters like filter and orderBy make tables interactive—users can search and sort with no extra JavaScript.
  • Combine data from $http to build powerful, real-time dashboards!

Team Conclusion

Lina: “Tables were hard before, but now it’s just a few lines of code for features our clients love!”

Mike: “Let’s look at more advanced directives or move to AngularJS routing next for a multi-page app.”

Try these examples in the [W3Schools AngularJS TryIt Editor](https://www.w3schools.com/angular/angular_tryit.asp?filename=tryangular_tables).

⚠️ **GitHub.com Fallback** ⚠️