Untitled

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@~1.4.7" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>
    <link data-require="bootstrap@~3.3.5" data-semver="3.3.6" rel="stylesheet" href="bootstrap" />
    <link data-require="ui-grid@*" data-semver="3.0.7" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.css" />
    <script data-require="ui-grid@*" data-semver="3.0.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.js"></script>
    <script data-require="bootstrap@~3.3.5" data-semver="3.3.6" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div ng-controller="MainCtrl">
      <div ui-grid="gridOptions" ui-grid-cellNav></div>
    </div>
    <script src="script.js"></script>
  </body>

</html>

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

app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.gridOptions = {};
    
    $scope.gridOptions.columnDefs = [
        { name:'code', allowCellFocus: true },
        { name:'name', allowCellFocus: true }
    ];

    $scope.gridOptions.data = [{
      "code": "Cox",
      "name": "Carney"
    }, {
      "code": "Lorraine",
      "name": "Wise"
    }, {
      "code": "Nancy",
      "name": "Waters"
    }];
}]);

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