Back to DataGridXL.com

Note: page load can be slow, due to the file size of some of the data grid products on this page (hint: it's not DataGridXL).

Comparing the best Javascript Data Grids

DataGridXL vs Handsontable

Handsontable is a well-known spreadsheet product made in Poland. It has been around since IE6 support was still a thing. Usually, with age comes wisdom, but Handsontable has some serious flaws that it has been unable (or unwilling?) to address for years.

In fact, Handsontable's poor performance and reliability (Handsontable lacks a store and state to avoid many common DOM issues) was the reason for our CEO to start building DataGridXL:

"At the time, I was working as lead front-end dev at a fintech company in The Netherlands. One moment we had to implement a spreadsheet-like editor and I chose Handsontable. It was broken in so many ways, that the only option left was to build my own."

— Robbert (CEO DataGridXL)

The Test

For this test, we'll have both data table products display the same dummy data set: 60,000 cells (1000 rows × 60 columns).

Handsontable's biggest flaws

1. Scroll-performance like it's 1999 2012

Handsontable still uses a <table> element to render their grid, which makes it impossible to give users decent scroll performance.

Scroll-Performance Test

Hover over DataGridXL and scroll using mouse or trackpad. You'll notice that DataGridXL implements scroll snap (similar to Google Sheets and Microsoft Excel), both for readability and to improve scroll performance. Pretty smooth, right?

Now scroll Handsontable. Depending on your browser, you'll notice that the grid is either empty (Chrome) or slow (Firefox) while scrolling: the rows & columns need to "generate". Also notice that the row and column headers do not always align with the actual cells while scrolling.

Not convinced? Select any cell in DataGridXL and press and hold any arrow key (eg. down arrow). DGXL's viewport will scroll smoothly along with the moving cell cursor. Do the same in Handsontable. Stop immediately if your start laptop starts to smoke.

2. Super-slow edit performance: "Are you even listening?"

Not only is scrolling slow: editing performance is even worse. Here's a good test case:

Edit-Performance Test

In DataGridXL, select any cell by mouse. Then press CTRL+A (or CMD+A on Mac) to select all cells inside the grid. Then press backspace to clear/empty all selected cells. Done instantly!

Do the same for Handsontable: select any cell, press CTRL+A. Wait for all cells to be selected, then press backspace to clear all cells. Wait a bit, wait some more, make yourself a cup of coffee and come back. Your Handsontable grid should now be empty.

It gets worse! After clearing cells, undo the action with CTRL+Z, then redo with CTRL+Y. See how Handsontable chokes?

3. Handsontable does not use a store & state model

Handsontable is almost a decade old and it shows. Handsontable does not have a store and state to keep track of changes to its document. This means that Handsontable's DOM is guaranteed to get messed up. Don't believe us? Ask their Github-users.

Also, important features like undo & redo that should be built-in, are merely afterthoughts (or "plugins", as they call it). This means that actions like Moving Rows is undoable, but Moving Columns is not. It's completely random. Don't believe us? Try it for yourself.

Undo/Redo Test

In Handsontable, drag any row to another spot. Then undo using CTRL+Z and redo using CTRL+Y. Now drag any column to a new spot. Try to undo this action. No response. Or do we have to wait a little longer? Who knows?

4. Handsontable does not implement precise Excel-controls

If you're just like, you care about user experience. You want to accomodate (and even delight) your users, who are already accustomed to MS Excel or Google Spreadsheets.

It's quite annoying for your end-users if certain keyboard controls that they've known for years are lacking (or different) in your web app's data grid. Here's a simple test case:

User-Friendliness Test

In DataGridXL, make a multi-cell selection by mouse. Then press Tab. The cell cursor moves inside the cell selection, exactly how it is in Excel and G. Sheets.

Do the same for Handsontable. Make a multi-cell selection and press Tab. Your multi-cell selection is gone: a great way to make your end-user feel frustrated with your product.

— "I get it. Handsontable is bad. But what makes DataGridXL a better option?"

DataGridXL is not interested in spreadsheet-features like merged cells, HTML markup or pivot tables. We want to provide the most performant, reliable and user-friendly JSON/Javascript data editor out there with spreadsheet-like controls.

Unlike the folks behind Handsontable (and Jexcel), whose goal it is to include as many features as they possibly can, without thinking about what these new features mean for performance and the amount of bugs they introduce.

DataGridXL was born out of frustration with Handsontable and we've set out to fix all the issues that Handsontable has with performance, reliability and user experience. We think we've done a pretty good job so far and we hope you agree.

When should you choose Handsontable over DataGridXL?

  • If performance/user-experience is not important
  • If you need to display HTML markup in your cells
  • If you need support for multi-line values in your cells (resizable rows)
  • If you need basic "spreadsheet features" like merged cells
  • If you need conditional formatting (it's on DataGridXL todo-list)

When should you choose DataGridXL over Handsontable?

  • If you care about page load, user experience and usability
  • If you care about performance, even with larger data sets
  • If you require decent (readonly) touchscreen controls
  • If data grid controls have to closely match with Excel's
  • If you want to delight your users

Compare DataGridXL

DataGridXL
200kb, 2020
Handsontable
1.1MB, 2012