Fork me on GitHub

angular-table

Html

<table class="table table-striped" at-table at-paginated at-list="list" at-config="config">
  <thead></thead>
  <tbody>
    <tr>
      <td at-implicit at-sortable at-attribute="index" width="150" at-initial-sorting="asc"></td>
      <td at-implicit at-sortable at-attribute="name"  width="250"></td>
      <td at-implicit at-sortable at-attribute="email"></td>
    </tr>
  </tbody>
</table>

<at-pagination at-list="list" at-config="config"></at-pagination>

Javascript

angular.module("angular-table-example").controller("basicExampleCtrl", ["$scope", function($scope) {
  $scope.list = $scope.$parent.personList
  $scope.config = {
    itemsPerPage: 5,
    fillLastPage: true
  }
}]);


Add

Filter

$scope.itemsPerPage

$scope.maxPages

$scope.fillLastPage


{{config}}

Html

<table class="table table-striped" at-table at-paginated at-list="filteredList" at-config="config">
  <thead></thead>
  <tbody>
    <tr>
      <td at-implicit at-attribute="name" width="250"></td>
    </tr>
  </tbody>
</table>

<at-pagination at-list="filteredList" at-config="config"></at-pagination>

Javascript

angular.module("angular-table-example").controller("interactiveExampleCtrl", ["$scope", "$filter", function($scope, $filter) {
  $scope.originalList = $scope.$parent.personList;

  $scope.filteredList = $scope.originalList;

  $scope.config = {
    itemsPerPage: 5,
    maxPages: 5,
    fillLastPage: "yes"
  };

  $scope.add = function() {
    $scope.originalList.push({name: $scope.nameToAdd});
    $scope.updateFilteredList();
  }

  $scope.updateFilteredList = function() {
    $scope.filteredList = $filter("filter")($scope.originalList, $scope.query);
  };
}])

Using at-implicit And at-attribute

 
<table class="table table-striped table-bordered"
  at-table at-list="list">
  <thead></thead>
  <tbody>
    <tr> <td at-implicit at-attribute="name"></td> </tr>
  </tbody>
</table>

Using item And Custom Markup

Hello {{item.name}} {{item.name.length}} 
<table class="table table-striped table-bordered"
  at-table at-list="list">
  <thead></thead>
  <tbody>
    <tr>
      <td at-title="Name">
        Hello {{item.name}}
      </td>
      <td at-title="Length">
        <code>{{item.name.length}}</code>
      </td>
    </tr>
  </tbody>
</table>

Implicit Title

 
<table class="table table-striped table-bordered"
  at-table at-list="list">
  <thead></thead>
  <tbody>
    <tr> <td at-implicit at-attribute="name"></td> </tr>
  </tbody>
</table>

No Header

 
<table class="table table-striped table-bordered"
  at-table at-list="list">
  <tbody>
    <tr> <td at-implicit at-attribute="name"></td> </tr>
  </tbody>
</table>

With at-title Setting

 
<table class="table table-striped table-bordered"
  at-table at-list="list">
  <thead></thead>
  <tbody>
    <tr> <td at-implicit at-attribute="name" at-title="Handle"></td> </tr>
  </tbody>
</table>

With Markup

Nickname 
<table class="table table-striped table-bordered"
  at-table at-list="list">
  <thead>
    <tr> <th at-attribute="name">Nickname</th> </tr>
  </thead>
  <tbody>
    <tr> <td at-implicit at-attribute="name"></td> </tr>
  </tbody>
</table>