<!doctype html>
<html ng-app="ngGridApp">
<head>
<title>Example - www.code-sample.com</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<style>
.ngGridStyle {
border: 2px solid green;
width: 500px;
height: 220px;
}
</style>
<script>
var app = angular.module('ngGridApp', ['ngGrid']);
app.controller('ngGridController', function ($scope) {
$scope.empDetail = [{
Name: "Anil",
Age: 50,
Adress: ' Kushinagar, UP, India'
}, {
Name: "Sunil",
Age: 43,
Adress: ' Kushinagar, UP, India'
}, {
Name: "Sushil",
Age: 27,
Adress: ' Kushinagar, UP, India'
}, {
Name: "Reena",
Age: 29,
Adress: ' Kushinagar, UP, India'
}, {
Name: "Aisha",
Age: 34,
Adress: ' Kushinagar, UP, India'
}];
$scope.ngGridView = {
data: 'empDetail',
showGroupPanel: true,
jqueryUIDraggable: true
};
});
</script>
</head>
<body ng-controller="ngGridController">
<div class="ngGridStyle" ng-grid="ngGridView"></div>
</body>
</html>
// Code goes here
/* Styles go here */