AngularJS Example

HTML

<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css">
<div ng-app="app">
  <div ng-controller="MainCtrl">
    <input ng-model='filterValue' />
    <button ng-click='filter()'>Filter</button>
    <div id="grid1" ui-grid="gridOptions" class="grid"></div>
  </div>
</div>

JavaScript

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
    var today = new Date();
    $scope.gridOptions = {
      enableFiltering: false,
      onRegisterApi: function(gridApi) {
        $scope.gridApi = gridApi;
        $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200);
      },
      columnDefs: [{
        field: 'name'
      }, {
        field: 'gender',
        cellFilter: 'mapGender'
      }, {
        field: 'company'
      }, {
        field: 'email'
      }, {
        field: 'phone'
      }, {
        field: 'age'
      }, {
        field: 'mixedDate'
      }]
    };

    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
      .success(function(data) {
        $scope.gridOptions.data = data;
        $scope.gridOptions.data[0].age = -5;

        data.forEach(function addDates(row, index) {
          row.mixedDate = new Date();
          row.mixedDate.setDate(today.getDate() + (index % 14));
          row.gender = row.gender === 'male' ? '1' : '2';
        });
      });

    $scope.filter = function() {
      $scope.gridApi.grid.refresh();
    };

    $scope.singleFilter = function(renderableRows) {
      var filterVal = undefined;
      if ($scope.filterValue != undefined) {
        // Escape RegEx
        filterVal = $scope.filterValue.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
      }
      var matcher = new RegExp(filterVal);
      renderableRows.forEach(function(row) {
        var match = false;
        ['name', 'company', 'email'].forEach(function(field) {
          if (row.entity[field].match(matcher)) {
            match = true;
          }
        });
        if (!match) {
          row.visible = false;
        }
      });
      return renderableRows;
    };
  }])
  .filter('mapGender', function() {
    var genderHash = {
      1: 'male',
      2: 'female'
    };

    return function(input) {
      if...