berndwessels / angular-ui-table

A faster and better AngularJS data grid.

uiTable

A faster and better AngularJS data grid.

---

Examples

See uiTable in action here http://berndwessels.github.io/angular-ui-table.

Usage

1. Install It

uiTable is available through Bower, so this is by far the easiest way to obtain it. Just run:

$ bower install --save-dev ui-table

This will download the latest version of uiTable and install it into your Bower directory (defaults to components). Boom!

2. Incorporate It

Now you have to add the script file to your application. You can, of course, just add a script tag. If you're using ngBoilerplate or any of its derivatives, simply add it to the vendor.js array of your Gruntfile.js:

vendor: {
  js: [
    // ...
    'vendor/ui-table/ui-table.min.js',
    // ...
  ]
},

However you get it there, as soon as it's in your build path, you need to tell your app module to depend on it:

angular.module( 'myApp', [ 'uiTable', /* other deps */ ] );

Also be sure to include the stylesheet. In ngBoilerplate, simply import ui-table.less into your main.less file.

Now you're ready to go! Sweet.

3. Use It

Motivation

Almost every enterprise application needs a data grid. Unfortunately AngularJS is very slow and so far the only available grid I knew of was ngGrid. It looks good at first sight, but it has horrible performance. In the corporate world there are still many clients out there running on slow machines and old browsers on which ngGrid is just too slow.

The ui-table component is designed to address the performance issues of AngularJS but still offering all the features you can expect from a data grid. It offers modes for slower hardware and is strictly designed to please the user.

Contributing

Contributions are encouraged! There is a lot to be done.

Missing and new features have to be added. Bugs have to be fixed (if there are any;). And there is always a way to sqeeze more performance out of it.

Shameless Self-Promotion

Like uiTable? Star this repository to let me know! If this got you particulary tickled, you can even follow me on GitHub, Twitter, Google+, or LinkedIn.

Enjoy.

angular-ui-table's Issues

dynamic change of table data

If I have data like this:

$scope.tableData = [
                {firstName:"Walter", lastName:"Wurst", age:20},
                {firstName:"Peter", lastName:"Pan", age:21},
                {firstName:"Erwin", lastName:"Erster", age:22},
                {firstName:"Paula", lastName:"Pummel", age:23}
            ];

$scope.tableOptions = {
            data: $scope.tableData
(...)
});

and later want to change data using

$scope.tableData = [
                {firstName:"John", lastName:"Wurst", age:30},
                {firstName:"Anna", lastName:"Pan", age:35}
            ];

the table is not refreshing. Is there a simple way to dynamic change data in table?

Need one example of the following...

Could you please kindly consider adding one more example html file with the following features...Please kindly attach to the project examples folder as it would be helpful for many as well..

1.Read only grid as above without edit, delete and save option.
2. The grid with many export options - pdf, csv, excel, word etc.,
3. When the pagination is enabled - goto page option to navigate to particular page
4. Copy to clipboard and print option
5. Support quickest rendering for alteast 5,000 rows with page size as 10, 100, 500, 1000, 5000
6. Search all columns or individual columns
7. Export selected or all columns

Example grid
http://institut-de-genomique.github.io/Ultimate-DataTable/
https://w3lessons.info/2015/07/13/export-html-table-to-excel-csv-json-pdf-png-using-jquery/

Reference

1. http://2.bp.blogspot.com/-yTiytux2848/Vcj-b5FjyUI/AAAAAAAAdQk/8rzPAsyU4Dw/s1600/jQuery%2Bdatatables%2Bexport%2Bto%2Bpdf.png
   2 . https://www.phpflow.com/wp-content/uploads/2015/09/export-table-data-toexcel-png-pdf.png
   https://i.stack.imgur.com/XeCzz.png

Issue on http://berndwessels.github.io/angular-ui-table

Most interaction on the site seems not possible due to (e.g., using tabs) - the console shows:

FB.getLoginStatus() called before calling FB.init().
Unsafe JavaScript attempt to access frame with URL http://berndwessels.github.io/angular-ui-table/ from frame with URL http://www.facebook.com/plugins/like.php?api_key=&locale=en_US&sdk=joey&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D25%23cb%3Df346cd3ea8%26origin%3Dhttp%253A%252F%252Fberndwessels.github.io%252Ff2dd72351c%26domain%3Dberndwessels.github.io%26relation%3Dparent.parent&href=http%3A%2F%2Fbit.ly%2FuiTable&node_type=link&width=150&layout=button_count&colorscheme=light&show_faces=false&send=true&extended_social_context=false. Domains, protocols and ports must match.

Would love to explore it a bit more.

Still active?

@rajesh-soni Is anyone working on this project any more?