5 Popular Standalone JavaScript Spreadsheet Libraries

In this article, I’ll give a short overview of five popular standalone JavaScript spreadsheet libraries on the basis of their functionality and licensing policy. These libraries can be implemented in nonprofit projects for free and also offer paid licenses for commercial use. I hope this overview will help you find the right solution for building web apps aimed at processing large amounts of data.

Handsontable

Handsontable is said to be a JavaScript grid with spreadsheet look and feel. It’s a pure JavaScript library with support for React, Vue.js, and Angular. The list of its basic features includes the ability to collapse columns, resize, move, and hide columns and rows, add comments, show column summary, export data, apply conditional formatting, use data validation, and add dropdown menus. It's also possible to sort and filter data and use the auto fill.

What’s more interesting is the list of advanced features. For example, developers can choose which renderer should be used when table rendering is triggered. Also, there’s the possibility to create custom plugins, use custom buttons, and define customized borders between the cells. Besides, there are such features as multi-column sorting, nested headers, trimming rows, and others.

Handsontable provides three types of licenses: Non-commercial free license, Developer ($790 per developer), Enterprise (custom price) licenses.

My verdict: Handsontable is a great option for non-commercial projects and for those who are ready to pay for rich functionality.

ag-Grid

ag-Grid is a JavaScript grid/spreadsheet component that provides easy integration with Angular, Angular JS 1.x, React, Vue.js, Polymer, and Web Components with no third-party dependencies. It takes pride in its fast performance with dozens of rows judging by this 100,000 rows demo.

The grouping and aggregation features allow users to work with the data the way they want. Data can be grouped by specific columns, and various aggregate column values can be displayed in the grouped row. ag-Grid provides quick filtering feature and custom filters. Lazy loading allows displaying just the required amount of rows and requesting additional data as the user scrolls, which helps to save server resources. ag-Grid supports real-time updates and can handle hundreds of updates per second. You can read more about these and other features and see some demos on the features overview page.

The library comes in two versions: Community and Enterprise. The Community version is covered by the MIT license and includes only basic features. The Enterprise license with all the available functionality has three options: Single Application Developer ($750 per developer), Multiple Application Developer ($1,200 per developer), and Deployment License ($750 per Production Environment).

My verdict: ag-Grid provides lots of useful features and simple integration with different JS frameworks. It seems to be a good choice for big-budget projects, as the licensing is quite flexible yet pricey.

DHTMLX Spreadsheet

DHTMLX Spreadsheet is a customizable JavaScript spreadsheet component with Material skin and Excel-like interface. It supports three popular frameworks: React, Vue.js, and Angular.

You can customize almost every element of this spreadsheet according to its user guide — for example, use the custom icon font pack for the toolbar, menu, and context menu controls instead of the Material-design one. Cell formatting features allow you to change the text color and decoration, background color, set text-align, apply different number formats to cell values (text, number, percent, currency, common) or add custom formats, resize columns, etc.

There’s also the possibility to lock cells, enable the auto-filling of cells with content by typing data into cells and drag the fill handle to prolong the series of numbers or letters in other cells. You can freeze any number of columns on the left side of the Spreadsheet to keep them visible during scrolling. 

You can also take advantage of numerous built-in formulas (math functions and string functions). They allow performing a wide range of numerical calculations and presenting textual information exactly the way you need without any code manipulations. All available formulas are fully compatible with Google and Excel Sheets. Another helpful feature of this Spreadsheet component is the ability to create multiple worksheets and simultaneously interact with their data with the help of cross-referencing.

 DHTMLX Spreadsheet offers quite an extensive list of hotkeys for navigation. Also, the library gives an opportunity to import and export data from/to Excel files. For that purpose, dhtmlxSpreadsheet developers have implemented their own opensource libraries Excel2Json and Json2Excel. Thanks to the support of TypeScript, you can incorporate the spreadsheet component in your app much faster using type suggestions, autocompletion, and type checking. 

DHTMLX Spreadsheet provides three main licenses: Commercial License ($149 for up to 5 developers), Enterprise License ($449 for a team up to 20 developers), Ultimate License ($669 for the unlimited number of developers).

My verdict: DHTMLX Spreadsheet provides a set of essential features and support for popular frameworks and can be considered a good value for money.

Clusterize.js

Developers describe Clusterize.js as a tiny plugin to display large data sets easily. It weights only 2.3KB gzipped but unfortunately doesn’t provide any advanced features. Its main purpose is to make tables with a huge number of rows run smoothly on a web page. Instead of “polluting” the DOM with all used tags, Clusterize.js splits the list to clusters, then shows elements for a current scroll position and adds extra rows to the top and bottom of the list to emulate the full height of the table so that the browser shows a scrollbar for the full list. This library works with modern browsers and supports all major mobile devices.

The good news is that Clusterize.js is pretty affordable. Among the available licenses, you can find a Personal License (free for personal projects), Commercial License ($25 for commercial use and an unlimited number of projects), and Extended License ($110; can be included in a product for sale).

My verdict: Clusterize.js is an excellent choice for those who are in search of a single-purpose tool that works fast and allows saving some money.

SlickGrid

SlickGrid is a neat and minimalist JavaScript spreadsheet component. Adaptive virtual scrolling allows for the handling of hundreds of thousands of rows without any lag. The library supports jQuery UI themes and enables wide customization. Users can resize, reorder, show, or hide columns, use grouping, filtering, custom aggregators, and other features. Pluggable cell formatters and editors allow you to expand the functionality of your web app.

As you can see, SlickGrid provides the basic set of features that can meet the needs of an average user. Unfortunately, according to the GitHub page of the project, this library hasn't received much attention from developers recently. The good news is that SlickGrid is available for free.

My verdict: SlickGrid can be a good option if you're not looking for rich functionality or can’t afford a commercial license.