Last year we published a very popular grid comparison which provided a good overview of several web grid engines commonly used for modern web applications.
The time has come to expand the review and provide several new options for people who are looking for the best pick for their new stylish ultrafast data intensive web applications.
We stand by the notion that web interfaces can be as flexible, feature-rich, and robust as their desktop analogues and should be considered as the first choice when choosing a platform for a user-facing application.
Modern data-intensive web applications are essentially web grids so it is extremely important to pick the best option among the many of them available. Our goal is to help you find the grid that powers your next application!
Contestants
We have previously reviewed many great grids and this time we wanted to introduce all new faces that weren’t tested before to give you a wider choice for your new shiny high performance web application!
The following grids are all excellent and you can’t go wrong by choosing any of them for your new project:
- Tabulator 4.9: Their website says it is “The easy to use, fully featured, interactive table JavaScript library”. This is a simple, fast, and good looking grid with no external dependencies that is freely available under the MIT license.
Tabulator 4.9
- FXB Grid: A grid without external dependencies that is simple to understand, and easy to extend, style, and modify. Also, spoiler alert, it is extremely fast!
FXB Grid
- GrapeCity Wijmo Grid 5.20203.766: A part of the Wijmo framework, this is a great grid component that is good looking, flexible and has an impressive amount of features supported.
Wijmo Grid 5.20203.766
- RevoGrid 2.9.0: An Excel-like reactive grid that boasts support of huge data load and complex operations. While it is available as a pure JavaScript library, it is also providing bindings for most popular modern application frameworks such as React and Vue.
RevoGrid 2.9.0
- Smart Grid 0.3.1: A lightweight highly customizable React grid. It’s very simple and not as feature-rich as other grids in this contest but it has great performance, and a very intuitive reactive interface. It can be a great low calorie open source alternative with only 884 bytes added to your final application bundle.
Smart Grid 0.3.1
- SyncFusion DataGrid 18.4.39: A part of a gigantic SyncFusion component suite that spans through several languages and platforms. Perhaps, it is not the first choice for a standalone web grid project, but would definitely be a great addition that provides a highly efficient grid that delivers excellent performance in case you are already using other SyncFusion components for your applications.
SyncFusion DataGrid 18.4.39
If you want even more great options to consider for your project I would suggest reviewing our previous posts comparing many other great grids: Best Web Grids for 2020 and Grids Without Gridlock: Which is Fastest?
How We Test
Our main focus is user experience. The grid should look good, feel snappy, hold a huge amount of data and yet still go easy on memory as it often is a limited resource. A good grid shows results of a query with subsequent updates that occur to that grid, such as deletes, updates, and new records. On average, we used a message size of 140 Bytes– it’s big enough to show meaningful information and is small enough to fit millions of such messages into the grid without taking all the available RAM on our test system. The following set of tests should give us a good picture of how the selected grids will perform in a real world situation:
Rendering Time: How much time it will take to render the initial portion of data. Fast rendering is important so that the web application loads and is ready to work as soon as possible. Another situation when fast rendering might be useful is switching data sets to display in the grid.
Frames Per Second (FPS): The more FPS a grid can produce while being used, the smoother and more responsive it looks and feels. Significant changes in FPS are perceived as freezes and should be avoided as much as possible.
Memory Consumption: If a grid is memory efficient, it can work well and do more on a device with less memory, such as mobile devices and laptops. In our test we will measure how many rows/records a grid can render using no more than 2 GB of RAM.
Live Updates: Rendering the initial portion of data is important, but that’s not enough if a grid cannot smoothly render changes in real time. According to MDN, “A frame rate of 60fps is the target for smooth performance, giving you a time budget of 16.7ms for all the updates needed in response to some event.” In this test we will measure how many rows per second we can add to the grid while maintaining maximum FPS and experience no lagging.
Environment
Hardware
- CPU: 6th Generation Intel® Core™ i7-6820HQ Processor (8MB Cache, up to 3.60GHz)
- GPU: NVIDIA® Quadro® M1000M 4GB
- RAM: 64GB DDR4 2133 MHz
- Storage: 1TB PCIe SSD
Software
- OS: Ubuntu 5.8.0-42 GNU/Linux x86_64
- Browser: Google Chrome Linux 88.0.4324.150 (64-bit)
We don’t test other browsers as they are increasingly irrelevant at this point – they either have a tiny market share (Firefox), don’t have decent performance and support for modern technologies (IE 11), or are essentially clones of Chrome (Edge/Opera/etc).
Time to Render
Once the initial data portion of a query is loaded (typically, in a separate WebWorker, especially if it’s large), we need to display it in the grid. Considering the size of the initial portion, all grids did great, but one grid is a true king of rendering!
Every grid in our tests is using virtualization. FXB Grid did fantastic, rendering pretty much any dataset in under a millisecond! SyncFusion and Smart Grid performed excellent as well. Other grids demonstrated a near linear dependency for the rendering time required which might be a limiting factor for extremely large datasets.
Rendering Performance in Dynamic: Scroll Tests
Now that we have our data loaded and rendered we want our grid to keep being responsive and snappy with all the data loaded. We want to look through these rows without having a feeling that we’re watching a slide show. To make this test more objective, we measured FPS using Chrome Developer Tools. Scrolling using Touchpad/Mouse wheel simulates slow scrolling, while scrolling by dragging the scrollbar will show how the grids are optimized for very fast scrolling. As before, we test for each dataset size.
Every grid nailed the mouse/touchpad scrolling test with buttery smooth near-perfect FPS! The scrollbar scroll, due to its nature, triggers more intensive re-renders of virtualized rows and thus can be somewhat more challenging which we observed in this case.
RevoGrid and FXB Grid are clear winners with RevoGrid having the best overall scrolling perfomance.
Wijmo and Smart Grid demonstrated decent performance which, while being slightly worse, would still provide great user experience. On the other hand, Tabulator seems to be not well optimized for this kind of re-rendering case and didn’t perform great.
SyncFusion is a special case – it felt snappy and smooth when using mouse/touchpad, however, it has a specific re-rendering behavior of lagging for about 200-300ms after scrolling using the scrollbar, exposing stale data previously populated in the virtual viewport before updating it (try to scroll the example on their website yourself). Because of that lag, we can’t award SyncFusion more than 3-5 frames per second for the scrollbar test.
Memory Efficiency
This is a test that answers one simple question – how much data can we display in the grid on an entry level desktop?
All grids demonstrated great efficiency – they will fit enough data before running out of memory, however, Smart Grid, SyncFusion, and FXB Grid are significantly more efficient when it comes to memory compared to the rest of the contestants.
Real Time Random Updates
Now the grid is loaded and rendered with all of the original data, but that’s not enough – without real-time updates, the dataset becomes irrelevant. This test starts with the 20,000 records and applies updates at an increasing rate, until the grid starts lagging.
FXB Grid is excellent when it comes to real-time updates, more than 5 times outperforming the second place! Having said that, all contestants (except, perhaps, Tabulator) demonstrated decent performance when it comes dynamic data updates.
Quality of Documentation
While users care about performance and look-and-feel of a grid, developers care about how easy it is to work with the grid and implement application functionality with it. Let’s see what each grid engine can offer in terms of documentation, examples, and support.
I’ve ranked the grids as follows:
Smart Grid– The grid is so simple, the documentation is just one small page. The simpler, the better, thus, the first place.
Wijmo and SyncFusion– both grids provide tons of examples and live demos, API is very well documented and easy to search and navigate. Commercial support is available.
RevoGrid– Nice, well structured documentation and examples. Commercial support is available.
FXB Grid and Tabulator– Great documentation and interactive demos. Commerical support is available for the FXB Grid.
To be fair, all grids in this comparison have great documentation – the learning curve won’t be too steep!
Conclusion
We’ve reviewed an array of great web grids that will do great as a heart of your web application. In fact, this time test results demonstrated a much closer competition than a year ago for another set of contestants.
The winners among the newcomers are:
FXB Grid: Excellent performance in every test – you simply can’t go wrong by picking this grid!
Smart Grid: An ultralight and ultrafast React grid that will do the job without adding overhead.
RevoGrid: A great grid engine with the smoothest rendering we’ve ever seen, with support for most frameworks, great documentation and available technical support for commercial customers.
Honorable mention: SyncFusion. this is a great pick in terms of performance, however it might not be the first choice if you’re not intending to build your entire application using their platform.
Our previous winners are also extremely nice grids to consider as well:
ag-Grid: An amazing grid engine that has every feature you can possibly imagine, along with great support, documentation and, of course, performance.
Webix: Excellent performance in all categories, great API and documentation.
Hopefully, these results can help steer you in the right direction of selecting the best web grid for your next project. Before you make the final decision, please also review our previous grid comparison posts: Best Web Grids for 2020 and Grids Without Gridlock: Which is Fastest?
For users who want to try these grids in action, we’ve prepared a GitHub repository with the sample projects for each grid used in the above tests. Did we miss something? Do you know a great grid we should totally try? Let us know what you think!