UI Grid: an Angular Data Grid
JavaScript HTML CSS Shell
Latest commit 6dfed10 Aug 26, 2015 @ayatsai ayatsai committed with Southpaw17 fix row width being shorter than header
Failed to load latest commit information.
design Enh(doco): create design folder, put some thoughts in it May 19, 2015
grunt fix(#5691): Updating title link URL in documentation page Sep 25, 2016
lib fix: update bower.json and package.json to include files for current npm Jul 1, 2016
misc Merge pull request #5687 from louwie17/master Oct 19, 2016
src fix row width being shorter than header Oct 21, 2016
test Merge pull request #5611 from StrangelyTyped/plain-array-binding Sep 9, 2016
.editorconfig Fix trailing whitespace Apr 13, 2015
.gitattributes Placeholder for Angrid Oct 13, 2012
.gitignore Add missing publishable files for bower/npm Jul 23, 2015
.jscs.json Add more jscs checks and some jscs todos Oct 8, 2014
.jscs.json.todo Add more jscs checks and some jscs todos Oct 8, 2014
.travis.yml chore(travis): Automatic builds on the 3.x branch Feb 10, 2016
3.0_UPGRADE.md refactor(core) ui-grid $parent scope is now automatically assigned to… Jan 21, 2015
BS-Flatly-2.3.css Upgrade both site and docs to Bootstrap 3 (flatly) Oct 6, 2014
Brainstorm.md moved brainstorm to google docs; new planning30 doc for minutes Dec 16, 2013
CHANGELOG.md chore: Release v3.2.9 Sep 21, 2016
CONTRIBUTING.md Merge pull request #5084 from JLLeitschuh/build/commitHooks Feb 9, 2016
DEVELOPER.md update developer guidelines with information about plugins. Jan 14, 2016
FIRST_TIMER.md Fix misleading references to ng-grid and a typo Aug 19, 2015
Gruntfile.js Fix(grunt): fix untidiness introduced in last commit Apr 21, 2015
LICENSE.md chore(Build): Add license to css files Jan 29, 2015
README.md Add Open Collective to ReadMe Aug 12, 2016
TODO.md merge 3.0-pinned-containers Aug 4, 2014
bower.json chore: Release v3.2.9 Sep 21, 2016
package.json chore: Release v3.2.9 Sep 21, 2016
planning30.md moved brainstorm to google docs; new planning30 doc for minutes Dec 16, 2013
travis_build.sh Fix travis_build.sh syntax error Jun 16, 2015
travis_print_logs.sh Try to add extra logging to Travis jobs Dec 10, 2013


UI-Grid : An AngularJS data grid

Build Status Coverage Status Gitter Commitizen friendly npm npm OpenCollective OpenCollective

Selenium Test Status


Head to http://ui-grid.info for documentation and tutorials. Join https://gitter.im/angular-ui/ui-grid to discuss development and ask for specific help.

We're always looking for new contributors, for pro-level contribution guidelines look at Contributor.md, if you're more of a first-timer with open source (or just need a refresher), look at First Time Open Source Contributor.md, also look at Developer.md

Need Some Inspiration? Have a look at our open PRs Plz! issues.



    bower install angular-ui-grid
    <link rel="stylesheet" type="text/css" href="bower_components/angular-ui-grid/ui-grid.min.css">
    <script src="bower_components/angular-ui-grid/ui-grid.min.js">


    npm install angular-ui-grid
    <link rel="stylesheet" type="text/css" href="node_modules/angular-ui-grid/ui-grid.min.css">
    <script src="node_modules/angular-ui-grid/ui-grid.min.js">


You can use rawgit.com's cdn url to access the files in the Bower repository. These files are hosted by MaxCDN. Just alter the version as you need.

Angular Compatibility

UI-Grid is currently compatible with Angular versions ranging from 1.2.x to 1.4.x.

Feature Stability

UI-Grid comes bundled with several features. Not all of them are currently stable. See the list below for the stability of each:

Feature Release state
auto-resize-grid (API) beta
cellnav (API) stable
edit (API) stable
expandable (API) alpha
exporter (API) stable
grouping (API) beta
importer (API) stable
infinite-scroll (API) beta
move-columns (API) alpha
pagination (API) alpha
pinning (API) stable
resize-columns (API) stable
row-edit (API) stable
saveState (API) stable
selection (API) stable
tree-base (API) beta
tree-view (API) beta

For more details on the features check the Tutorials.


UI-Grid has an excellent plugin system. Most new features can be added as plugins. Please see some discussion of that in the Developer guidelines. There is a list of known plugins on the tutorial site. If you would like your plugin added to that list, please edit the tutorial page and send a pull request.


Install dependencies

git must be on your path.  If you can't do 'git' from your terminal, then install git first and make sure you have access from the path.
Bower installs are dependent on git.

If you are a git noob, the easiest way to install is by installing the github client.

# If you don't already have the grunt-cli installed:
> npm install -g grunt-cli

> npm install
> grunt install

Default grunt task will test and build files into dist/

> grunt


Development "watch" task. This will automatically rebuild from source on changes, reload Gruntfile.js if you change it, and rebuild the docs.

  1. A server on localhost:9002 serving whichever directory you checked out, with livereload. Navigate to http://localhost:9002/misc/demo to see the demo files.
  2. A server on localhost:9003 serving the ./docs directory. These are the docs built from source with a custom grunt-ngdocs that should work with Angular 1.2.x.

grunt dev

By default grunt dev will start several karma background watchers that will run the tests against multiple versions of angular. You may specify the version(s) you want to use with the --angular flag:

> grunt dev --angular=1.2.21

> grunt dev --angular=1.2.20,1.2.21

You can also use the --browsers specify what browsers to test with (PhantomJS is the default).

> grunt dev --browsers=Chrome

# Run a single test run against multiple browsers
> grunt karma:single --browsers=Chrome,Firefox,IE

By default the dev tasks runs e2e tests with protractor. If you have problems with them running slow or hanging, you can disable them with the --no-e2e flag:

> grunt dev --no-e2e

The grunt task is getting slower as the body of tests gets larger. If you're only working on the core functionality you can disable the unit tests on the features with the --core flag:

> grunt dev --core

As a shortcut for options that the developers frequently use, there is also a --fast flag, which equates to --core --no-e2e --angular=<latest>:

> grunt dev --fast


The karmangular task runs tests serially against multiple browsers (it is used internally by the dev task).

# Run tests against all available versions of Angular on Chrome
> grunt karmangular --browsers=Chrome

# Run tests with a couple versions of Angular against the default PhantomJS browser
> grunt karmangular --angular=1.2.20,1.2.21


ui-grid is set up to run against SauceLabs. You must have the SAUCE_ACCESS_KEY environment variable set.

# Execute tests for a couple versions of angular on IE8
> grunt karmangular --angular=1.2.20,1.2.21 --browsers=SL_IE_8

# Run the watch tasks against IE10
> grunt dev --browsers=SL_IE10

The full list of SauceLabs browsers can be seen by running grunt saucebrowsers. Usually it should suffice to let Travis do this testing automatically, unless you're trying to debug a browser-specific issue.

What Happened to 2.x?

As of the 3.0 release, 2.x is officially deprecated. There will be no further releases. If for some reason you need to find the 2.x source please see the 2.x branch.

The 2.x docs are here: http://angular-ui.github.io/ui-grid/.

Repository Rename

With the 3.0 release, the repository has been renamed from "ng-grid" to "ui-grid".

All network traffic to GitHub should redirect automatically but they say you should update your git remote url:

git remote set-url origin https://github.com/angular-ui/ui-grid.git


Thanks to Sauce Labs and BrowserStack for providing their testing platforms to open source projects for free.


Support us with a monthly donation and help us continue our activities. [Become a backer]


Become a sponsor and get your logo on our website and on our README on Github with a link to your site. [Become a sponsor]