Skip to content
UI Grid: an Angular Data Grid
JavaScript HTML CSS Shell
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

ng-grid : An Angular DataGrid


ng-grid Team:

License: MIT

Dependencies: jQuery & angular.js. (JqueryUi draggable for non-HTML5 compliant browsers to use awesome Drag-N-Drop aggregate feature. However, you can still groupby without draggability)


ng-grid Originally built on knockout we wanted to port it to angular.

version 2.0.5


Questions, Comments, Complaints? feel free to email us at


We are going to be adding more features here as we head to a 3.0 release, including:

  • Anything else the rest of the community wants to contribute that isn't a terrible idea. :)

The bare bones:

<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid.js"></script>
    angular.module('myApp',['ngGrid', ... {other includes}]);
<link rel="stylesheet" type="text/css" href="../ng-grid.css" /> 
<body ng-app="myApp">
    <div ng-grid="myOptions"></div>
// Define your own controller somewhere..
function MyCtrl($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Teancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
    $scope.myOptions = { data: 'myData' };
    // you can also specify data as: $scope.myOptions = { data: $scope.myData }. 
    // However, updates to the underlying data will not be reflected in the grid

Want More?

Check out the Getting Started and other Docs




The testing setup is based on the angular-seed project.

Make sure to set your CHROME_BIN environment variable to the full path to chrome.exe (not just its directory).

Grunt tasks

There are a few grunt tasks for running tests:

# Run unit tests
> grunt karma:unit
# Or use this alias:
> grunt test

# Run end-to-end tests (make sure to first start a web server as specified below)
> grunt karma:e2e

# Run midway tests
> grunt karma:midway

End-to-end tests

The e2e tests need a webserver to run. A simple one from the angular-seed project is included:

> ./scripts/web-server.js

Automated testing and building

Running this task will automatically rebuild build/ng-grid.debug.js when source files change, and run unit tests when build/ng-grid.debug.js or unit test files change. Youc an use this for testing during development.

# Run this in its own window
> grunt testwatch

Integration testing

There is a task for CI testing with PhantomJS

  1. Make sure the PHANTOMJS_BIN environment variable is set properly
  2. PhantomJS with the singleRun option doesn't appear to function properly in Windows. The tests will run but PhantomJS will not automatically close.

    grunt karma:ci

Change Log

  • 2013-04-23 - Version 2.0.5 - Moving to $http for external template fetching. Should fix issues with grid rendering before templates are retrieved, as well as fetching the same template multiple times. Also fixed bug that prevented the grid from maintaining row selections post-sort thanks to sum4me.
  • 2013-04-08 - Version 2.0.4 - fixing some more minor bugs.
  • 2013-03-29 - Version 2.0.3 - changed default multiSelect behavior, updating some plugins and making some more minor bugfixes.
  • 2013-03-08 - Version 2.0.2 - minor bugfixes, updating some plugins.
  • 2013-03-05 - Version 2.0.1 - Moved to grunt build system. No more international version; all languages are included by default. Fixed minor grouping display issue. Using $templateCache for templates instead of global namespace.
  • 2013-03-05 - Version 2.0.0 - Breaking Changes: see documentation (showSelectionBox, enableRowSelection, showFooter). Column Virtualization added. Row virtualization performance improved. Excel-like editing instead of enableFocusedCellEdit.
  • 2013-02-18 - Version 1.9.0 - Aggregates now display correctly. Added more option methods to select and group data (see wiki), Added column pinning.
  • 2013-02-11 - Version 1.8.0.hotfix - Fixes for multi-level grouping and adding the gridId to both the grid options and as argument to the "ngGridEventData" so you can identify what grid it came from.
  • 2013-02-07 - Version 1.8.0 - Major architectural changes which greatly improves performance. virtualizationThreshold now controlls when virtualization is force-enabled and is user-specified in options.
  • 2013-02-06 - Version 1.7.1 - Fixed bug with selections and multiple grids. New emit message for notifying when hitting bottom of viewport. Can disable virtualization. ng-grid virtualization is on by default, but can be disabled if there are less than 50 rows in the grid. Anything > 50 rows virtualization is forced on for performance considerations.
  • 2013-02-05 - Version 1.7.0 - BREAKING CHANGES: Will add examples. Adding cell selection, navigation, and edit on focus. Added programmatic selections. Improved scrolling. ngGridEvents changed/added: see wiki.
  • 2013-01-17 - Version 1.6.3 - Can now highlight/copy text in grid. Fixed multiple issues when using multiselect along with shift key. Refactored key events so now they are all in the same directive for viewport. Hovering over highlightable text will change cursors in viewport. Fixed #93.
  • 2013-01-09 - Version 1.6.2 - Merged changes to have two-way data-binding work in templates, so if you're using a celltemplate, you can now use COL_FIELD instead of row.getProperty(col.field). row.getProperty is still in the row class for accessing other row values.
  • 2013-01-08 - Version 1.6.1 - Adding ability to preselect rows. Can deselect when multiSelect:false. Bug fixes/merging pull requests. Bower now works. Can now sync external search with ng-grid internal search. Check out other examples on examples page.
  • 2012-12-27 - Version 1.6.0 - Adding i18n support and support for different angularjs interpolation symbols (requires building from source).
  • 2012-12-20 - Version 1.5.0 - Modifying the way we watch for array changes. Added groupable column definition option. Bugfixes for #58, #59.
  • 2012-12-18 - Version 1.4.1 - jslint reformat, minor bugfixes, performance improvements while keydown navigating, adding "use strict" to script.
  • 2012-12-12 - Version 1.4.0 - Massive improvements to search thanks to iNeedFat!
  • 2012-12-12 - Version 1.3.9 - Refactored and removed unneeded code. Added scope events.
  • 2012-12-12 - Version 1.3.7 - Improving template compilation and fixing jquery theme support. Improving comments on grid options.
  • 2012-12-06 - Version 1.3.6 - sortInfo can now be set to default sort the grid. Improvements to the beforeSelectionChange callback mechanism when multi-selecting.
  • 2012-12-06 - Version 1.3.5 - Improved template rendering when using external template files. columnDefs can now be a $scope object which can be push/pop/spliced. Fixed box model for cells and header cells.
  • 2012-12-04 - Version 1.3.4 - Improved aggregate grouping, minor bugfixes. Auto-width works!
  • 2012-11-27 - Version 1.3.2 - Changed default width behavior to use *s and added option to maintain column ratios while resizing
  • 2012-11-27 - Version 1.3.1 - Added layout plugin. Support for uri templates. Performance improvements.
  • 2012-11-23 - Version 1.3.0 - Major code refactoring, can now group-by using column menu, changes to build
  • 2012-11-21 - Version 1.2.2 - Built-in filtering support, numerous perfomance enhancements and minor code refactoring
  • 2012-11-20 - Version 1.2.1 - Added ability to specify property "paths" as fields and for grid options.
  • 2012-11-19 - Version 1.2.0 - Added Server-Side Paging support and minor bug fixes.
  • 2012-11-17 - Version 1.1.0 - Added ability to hide/show columns and various bug fixes/performance enhancements.
  • 2012-11-14 - Version 1.0.0 Release
Something went wrong with that request. Please try again.