Here I am showing implementation of Grid with
Angular JS. How you can create a grid with much more functionality like search,
remove columns and sorting.
Below
is my Grid.Html
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid
Example</title>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script type="text/javascript" src="ng-grid-1.3.2.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
main.js:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [{ Name: "Shalini", age: 26, Experience: 8 },
{ Name: "Deepak", age: 28, Experience: 3 },
{ Name: "Reshabh", age: 27, Experience: 4 },
{ Name: "Rahul", age: 15, Experience: 5 },
{ Name: "Ankita", age: 34, Experience: 6 },
{ Name: "Ankur", age: 34, Experience: 9 },
{ Name: "Tushar", age: 34, Experience: 2 },
{ Name: "Mansi", age: 34, Experience: 1 },
{ Name: "Aaryan", age: 34, Experience: 7 }];
$scope.gridOptions = { data: 'myData' };
});
Style.Css
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px
}
Output:
Image 1.
Searching In Grid:-
Image 2.
Sorting in Grid:-
Image 3.
Remove Column From Grid:-
Image 4.