I want the table that I show on the client side to be more responsive. Like when I use "ng-table", when viewed on any other device than PC or laptop it seems to be responsive to a limited extent. So should I switch to "ng-grid"?
Difference for Better Choice
ng-grid
ng-table
Both are good, but implemented differently. Either you pick will probably be more based on personal preference than anything else.
ng-grid is based on SlickGrid which is a pretty high performant data grid, ng-grid is purely Angular. It is highly customiz-able and gets the job done.
ng-table because it is a simpler version of ng-grid and uses tables. It is a very nice little library that allows you to get up and running quickly. It is exactly what you need when you have to render a simple table with Angular.
Happy Helping!
Related
I want to apply angular-material in my recent project, but I am afraid that it will be very difficult to find other components which are not available currently. Like treeview, date/time picker, carousel and so on...
How can I deal with these things? any opinions?
I've just tried to use Angular-Material in a site with an existing style, and found a number of issues that I wasn't able to resolve:
- Site UI was feeling very sluggish
- There was a paralax script that became extremely slow and lagged when there was a quick scroll.
- Odd behavior with fonts when it loaded (when I re-sized the screen and back again it was working again) in chrome.
This became a real issue - for the most part it doesn't feel complete. I was really hoping for something like Material-UI, which appears to rely on React.
However, I have come across this https://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html which appears to be suitable and works with bootstrap.
There's a really good answer : Using Bootstrap for Angular and Material design for Angular together for some of the issues you will face when using Material with bootstrap.
Also, I tested on a mobile phone and the site was terrible (in performance), you'd never want to get site up with that type of performance.
Also, there's lumx if you want angularjs support (e.g directives etc...). My other issue with lumx and angularjs material is that swapping over libraries is not an easy task. I'm not sure whether this is the norm, and heading this way in the future - but I'm from the Jquery days where my markup remained consistent and I can activate features. However, both lumx and angularjs material require specific tags which means that swapping over libraries requires me to edit my mark-up.
Maybe here is another view of using Angular Material.
I have been using Angular Material as the only web component for my work projects. Angular Material is still in beta version, and like you said, many components such as table, color picker, and sidenav are still missing. If you have to use those components in your projects and not able to implement yours, Angular Material may not be a right choice. Something like Angular-UI or Polymer is probably what you are looking for.
The reason we choose Angular Material at work rather than other nearly complete web component library/collection is because it is being very actively maintained. Currently there are 900+ open issues and lots of pull requests are still going on. For me, a complete version will be more guaranteed. Treeview, date/time/color picker, table these kinds of components are already in the open issues. Here you can search for it.
https://github.com/angular/material/issues
Currently we will find workaround or overwrite the material to solve problems. Or we will open issues if there is no solution. And again, it is still in beta version, you should decide whether you want to use it in your project. But you can definitely look at their available components to determine if Angular Material is a right choice for you.
https://material.angularjs.org/latest/#/
I have a web app that is built aimed primarily at iPads on full screen mode. I've got to implement a select-able grid/matrix that has two levels of selections - one main item selection and one sub item selection. It looks something like this from our design:
First picture has main item selection, and
The application is built on AngularJS, and Bootstrap3. Right now we have implemented a working version of the grid using a custom jQuery plugin we authored and now are wondering why we ever did it. The code is buggy and constantly throws up new bugs. We are looking for an alternative form of implementation, hopefully a pure AngularJS one.
The criteria we're looking for are:
1. Responsiveness across devices - iPad/desktop
2. Stable DOM structure compatible with filtering (search bar at the top needs to work - not shown in figures).
3. Quick rendering from dynamically changing AJAX data.
4. Touch friendly
What are the best methods/ng-modules to implement something like this? We are on the verge of deciding to write a custom module, but don't wanna reinvent the wheel!
We did see ng-grid, but it still seems to be in Beta. We need a stable module.
SmartTable seems to be the most decent option as of now.
TIA!
Have you Tried Angular Material Gridlist I think it must something more clean. I frequently use it rather than bootstrap. Hope it helps
Take a look at Angular Grid. I know it works on iPad, the scrolling uses touch gestures. It performs very well in comparison to other AngularJS grids. I've used it with large grids on iPads and Androids.
Go for Ionic Framework in conjuction with angular-material.
Both have you covered in terms of UI elements and grid needs, and are very reliable. Both are very active frameworks.
They both reached v1 very recently.
You should seriously consider the time you're going to gain, even if at first you have to drop Bootstrap. I was anxious as well to drop ui-bootstrap, but really, you won't regret it (and you'll be wondering why you didn't do it before).
Docs are impeccable, Codepens and Plunkrs are all over the place, Blog posts abound...
Learning curve is... well... judge for yourself.
I found ngHandsontable very satisfying.
http://handsontable.com/
However, it does not support inserting columns which Handsontable supports. So I'm wondering if there is any other solution that is similar to ngHandsontable but also supports dynamic columns.
Thanks in advance.
Angular UI Grid is the latest and greatest from the AngularUI team.
It is not as "Excel like" as Handsontable, but it does support Adding and Removing Columns.
Kendo UI have a really decent spreadsheet widget that you can use with AngularJS. It's in Beta as I write but after using it for the first time myself I'd say it was well worth a look at if you need a full featured in browser spreadsheet.
If you can opt for a commercial solution you can have a look at FlexSheet by Wijmo:
https://demos.wijmo.com/5/Angular2/FlexSheetExplorer/FlexSheetExplorer/#/intro
It's available for AngularJS and Angular 2, it supports even formulas and a lot of features for building a good excel sheet.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I am creating an App with AngularJS and Bootstrap 3. I want to show a table/grid with thousands of rows. What is the best available control for AngularJS & Bootstrap with features like Sorting, Searching, Pagination etc.
After trying out ngGrid, ngTable, trNgGrid and Smart Table, I have come to the conclusion that Smart Table is by far the best implementation AngularJS-wise and Bootstrap-wise. It is built exactly the same way as you would build your own, naive table using standard angular. On top of that, they have added a few directives that help you do sorting, filtering etc. Their approach also makes it quite simple to extend yourself. The fact that they use the regular html tags for tables and the standard ng-repeat for the rows and standard bootstrap for formatting makes this my clear winner.
Their JS code depends on angular and your html can depend on bootstrap if you want to. The JS code is 4 kb in total and you can even easily pick stuff out of there if you want to reach an even smaller footprint.
Where the other grids will give you claustrophobia in different areas, Smart Table just feels open and to the point.
If you rely heavily on inline editing and other advanced features, you might get up and running quicker with ngTable for instance. However, you are free to add such features quite easily in Smart Table.
Don't miss Smart Table!!!
I have no relation to Smart Table, except from using it myself.
I had the same requirement and solved it using these components:
AngularJS 1.0.8
AngularUI Boostrap 0.10.0: Compatible with AngularJS 1.0.8 and Boostrap CSS 3.x.
ng-grid 2.0.7: Compatible with AngularJS 1.0.8
Bootstrap CSS 3.0
The table component ng-grid is capable of displaying hundreds of rows in a scrollable grid.
If you have to deal with thousands of entries you are better off using ng-grid's paginator.
The documentation of ng-grid is excellent and contains many examples.
Sorting and searching are supported even in combination with pagination.
Here is a screenshot from a current project to give you an impression how it looks like:
[UPDATE July 2017]
After having ng-grid in production for a couple of years, I can still tell that there are no major issues with this component. Yes, plenty of minor bugs, but no show stoppers (at least in my use cases). Having said that, I would strongly advice against using this component if you start a project from the scratch. This component is a good option only if you are bound to AngularJS 1.0.x. If you are free to choose the Angular version, go for a newer component. A list of table components for Angular 4 was compiled by Sam Deering in this blog.
With "thousands of rows" your best bet would obviously be to do server side paging. When I looked into the different AngularJs table/grid options a while back there were three clear favourites:
ng-grid
ng-table
Smart-Table
All three are good, but implemented differently. Which one you pick will probably be more based on personal preference than anything else.
ng-grid is probably the most known due to its association with angular-ui, but I personally prefer ng-table, I really like their implementation and how you use it, and they have great documentation and examples available and actively being improved.
A feature rich Angular grid is this one:
trNgGrid
Some of its features:
Was built with simplicity in mind.
Is using plain HTML tables, allowing the browsers to optimize the rendering.
Fully declarative, preserving the separation of concerns, thus allowing you to fully describe it in HTML, without messing up your controllers.
Is fully customizable via templates and two-way data bound attributes.
Easy to maintain, having the code written in TypeScript.
Has a very short list of dependencies: AngularJs and Bootstrap CSS, with optional Bootswatch themes.
Enjoy. Yes, I'm the author. I got fed up with all the Angular grids out there.
For anyone reading this post: Do yourself a favor and stay away of ng-grid. Is full of bugs (really..almost every part of the lib is broken somehow), the devs has abandoned the support of 2.0.x branch in order to work in 3.0 which is very far of being ready. Fixing the problems by yourself is not an easy task, ng-grid code is not small and is not simple, unless you have a lot of time and a deep knowledge of angular and js in general, its going to be a hard task.
Bottom Line: is full of bugs, and the last stable version has been abandoned.
The github is full of PRs, but they are being ignored. And if you report a bug in the 2.x branch, it's get closed.
I know is an open source proyect and the complains may sound a little bit out of place, but from the perspective of a developer looking for a library, that's my opinion. I spent many hours working with ng-grid in a large proyect and the headcaches are never ending
TrNgGrid is working great so far. Here are the reasons I prefer it to ng-grid and moved to this component
It makes table elements so it can be bootswatched and use all the power of bootstrap .css (ng-grid uses jQuery UI themes).
Simple, well documented grid options.
Server size paging works
At the end of the this answer to the question of how to think in Angular if you have a jQuery background, the top post from Josh David Miller summarizes:
Don't even use jQuery. Don't even include it. It will hold you back.
And when you come to a problem that you think you know how to solve in
jQuery already, before you reach for the $, try to think about how to
do it within the confines the AngularJS. If you don't know, ask! 19
times out of 20, the best way to do it doesn't need jQuery and to try
to solve it with jQuery results in more work for you.
Now if you want a grid with tons of features and options for customization,
jQuery DataTables is one of the best. The Angular-only grids I have seen
don't come close to what jQuery DataTables can do.
However, jQuery DataTables does not integrate well with AngularJS.
(There have been various efforts, but none offer seamless integration.)
Perhaps that leaves a person with two options.
The first is to go with a pure Angular grid that is not as feature rich as DataTables. I agree with #Moonstom about getting fed up with the other Angular grids out
there, and trNgGrid does look nice.
The second option is to say: this is one of those rare 1 out of 20 cases
where you should use jQuery and go with the jQuery DataTables plug-in,
because the efforts to re-invent the wheel with the pure Angular grids have
yielded a less robust wheel than DataTables.
It would be nice if it were otherwise, but I just have not seen
the Angular ecosystem come up with as strong a grid as jQuery DataTables,
and it is not as if a good data grid is a nice-to-have in a web app:
a good grid is an essential.
You can use bootstrap 3 classes and build a table using the ng-repeat directive
Example:
angular.module('App', []);
function ctrl($scope) {
$scope.items = [
['A', 'B', 'C'],
['item1', 'item2', 'item3'],
['item4', 'item5', 'item6']
];
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App">
<div ng-controller="ctrl">
<table class="table table-bordered">
<thead>
<tr>
<th ng-repeat="itemA in items[0]">{{itemA}}</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="itemB in items[1]">{{itemB}}</td>
</tr>
<tr>
<td ng-repeat="itemC in items[2]">{{itemC}}</td>
</tr>
</tbody>
</table>
</div>
</div>
live example:
http://jsfiddle.net/choroshin/5YDJW/5/
Update:
or you can always try the popular ng-grid , ng-grid is good for sorting, searching, grouping etc, but I haven't tested it yet on a large scale data.
Adapt-Strap. Here is the fiddle.
It is extremely lightweight and has dynamic row heights.
<ad-table-lite table-name="carsForSale"
column-definition="carsTableColumnDefinition"
local-data-source="models.carsForSale"
page-sizes="[7, 20]">
</ad-table-lite>
As mentioned in other answers: For a table with search, select and pagination "ng-grid" is the best options. A couple of things I have come across I will mention which might be useful while implementing:
To set env:
http://www.json-generator.com/ to generate JSON data. Its a pretty cool tool to get your sample data set to make development faster.
You can check this plunker for your implementation. I have modified to include: search, select and pagination
http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview
You can check this tutorial about Smart table, Gives all the info you need:
http://lorenzofox3.github.io/smart-table-website/
Then the next question is bootstrap 3 :
Its not exactly but this templates looks good.
- You can just use https://github.com/angular-ui/bootstrap/tree/master/template all the templates are well written.
I can go on about how to convert bootstrap 3 to angularjs but its already mentioned in following links:
Bootstrap 3 compatible with current AngularJS bootstrap directives?
https://github.com/angular-ui/bootstrap/issues/331
please note that regarding smart-table you have to check if it ready for your angular version
Kendo grid is good as well as Wijmo. I know Kendo comes with Angular bindings for their datasource and I think Wijmo has an Angular plugin. Neither are free though.
I'm really enjoying learning to use AngularJS. Now I'm looking for components I can use with it. I've been looking at Angular-UI components but I'd like to know if it's possible to use the nice, supercharged components in ExtJS. Does anyone have experience with this? Any hints or tips or Angular directive libraries?
The company I work for is making a similar move. We currently rely heavily on an older version (3.x) of ExtJS, and the effort to upgrade to the current (5.0) version is at least equal to the effort required to move to angular.
To answer the question (to the best of my limited knowledge):
They can exist together in the same JS application.
Can you use UI elements of ExtJs with Angular?
You can put angular in control of markup via HTML templates in Ext.
Is this a wise idea?
Probably not.
Why would I consider doing this?
I need absolute control over the markup and don't care about possible page load issues
I need to serialize or de-serialize in some special way that Ext doesn't innately provide
I need to do something special like pub/sub (still totally possible with Ext)
In our case, it is a proof of concept for a few modals. If I am biased, I am biased in the direction of ExtJs (which is a huge statement given my background). The more exposure I have to ExtJS, the more I personally like it. I've used several frameworks in the past like Ember, Backbone, KnockoutJs and AngularJs and they are excellent tools that are reaching a level of maturity that makes them excellent choices. That said, they don't follow the same development model/pattern that ExtJs does, and I don't think a direct compare is fair to either side.
It would be almost like comparing Ext to Node (silly, I know).
If your project requires some special functionality that you don't believe is possible in Ext, you are probably like me and have limited experience with it. If you have a lot of experience with Ext, and want to try what we are trying, I say go for it. The single downfall of Ext is the size of the built package that is delivered. Another small framework isn't going to help that, but it also isn't going to cause more pain.
In the end, for me, I just love JS and expanding my knowledge of how things work now and in the future.
For the post above asking about the lack of traction for Ext: the answer is simple... it's not free, and thus not an option for many of us who aren't writing commercial software that fits well with the license.
In our AngularJS app at work, we have integrated a 3rd party ExtJS app with it, not for its UI components though. We open certain popups of that app based on user input and when the user commits data in the popup, we respond to ExtJs events to refresh our app. AngularJS is flexible enough to integrate with any other Javascript code/libraries as long as the library has public events to respond to. I would recommend going through the Directive and scope documentation on how to effectively create directives and respond to scope events.
Personally I do not feel ExtJS and AngularJS would be needed together, unless you are forced to use it like me. There is http://angular-ui.github.io/ that brings in a lot to the table. Again any given JQuery plugin can be integrated using directives, filters etc in AngularJS. So you may want to investigate into that before trying to bother with ExtJS.
Why do you need AngularJS anyway if you have ExtJS? I agree learning Ext can be somewhat difficult though once you've bitten through it there is nothing better at the moment. The only disadvantage is the heavier footprint but who cares? It's not like it's causing any problems... We use nothing but ExtJS at work and the progress in our apps is amazing. It integrates seamlessly with Spring MVC. We don't need to hack in HTML directly which I consider more of an advantage than a disadvantage: no more writing tags, no more open/close tag issues, you can still use css and Ext handles any browser incompatibilities so what else do you need more?? Angular is just the new kid on the block but in total it can not (yet) compete with ExtJS. It doesn't even com close. Just my 2$.
Sencha is planning to add support in the framework. Please find the link at the bottom for reference:
At SenchaCon in Las Vegas on November 7-9 2016, Sencha will be introducing the ability to use Ext JS components, layouts, and themes within an Angular 2 application, which we are currently calling the Ext JS Bridge to Angular 2 (also known as ‘The Bridge’).
https://www.sencha.com/blog/first-look-ext-js-bridge-to-angular-2/