ng-grid is a datagrid written in AngularJS and jQuery by the AngularUI Team. It is a high-performance datagrid which uses virtualization for rendering rows and performs well with large data sets.
ng-grid is a datagrid written in angularjs and jquery by the AngularUI Team. It is a high-performant datagrid using virtualization for rendering rows and really shines when you have lots of rows.
The 3.0 branch of ng-grid will be renamed in angular-ui-grid and will depend on AngularJS only.
Similar libraries:
Basic Setup:
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="../ng-grid.css" />
<script type="text/javascript" src="../lib/angular.js"></script>
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="../ng-grid.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-app="MyGridApp" ng-controller="bodyController">
<div ng-grid="gridOptions">
</div>
</body>
</html>
main.js:
var app = angular.module('MyGridApp', ['ngGrid']);
app.controller('bodyController', ['$scope', function($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = { data : 'myData' };// $scope.myData is also acceptable but will not update properly. OK to use the object if you don't care about updating the data in the grid.
}]);
