<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Angularjs UI-Grid Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
var app = angular.module("uigridApp", ["ui.grid"]);
app.controller("uigridCtrl", function ($scope) {
$scope.gridData = [ {
name : "Moroni",
age : 50,
department : 'HR'
}, {
name : "Tiancum",
age : 43,
department : 'GM'
}, {
name : "Jacob",
age : 27
}, {
name : "Nephi",
age : 29
}, {
name : "Enos",
age : 34
} ];
$scope.columnDefs = [ {
name : 'First Name',
field : 'name',
}, {
name : 'Age',
field : 'age',
width : "30%"
}, {
name : 'Department',
field : 'department',
width : "30%",
} ];
$scope.grid = {
data : $scope.gridData,
columnDefs : $scope.columnDefs,
enableColumnMenus : false,
enableColumnMoving : true,
enableFiltering : true,
}
});
</script>
<style type="text/css">
.myGrid {
width: 500px;
height: 200px;
}
</style>
</head>
<body ng-app="uigridApp">
<h2>AngularJS UI Grid Example</h2>
<div ng-controller="uigridCtrl">
<div ui-grid="{ data: gridData }" class="myGrid"></div>
</div>
</body>
</html>