AngularJS — Tables

Basic Table

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

Table with Filtering

<input ng-model="searchText" placeholder="Search...">

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr ng-repeat="user in users | filter:searchText">
    <td>{{user.name}}</td>
    <td>{{user.email}}</td>
  </tr>
</table>

Table with Ordering

<table>
  <tr>
    <th ng-click="orderBy('name')">Name</th>
    <th ng-click="orderBy('email')">Email</th>
  </tr>
  <tr ng-repeat="user in users | orderBy:sortColumn:reverseSort">
    <td>{{user.name}}</td>
    <td>{{user.email}}</td>
  </tr>
</table>

Controller

$scope.sortColumn = 'name';
$scope.reverseSort = false;

$scope.orderBy = function(column) {
  if ($scope.sortColumn === column) {
    $scope.reverseSort = !$scope.reverseSort;
  } else {
    $scope.sortColumn = column;
    $scope.reverseSort = false;
  }
};

Mini Practice

1. Create a basic table
2. Add search filtering
3. Add sorting
4. Combine filtering and sorting

Up Next

Continue with JSON — working with JSON.