Code Monkey home page Code Monkey logo

ng-grid's Introduction

ng-grid : An Angular DataGrid

Build Status

Note: We are no longer accepting feature based pull requests based on the 2.* branch. All active feature development is happening in the 3.0 branch. PRs there are encouraged and will be celebrated with virtual high fives all around.

Contributors:

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)


About

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

version 2.0.7

nuGet

Questions, Comments, Complaints? feel free to email us at [email protected]


Roadmap

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>
<script>
    angular.module('myApp',['ngGrid', ... {other includes}]);
</script>
<link rel="stylesheet" type="text/css" href="../ng-grid.css" /> 
<body ng-app="myApp">
    <div ng-grid="myOptions"></div>
</body>
// 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

Examples

Examples

Testing

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.

  3. This task first builds the debug version of the source files and does not clean them up. If you run it you will have uncommitted changes in your working directory that you probably want to lose. git checkout build to lose them.

    grunt test-ci

Selecting browsers

All the test tasks accept a --browsers command line option that will be passed to karma.

# Automatically re-run tests in both Chrome and FF.
grunt testwatch --browsers=Chrome,Firefox

ng-grid's People

Contributors

orneryd avatar jonricaurte avatar c0bra avatar roblarsen avatar maxcan avatar bolasblack avatar swalters avatar bmleite avatar jimmytheneutrino avatar a5sk4s avatar dpangier avatar proloser avatar r7lemieux avatar codebreach avatar yurks avatar andrewalker avatar ajoslin avatar sonicparke avatar caphun avatar clkao avatar ebraminio avatar ericengineered avatar felixhummel avatar donderda avatar cwhopkins avatar nuclearghost avatar mschroering avatar neeckeloo avatar psgibbs avatar rubenv avatar

Watchers

Yi Wang avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.