Best open source mesh with smooth infinite scroll

Question

When I started working on my current project, I was given a rather difficult task - to create something that essentially involves replacing the large tables that people use inside my company.

That's why we thought a broken table would never work, and to be honest, I think pagination is stupid. Displaying dynamically changing data in a paginated table is lame. Say the item on page # 2, where the next data update may land on the page.

So, we needed to build a grid with a beautiful endless scroll. Do not get me wrong, I have tried many different solutions. Firstly, I created vanilla ng-repeat and tried to use ng-infin-scroll , and then ng-scroll from the user interface. Utils . This quickly drives me to the point that scrolling became painfully slow, and I didn't even use any crazy stuff like complex cell patterns, ng-if or filters. Soon, productivity became my biggest pain. When I started adding things like resizable columns and custom cell templates, the browser would no longer be able to handle all of these bindings.

Then I tried ng-grid , and at first I liked it - ease of use, it has some nice features that I need, but I soon realized that the ng-grid is terrible. The current version, filled with errors, all participants stopped correcting them and switched to work on the next version. And only God knows when it will be ready for use. The ng grid turned out to be much worse than even the vanilla ng-repeat.

I kept trying to find something better. trNgGrid looked nice, but too simplistic and does not offer the features that I was looking out of the box.

ng-table was n’t very different from ng-grid, maybe it would cause me the same performance issues.

And of course, I needed to find a way to optimize the bindings. Tried bind-once - was not satisfied, the grid still remained. (upd: angular 1.3 offers the {{::foo}} syntax for one-time binding)

Then I tried React. The initial experiment looked promising, but in order to build something more complex, I need to study the features of React, in addition to the fact that the thing feels non-angular and knows how to test directives built using angular +, to react. All my efforts to create good automated testing failed - I could not find a way to make React and PhanthomJS similar to each other (which is probably more problematic for Phantom, there is a better browser without a head) Also React does not solve "add to DOM" - when you insert new elements into the data array, in a few milliseconds the browser blocks the flow of the user interface. This, of course, is a completely different type of problem.

My colleague (who works on the server side), seeing my struggle, grumbled to me that I had already spent too much trying to solve performance problems. He made me try SlickGrid , telling me stories like this is the best grid widget. I honestly tried, and quickly wanted to burn my computer. This thing is completely dependent on jQuery and a bunch of jQueryUI plugins, and I refuse to suddenly switch to medieval web development times and lose all angular kindness. No thanks.

Then I came ux-angularjs-datagrid and I really liked it. It uses some kind of smart bad-ass algorithm to keep things very responsive. The project is young, but it looks very promising. I was able to create some basic grid with a lot of lines (I mean a huge number of lines) without deviating too much from the angular zen path and scrolling still smoothly. Unfortunately, this is not a complete solution to the grid widget - you will not have resizing columns and other things, the documentation is somewhat lacking, etc.

I also found this article and had mixed feelings about this, these guys applied a few unregistered hacks to angular, and most likely they would have broken with the angular version.

Of course, there are at least a couple of paid options, such as Wijmo and the Kendo user interface. They are compatible with angular, however the examples given are pretty simple paginated tables, and I'm not sure if they should even be tried. I could have the same performance issues. Also, you cannot selectively pay only the grid widget, you need to buy the whole set - full of crap, which I probably never use.

So finally, to my question - is there a good, guaranteed, less painful way to have a good mesh with infinite scroll? Can anyone point out some good examples, projects, or web pages? Is it safe to use ux-angularjs-datagrid or is it better to build your own thing with angular and react? Has anyone ever tried Kendo or Wijmo networks?

You are welcome! Do not vote to close this question, I know that there are many similar questions on stackoverflow, and I read almost all of them, but the question remains open.

Answer 1

Perhaps the problem is not with the existing widgets, but with the way you use it. You must understand that more than 2,000 angular digest loop bindings can take too long for the user interface to display smoothly. In the same idea, the more html nodes you have on your page, the more memory you will use, and you can achieve the browser’s ability to make so many nodes in a smooth way. This is one of the reasons why people use this lame pagination.

In the end, what you need to achieve in order to get something "smooth" is to limit the amount of data displayed on the page. To make it transparent, you can paginate it.

This plunker shows you the idea with smart-table . When scrolling down, the next page loads (when scrolling, you have to execute the previous page). And at any time, the maximum number of lines is 40.

 function getData(tableState) { //here you could create a query string from tableState //fake ajax call $scope.isLoading = true; $timeout(function () { //if we reset (like after a search or an order) if (tableState.pagination.start === 0) { $scope.rowCollection = getAPage(); } else { //we load more $scope.rowCollection = $scope.rowCollection.concat(getAPage()); //remove first nodes if needed if (lastStart < tableState.pagination.start && $scope.rowCollection.length > maxNodes) { //remove the first nodes $scope.rowCollection.splice(0, 20); } } lastStart = tableState.pagination.start; $scope.isLoading = false; }, 1000); } 

This function is called whenever the user scrolls down and reaches the threshold (with a throttle, of course, due to performance)

but the important part is where you delete the first entries in the model if you have loaded more than a certain amount of data.

Answer 2

I would like to draw your attention to the Angular Grid . I had the same problems as you, so I wrote (and shared) my own grid widget. It can handle very large datasets and has excellent scrolling.