Skip to content

Getting started

Jump to bottom Edit New page
roelofb edited this page Feb 12, 2013 · 9 revisions

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-1.0.0.debug.js"></script>
    <script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="bodyController">
    <div ng-app="ngGrid"  ng-grid="gridOptions">
    </div>
</body>
</html>

main.js:

 function bodyController($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.
}

Check out the Configuration Options page for an explanation of options.

Add a custom footer
Add a custom sidebar
Clone this wiki locally