Skip to content

Getting started

Jump to bottom Edit New page
Jonathan Leitschuh edited this page Sep 29, 2015 · 15 revisions

ui-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 (Optionally)

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 ui-grid="gridOptions">
    </div>
</body>
</html>

main.js:

var app = angular.module('MyGridApp', ['ui.grid']);

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.
}]);

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

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