UI Grid - Horizontal Scroll funktioniert nicht für große Datenmenge

Question

Ich habe eine sehr große Menge von Daten, die horizontale Scroll auf der Seite passen müssen. Unterstützt UI Grid horizontales Scrollen für Datenbreiten jenseits der Seite?

Plunker: http://plnkr.co/edit/WcdQyUNm4UNxjdyX6UDh?p=preview

css: 
.grid { 
    width: 200px; 
    height: 250px; 
} 

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

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

    $scope.myData = [ 
    { 
     "firstName": "Cox", 
     "lastName": "Carney", 
     "company": "Enormo", 
     "employed": true 
    }, 
    { 
     "firstName": "Lorraine", 
     "lastName": "Wise", 
     "company": "Comveyer", 
     "employed": false 
    }, 
    { 
     "firstName": "Nancy", 
     "lastName": "Waters", 
     "company": "Fuelton", 
     "employed": false 
    } 
]; 
}]); 

Answer 1

Hier ist die Arbeits Plunker

Html

<div ng-controller="MainCtrl"> 
    <div id="grid1" ui-grid="yourGridOptions" class="grid"></div> 
</div> 

JS

Inject uiGridConstants Service.

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

app.controller('MainCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) { 

    $scope.yourGridOptions = { 
    enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED, 
    enableVerticalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED, 
    columnDefs: [{ 
     name: 'firstName', 
    width:100 

    }, { 
     name: 'lastName', 
    width:100 

    }, { 
     name: 'company', 
     width:100 

    }, { 
     name: 'employed', 
    width:100 

    }], 
    data: [{ 
     "firstName": "Cox", 
     "lastName": "Carney", 
     "company": "Enormo", 
     "employed": true 
    }, { 
     "firstName": "Lorraine", 
     "lastName": "Wise", 
     "company": "Comveyer", 
     "employed": false 
    }, { 
     "firstName": "Nancy", 
     "lastName": "Waters", 
     "company": "Fuelton", 
     "employed": false 
    }] 
    }; 
}]);