AngularJS ng-Grid

Difference between using a table and ng-Grid in AngularJS app is explained below.

General examples to Display array elements in a table , Pagination contain more lines of code. Below is a better approach for the same but with less code and more features.

Choosing ng-Grid to display the elements in an array, pagination etc. is a wise decision. The code is less compared to the above. Also many additional features can be applied such as editing the cell values, deleting the row, validations etc with a line of code for each.

How to use ng-Grid

• In the app.js include ngGrid dependency as belowangular.module(‘myApp’, [ ‘ngGrid’ ]);

• In the index.html make sure to include the references for JQuery, AngularJS, ngGrid.css, ngGrid-debug.js.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js”></script>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js”></script>
<link rel=”stylesheet” type=”text/css” href=”http://angular-ui.github.com/ng-grid/css/ng-grid.css” />
<script type=”text/javascript” src=”http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js”></script>

The only line code you need in your html is<div class=”gridStyle” ng-grid=”gridOptions”> </div>

• The .gridStyle in css is as follows

.gridStyle {

border: 1px solid rgb(212,212,212);

width: 400px;

height: 300px }

Include the features you want to include for the table as follows in the controller.js

$scope.gridOptions = { …. }

• Include the array name whose elements to be displayed as follows in the $scope.gridOptions = { …here… }. Here itemDetails is array name.

data: ‘itemsDetails’, 

• Add the following to create a table with contents

columnDefs: [{field: ‘itemCode’, 
  displayName: ‘CODE’, 
  resizable: true, 
  width: 70}, 
  {…}
];

The above line creates a column named CODE which displays itemCode values in the array itemDetails.

• Also many other features can be added to the table.

Other features that can be included to ngGrid table

• To select a cell – enableCellSelection: true,

• To edit the values in a cell – enableCellEdit: true,

• To enable pagination – enablePaging: true,

Here is a Simple ngGrid example to Display array elements

Resources 

AngularJS ng-Grid