Skip to content

Instantly share code, notes, and snippets.

@josebalius
Created May 29, 2014 21:54
Show Gist options
  • Save josebalius/fb58718165a5a9f18031 to your computer and use it in GitHub Desktop.
Save josebalius/fb58718165a5a9f18031 to your computer and use it in GitHub Desktop.
ngReactGrid - Horizontal Scroll
<!DOCTYPE html>
<html ng-app="example">
<head>
<title>ngReactGrid Basic Example</title>
<link rel="stylesheet" type="text/css" href="css/ngReactGrid.css">
</head>
<body>
<div ng-controller="BasicExampleController" style="width: 100%">
<ng-react-grid grid="grid"></ng-react-grid>
</div>
<!-- Your JS Sources -->
<script src="js/angular.min.js" type="text/javascript" ></script>
<script src="js/react-0.10.0.js" type="text/javascript" ></script>
<script src="js/ngReactGrid.min.js" type="text/javascript" ></script>
<script type="text/javascript">
angular.module("example", ['ngReactGrid'])
.controller("BasicExampleController", function($scope) {
var employees = [];
for(var i = 0; i < 49; i++)
employees.push({
firstName: "John " + i,
lastName: "Doe " + i,
city: "New York " + i,
state: "New York " + i
});
$scope.grid = {
data: employees,
columnDefs: [
{
field: "firstName",
displayName: "First Name",
width: "50%"
},
{
field: "lastName",
displayName: "Last Name",
width: "25%"
},
{
field: "city",
displayName: "City",
width: "25%"
},
{
field: "state",
displayName: "State"
}],
horizontalScroll: true
};
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment