JS mesh performance comparison

Question

I used angular -ui-grid ( http://ui-grid.info/ ) to display tabular data. In general, it was rather slow, so we decided to use ag-grid ( https://www.ag-grid.com/ ). It was much more productive and better able to cope with regular sized datasets.

However, now we are working with some tabular data with a size of 100 ears x 10,000 rows (~ 1 M cells), and the grid seems rather slow in performance.

I was wondering if anyone used a hyper guide ( https://fin-hypergrid.imtqy.com/core/2.0.2/ ) - it seems to "solve" the problem of large cols x large rows and it seems a lot in their demonstration faster (almost an order of magnitude) on large data sets.

How is hypergrid compared to ag-grid or react-virtualized in performance with large data sizes?

Answer 1

I have not tried any of the libraries that you mentioned, but maybe I could explain why fin-hypergrid stands out the most. My opinion is primarily based on my knowledge of JavaScript and how this material works on the back.

I should start with react-virtualized and ag-grid :

• Both use a way to populate the DOM and display only part of the data in the view, dynamically deleting things from the DOM that are no longer visible, and pre-adding things that were expected in advance. Now the problem is adding and removing things in the DOM, as this is usually done very quickly / several times per second. Because of this, we experience some lag or trembling. In fact, you can check the Web Console Console> Profiles> Write JavaScript CPU Profiles and see that this method takes time to complete. Thus, the only thing that differs from react-virtualized and ag-grid is their algorithms for applying these changes in the most smooth way.

ag-grid , from what I see, is the one that suffers the most from this problem, since you can really see some elements that have not finished rendering yet, and experience too much lagging when scrolling too fast.

react-virtualized , on the other hand, does an excellent job by implementing its algorithm in the smoothest way. It may be the best library available in the DOM manipulation category, although it still suffers from the DOM manipulation problem too quickly, which creates a lag, although this is only visible when using large chunks of data.

This is why fin-hypergrid highlights:

• The fin-hypergrid best asset is that it doesn’t do any DOM manipulation at all, so you’ve already gotten rid of the problem caused by adding and removing things too quickly because it uses <canvas>
• fin-hypergrid also displays only the data that the user sees and dynamically removes things that are not visible. It also adds in advance to achieve a smooth scrolling feel, so rendering elements are not displayed.
• fin-hypergrid also does a great job with their scrolling algorithm to achieve the maximum possible manner, so there is no jitter or delay.

Now this does not mean that hypergrid all right, it has some disadvantages:

• Since fin-hypergrid is made with HTML5 canvas, styling will be a real pain since it does not accept CSS. You will need to manually style it.
• A few things to keep in mind are form controls, such as <select> , radio buttons, checkboxes, etc. - This is a real pain to implement. If you are trying to implement something like this, proceed with caution.
• It is mainly used to display data using simple column changes that are not related to anything other than a text field, and achieve the smoothest scrolling feel.

Now, in conclusion, I would suggest using react-virtualized instead, since it offers smooth scrolling, above fin-hypergrid . If you want to ignore the disadvantages of fin-hypergrid , then fin-hypergrid is the best option.

UPDATED:

Since we discussed JS / CSS, canvas implementations of these tables. I should have mentioned the last possible rival, although this is not the first js table library, but the structure in which Google Sheets can be used is called d3.js.

• d3.js has the speed and power of the canvas and at the same time preserves the HTML structure, which means that you can style it with CSS!
• It maximizes the use of HTML 5 SVG
• I can say nothing better in d3.js

The only drawback of d3.js in this discussion is that:

• There are no table libraries available that use d3.js Google Sheets that is. But they do not share the code.
• d3.js simply very difficult to learn, although there are many things that help us learn this faster, but not so fast.

If you need Canvas speed with CSS styling capabilities, then d3.js is the key to the learning problem.

Answer 2

Have you considered using something intended for large datasets?

Clusterize.js

I believe that it works, it only loads the item data for the ones you are looking at. Therefore, the browser does not lag behind, because it needs to display the viewing elements.

The demo page loads 3 examples with 500,000 elements each (150,000 elements).

Update - using an example snippet

• Since I do not have 100,000 x 200 data items to load, I create 100 x 200 using JavaScript.
• Then I copy this array and paste it into the data array 1000 times.
• That way, I can achieve your overall dataset size without overloading the JavaScript engine.
• Since it's hard to say that it really does 100,000 lines, I called the getRowsAmount() function, which appears at the top of the output.
• You may have to play with block and cluster sizes based on your viewport, but this should show you that this library is fully capable of meeting your needs.

 $(function() { var dataBlock = [] var data = []; const rows = 100000 const cols = 200; const blockSize = 100; const blocks = rows / blockSize; for (let i = 0; i < cols; i++) { $("thead tr").append(`<th>C${i}</td>`); } for (let j = 0; j < blockSize ; j++) { var tr = $("<tr />"); for (var i = 0; i < cols; i++) { tr.append(`<td>R${j}-C${i}</td>`); } dataBlock.push($("<div />").append(tr).html()); } for (let i = 0; i < blocks; i++) { $.merge(data, dataBlock); } var clusterize = new Clusterize({ rows: data, scrollId: 'scrollArea', contentId: 'contentArea', rows_in_block: 10, blocks_in_cluster: 2, }); $("#totalRows").text(clusterize.getRowsAmount()); }); 

 table td { white-space: nowrap; padding: 0 5px; } 

 <html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://clusterize.js.org/css/clusterize.css" rel="stylesheet" /> <script src="https://clusterize.js.org/js/clusterize.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> Total Rows: <span id="totalRows"></span> <div class="clusterize"> <div id="scrollArea" class="clusterize-scroll"> <table class="table"> <thead> <tr></tr> </thead> <tbody id="contentArea" class="clusterize-content"> <tr class="clusterize-no-data"> <td>Loading data…</td> </tr> </tbody> </table> </div> </div> </body> </html> 

The library supports adding data, so with the help of large data sets you can load some of your data through AJAX.

Answer 3

I used the free version of handsontable for large data sets. See Example with 10000 * 100 cells - http://jsfiddle.net/handsoncode/Lp4qn55v/

For example, for angular 1.5:

 <hot-table class="hot handsontable htRowHeaders htColumnHeaders" settings="settings" row-headers="rowHeaders" datarows="dba"> <hot-column ng-repeat="column in Value" data="{{column.COL1}}" > </hot-column> </hot-table> 

See documentation here

Answer 4

I went through various data grid options. Then I found it .

Hope this answer helps anyone looking for a performance comparison between data grids.

There are a few points to note here, even if you read the article I submitted.

1 - As soon as the grid is "fast enough", which means that the rendering delay is not noticeable, then it does not matter which grid is faster than the next.

2 - The canvas-based grid is not an HTML grid - you cannot customize it using HTML. The grid will struggle to be stylized / thematic / customized by a standard JavaScript / CSS developer.

Choose your poison, because it's not just performance when it comes to consumer level.