Skip to content
This repository has been archived by the owner on Sep 8, 2020. It is now read-only.

Getting started

Jump to bottom
Marcelo Sauerbrunn Portugal edited this page Jun 11, 2018 · 1 revision

ng-grid is a datagrid similar to koGrid or slickGrid. It is a high-performant datagrid using virtualization for rendering rows and really shines when you have lots of rows. Dependencies:

  • angular.js
  • jQuery

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-1.8.2.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.
}]);
Clone this wiki locally