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

  <head lang="en">
    <meta charset="utf-8" />
    <title>Custom Plunker</title>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
    <script src="//ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="//ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="//ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="//ui-grid.info/release/ui-grid-unstable.css" type="text/css" />
    <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery-ui.css.old" />
    <link rel="stylesheet" type="text/css" href="jquery-ui-theme.css.old" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript" src="jquery-ui.js.old"></script>
  </head>

  <body ng-controller="MyCtrl">
    <div class="table-responsive">
      <div class="gridStyle" ui-grid="gridOptions" ui-grid-pinning="" external-scopes="viewModel"></div>
    </div>
  </body>

</html>

// main.js
var app = angular.module('myApp', ['ui.grid', 'ui.grid.pinning']);

app.controller('MyCtrl', ['$scope','$timeout',function($scope,$timeout) {
  

    $scope.aColumnDefs = [];
    $scope.aColumnDefs.push( { field: 'title', displayName: '', width: '20%', pinnedLeft: true } );
    for (var i = 1; 30 > i; i++){
      $scope.aColumnDefs.push({field: 'col' + i, displayName: i, pinnable:false, width: '6%'  })
    }

  $scope.myData = [];
  $scope.myData.push( {title: 'Coast Beach Villas'} );
  for ( i = 1; 30 > i; i++){
    var oData = { };
    
    for( var x = 0; $scope.aColumnDefs.length > x; x++){
      var oDate = new Date();
      oData[ $scope.aColumnDefs[x].field   ] = x;
    }
    oData.title = 'Winter Rate';
    $scope.myData.push( oData );
  }
               
                   
  $scope.gridOptions = {
    data: $scope.myData,
    enableColumnMenus: false,
    enableSorting: false,
    enableFiltering: false,
    //jqueryUITheme: true,

    columnDefs: $scope.aColumnDefs,
    //filterOptions: $scope.filterOptions,
  };
    


    
    



  

    
  
  //$scope.viewModel.filterVisible();

     
}]);
/*style.css*/
.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 100%; 
    height: 400px;
}