<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <script data-require="ng-table@*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
    <script data-require="ng-table-export@0.1.0" data-semver="0.1.0" src="http://bazalt-cms.com/assets/ng-table-export/0.1.0/ng-table-export.js"></script>
    
    <link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="main" ng-controller="DemoCtrl">
    <p>It use <a href="https://github.com/esvit/ng-table-export" target="_blank">ngTableExport</a></p>
  
    <!-- <a class="btn btn-primary" ng-mousedown="csv.generate()" ng-href="{{ csv.link() }}" download="test.csv">Export to CSV</a> -->
    <div class="panel panel-default">
    <div class="panel-heading">Header 
      <a class="btn btn-primary" ng-mousedown="csv.generate()" ng-href="{{ csv.link() }}" download="test.csv">Export to CSV</a>
    </div>
    <table ng-table="tableParams" show-filter='true' class="table table-bordered table-hover table-condensed" export-csv="csv">
      <tbody>
        <tr ng-repeat="user in $data">
          <td data-title="'Name'" filter="{'name':'text'}">
                {{user.name}}
            </td>
          <td data-title="'Age'" filter="{'age':'text'}">
                {{user.age}}
            </td>
        </tr>
      </tbody>
    </table>
    <div class="panel-footer"></div>
    </div>
  </body>

</html>
var app = angular.module('main', ['ngTable', 'ngTableExport']).
controller('DemoCtrl', function($scope, ngTableParams, $sce, $filter) {
    var data = [{name: "Moroni", age: 50},
        {name: "Tiancum", age: 43},
        {name: "Jacob", age: 27},
        {name: "Nephi", age: 29},
        {name: "Enos", age: 34},
        {name: "Tiancum", age: 43},
        {name: "Jacob", age: 27},
        {name: "Nephi", age: 29},
        {name: "Enos", age: 34},
        {name: "Tiancum", age: 43},
        {name: "Jacob", age: 27},
        {name: "Nephi", age: 29},
        {name: "Enos", age: 34},
        {name: "Tiancum", age: 43},
        {name: "Jacob", age: 27},
        {name: "Nephi", age: 29},
        {name: "Enos", age: 34}];

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,           // count per page
        filter:{
          name:''
        }
    }, {
        total: data.length, // length of data
        getData: function($defer, params) {
            // use build-in angular filter
            var orderedData = params.filter() ?
                   $filter('filter')(data, params.filter()) :
                   data;

            $scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

            params.total(orderedData.length); // set total for recalc pagination
            $defer.resolve($scope.users);}
    });
});
/* body {
    padding: 10px !important;   
} */

/* .ng-table {
    border: 1px solid #000;
} */