owl-table

AngularJS table directive built with ReactJS for high performance

Angular Core Dependency: ~1.3

Module License: MIT

Added by: Sam Deering

GitHub

Repository

onijim/owl-table

Stats

Stars: 3

Watchers: 3

Forks: 1

Author

James Asher
James Asher

Module Description

owl-table

Build Status Sauce Test Status Code Climate Test Coverage

David Dependencies David Dev Dependencies

AngularJS table directive built with ReactJS for high performance

Demo: http://onijim.github.io/owl-table

Installation

  • bower install owl-table --save
<link rel="stylesheet" href="bower_components/owl-table/dist/owl-table.min.css">

<style src="bower_components/owl-table/dist/vendor.min.js"></style>
<style src="bower_components/owl-table/dist/owl-table.min.js"></style>

Use

<owl-table id="myTable" data="myCtrl.data" columns="myCtrl.columns" options="myCtrl.options"> </owl-table>

Please see index.html in the repository for an in-depth demo of usage.

Why?

I ran into performance issues with stock AngularJS doing ng-repeat on 1000+ data items. While researching optimizations, I found that some people were using React to provide the views for their apps and directives.

Dependencies

  1. angular 1.3.x+
  2. angular-animate
  3. angular-sanitize
  4. angular-ladda
  5. spin.js
  6. ladda.js
  7. angular-ui-utils
  8. ng-csv
  9. react js with addons
  10. lodash
  11. jquery 1.7+
  12. shims for older IE

gulp build will create vendor.min.js in the dist folder if bower install has been run. Or use your framework's asset pipeline.

To do

  • Printing
  • Change page though input field
  • Settings panel for storing local display settings

Dev installation

  1. git clone the repo
  2. npm install --require-dev
  3. bower install --require-dev
  4. gulp build to build sass, interpret JSX, compile CoffeeScript, etc
  5. gulp watch will rebuild most everything on change
  6. gulp help for task list and info

Tests

gulp nightwatch to run e2e tests karma start to run unit tests

Nightwatch is based on Jasmine and is reminiscent of codeception in its ease of use and readability. angular-mocks is included in the bower dev requirements.

Project uses CoffeeScript for tests because of its Ruby-like syntax which just goes well with testing. JSX is available in all CoffeeScript due to a drop-in replacement for coffee()

After running tests, code coverage information is available in tests/coverage (gitignored)

Project uses Travis CI and Sauce Labs for cloud continuous integration and testing.

Module stats last updated: 2015-06-07 05:42:51

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!