updated demo

Author: Andrew Perlitch

README.md

@@ -1,7 +1,7 @@
 angular-mesa
 ====================
 
-A table component built in angular. Handles large datasets by virtualizing rows.
+A table component built in angular. Handles large datasets by virtualizing rows. [Live demo](http://andyperlitch.github.io/angular-mesa/)
 
 Feature List
 ------------

app/index.html

@@ -44,6 +44,7 @@
             <li><a href="#">kitchen sink</a></li>
             <li><a href="#/max-height">max height</a></li>
             <li><a href="#/expandable">expandable rows</a></li>
+            <li><a href="http://andyperlitch.github.io/angular-mesa/">github</a></li>
           </ul>
         </div><!-- /.navbar-collapse -->
       </div><!-- /.container-fluid -->

app/scripts/controllers/main.js

@@ -102,6 +102,10 @@ angular.module('apMesa.ghPage')
       loading: true,
       loadingPromise: dataDfd.promise
     };
+    $scope.my_table_options_paginate = angular.extend({}, $scope.my_table_options, {
+      pagingStrategy: 'PAGINATE',
+      rowsPerPage: 8
+    });
 
     // kick off interval that updates the dataset
     setInterval(function() {

app/views/main.html

@@ -16,6 +16,7 @@ <h5>Features</h5>
         <li>stacked ordering</li>
         <li>localStorage/custom state persistance</li>
         <li>rows are virtualized (can handle a lot of rows)</li>
+        <li>pagination</li>
       </ul>
     </div>
   </div>
@@ -29,17 +30,48 @@ <h5>Kitchen Sink Example:</h5>
 <br>
 <br>
 
+<div ng-init="pagingScheme = 'scroll'">
+  <div class="btn-group" role="group">
+    <button
+      ng-disabled="pagingScheme == 'scroll'"
+      ng-click="pagingScheme = 'scroll'"
+      type="button"
+      class="btn btn-primary"
+    >scroll</button>
+    <button
+      ng-disabled="pagingScheme == 'paginate'"
+      ng-click="pagingScheme = 'paginate'"
+      type="button"
+      class="btn btn-primary"
+    >paginate</button>
+  </div>
+  <div ng-if="pagingScheme == 'scroll'">
+    <ap-mesa 
+      columns="my_table_columns" 
+      rows="my_table_data"
+      selected="my_selected_rows"
+      class="col-sm-9"
+      options="my_table_options"
+      table-class="table">
+    </ap-mesa>
+    <div class="col-sm-3">
+      <h4>Selected rows: </h4>
+      <pre>{{my_selected_rows | json}}</pre>
+    </div>
+  </div>
 
-Selected rows: 
-
-<ap-mesa 
-  columns="my_table_columns" 
-  rows="my_table_data"
-  selected="my_selected_rows"
-  class="col-sm-9"
-  options="my_table_options"
-  table-class="table">
-</ap-mesa>
-
-
-<pre class="col-sm-3">{{my_selected_rows | json}}</pre>
+  <div ng-if="pagingScheme == 'paginate'">
+    <ap-mesa 
+      columns="my_table_columns" 
+      rows="my_table_data"
+      selected="my_selected_rows"
+      class="col-sm-9"
+      options="my_table_options_paginate"
+      table-class="table">
+    </ap-mesa>
+    <div class="col-sm-3">
+      <h4>Selected rows: </h4>
+      <pre>{{my_selected_rows | json}}</pre>
+    </div>
+  </div>
+</div>