DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Because the DevOps movement has redefined engineering responsibilities, SREs now have to become stewards of observability strategy.

Apache Cassandra combines the benefits of major NoSQL databases to support data management needs not covered by traditional RDBMS vendors.

The software you build is only as secure as the code that powers it. Learn how malicious code creeps into your software supply chain.

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

Related

  • Implementing Polling With RxJS
  • Mastering React Efficiency: Refactoring Constructors for Peak Performance
  • Buh-Bye, Webpack and Node.js; Hello, Rails and Import Maps
  • Integrating ChatGPT With ReactJS: A Comprehensive Guide

Trending

  • Apache Spark 4.0: Transforming Big Data Analytics to the Next Level
  • Caching 101: Theory, Algorithms, Tools, and Best Practices
  • After 9 Years, Microsoft Fulfills This Windows Feature Request
  • Infrastructure as Code (IaC) Beyond the Basics
  1. DZone
  2. Coding
  3. JavaScript
  4. 5 Popular Standalone JavaScript Spreadsheet Libraries

5 Popular Standalone JavaScript Spreadsheet Libraries

An overview to help you find the right solution for building web applications that can process large amounts of data.

By 
Ivan Petrenko user avatar
Ivan Petrenko
·
Updated Apr. 23, 21 · Analysis
Likes (5)
Comment
Save
Tweet
Share
64.8K Views

Join the DZone community and get the full member experience.

Join For Free

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

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

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

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

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.

JavaScript library

Opinions expressed by DZone contributors are their own.

Related

  • Implementing Polling With RxJS
  • Mastering React Efficiency: Refactoring Constructors for Peak Performance
  • Buh-Bye, Webpack and Node.js; Hello, Rails and Import Maps
  • Integrating ChatGPT With ReactJS: A Comprehensive Guide

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!