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">
    <div id="grid1" ui-grid="gridOptions" class="grid"></div>
  </div>
</div>

CSS

.grid {
  width: 500px;
  height: 250px;
}

JavaScript

var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope',
  function($scope) {
    $scope.gridOptions = {};

    $scope.gridOptions.columnDefs = [{
      name: 'firstName',
      field: 'firstName'
    }, {
      name: 'lastName',
      field: 'firstName',
      cellTemplate: '<div class="ui-grid-cell-contents">{{row.entity.lastName}}</div>'
    }];

    $scope.gridOptions.data = [{
      "firstName": "David",
      "lastName": "Carney",
    }, {
      "firstName": "Bob",
      "lastName": "Wise",
    }, {
      "firstName": "Peter",
      "lastName": "Thompson",
    }];
  }
]);