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
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

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workkloads.

Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Create Charts in ReactJS Using Chart.js
  • Fixing Common Oracle Database Problems
  • How to Restore a Transaction Log Backup in SQL Server
  • Why I Built the Ultimate Text Comparison Tool (And Why You Should Try It)

Trending

  • A Guide to Developing Large Language Models Part 1: Pretraining
  • It’s Not About Control — It’s About Collaboration Between Architecture and Security
  • While Performing Dependency Selection, I Avoid the Loss Of Sleep From Node.js Libraries' Dangers
  • Mastering Fluent Bit: Installing and Configuring Fluent Bit on Kubernetes (Part 3)
  1. DZone
  2. Data Engineering
  3. Databases
  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 apps 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.7K 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 Database

Opinions expressed by DZone contributors are their own.

Related

  • Create Charts in ReactJS Using Chart.js
  • Fixing Common Oracle Database Problems
  • How to Restore a Transaction Log Backup in SQL Server
  • Why I Built the Ultimate Text Comparison Tool (And Why You Should Try It)

Partner Resources

×

Comments

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: