handsontable
Advanced tools
Handsontable is a JavaScript Data Grid available for React, Angular and Vue.
Use it with JavaScript, TypeScript, or frameworks such as React, Angular, and Vue. With its spreadsheet-like editing features, it’s perfect for building data-rich internal apps. It allows users to enter, edit, validate, and process data from various sources. Common use cases include resource planning software (ERP), inventory management systems, digital platforms, and data modeling applications.
Website — Documentation — Themes — API — Community
✅ Built-in themes
✅ Flexible API
✅ Virtualization
✅ IME support
✅ Internationalization
✅ RTL support
✅ Accessibility
✅ Keyboard shortcuts
✅ Sorting data
✅ Filtering data
✅ 400 built-in formulas
✅ Configurable selection
✅ Data validation
✅ Conditional formatting
✅ Merged cells
✅ Frozen rows and columns
✅ Hiding rows and columns
✅ Right-click context menu
Below, you'll find the installation guide for the JavaScript component. If you're using a specific framework, refer to its dedicated wrapper for installation instructions:
You can also use Yarn, NuGet or load the package from CDN.
npm install handsontable
<!-- Set the container's ID -->
<div id="handsontable-grid"></div>
import Handsontable from 'handsontable';
// Base CSS rules
import 'handsontable/styles/handsontable.min.css';
// Main theme variables
import 'handsontable/styles/ht-theme-main.min.css';
const element = document.getElementById('handsontable-grid');
new Handsontable(element, {
// theme name with obligatory ht-theme-* prefix
themeName: 'ht-theme-main-dark-auto',
// other options
data: [
{ company: 'Tagcat', country: 'United Kingdom', rating: 4.4 },
{ company: 'Zoomzone', country: 'Japan', rating: 4.5 },
{ company: 'Meeveo', country: 'United States', rating: 4.6 },
],
columns: [
{ data: 'company', title: 'Company', width: 100 },
{ data: 'country', title: 'Country', width: 170, type: 'dropdown', source: ['United Kingdom', 'Japan', 'United States'] },
{ data: 'rating', title: 'Rating', width: 100, type: 'numeric' },
],
rowHeaders: true,
navigableHeaders: true,
tabNavigation: true,
multiColumnSorting: true,
headerClassName: 'htLeft',
licenseKey: 'non-commercial-and-evaluation',
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Handsontable - JavaScript Data Grid Example</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/handsontable/styles/handsontable.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/handsontable/styles/ht-theme-main.min.css"
/>
</head>
<body>
<div id="handsontable-grid"></div>
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script>
const element = document.getElementById("handsontable-grid");
new Handsontable(element, {
// theme name with obligatory ht-theme-* prefix
themeName: 'ht-theme-main-dark-auto',
// other options
data: [
{ company: "Tagcat", country: "United Kingdom", rating: 4.4 },
{ company: "Zoomzone", country: "Japan", rating: 4.5 },
{ company: "Meeveo", country: "United States", rating: 4.6 },
],
columns: [
{ data: "company", title: "Company", width: 100 },
{ data: "country", title: "Country", width: 170, type: "dropdown", source: ["United Kingdom", "Japan", "United States"] },
{ data: "rating", title: "Rating", width: 100, type: "numeric" },
],
rowHeaders: true,
navigableHeaders: true,
tabNavigation: true,
multiColumnSorting: true,
headerClassName: "htLeft",
licenseKey: "non-commercial-and-evaluation",
});
</script>
</body>
</html>
Handsontable is a data grid component written in JavaScript, not a spreadsheet. However, it brings in many features typically found in spreadsheet software. We designed it this way because spreadsheet-like patterns are often the most user-friendly when it comes to data entry and management.
div) or windowAt first glance, it might seem that a data table, spreadsheet, and data grid are just different names for the same thing - an interactive table displaying data. In reality, these tools serve different purposes and offer distinct functionalities, designed to meet specific needs. Handsontable sits comfortably in the data grid category while incorporating many of the best aspects of spreadsheet software.
We're here to help!
If you're using Handsontable with a free, non-commercial license, you can:
If you have a commercial license, feel free to contact us directly at support@handsontable.com or use our contact form.
Handsontable is available under two licensing options, allowing you to choose the one that best fits your needs. Each license comes with its own terms and conditions, as outlined below:
This license is available for non-commercial purposes such as teaching, academic research, or evaluation. It allows you to use Handsontable free of charge under the terms specified in the non-commercial license agreement.
Learn more here.
For commercial use, a paid license is required. This license includes support and maintenance to ensure you get the most out of Handsontable. The commercial license can be purchased directly from Handsoncode or through an authorized reseller. See the pricing page for details.
For projects covered by the free non-commercial license, simply use the phrase 'non-commercial-and-evaluation' as your license key.
If you're using Handsontable in a project that supports commercial activities, you'll need to purchase a license key at handsontable.com/pricing. You can find more details in our documentation.
Contributions are welcome, but before you make them, please read the Contributing Guide and accept the Contributor License Agreement.
Created and maintained by the Handsontable Team 👋
© 2012 - 2025 Handsoncode
AG Grid is a fully-featured and highly customizable JavaScript data grid. It offers a wide range of features similar to Handsontable, such as data sorting, filtering, and editing. AG Grid is known for its performance and flexibility, making it suitable for large datasets and complex use cases.
React Table is a lightweight, fast, and extendable data grid built for React applications. It provides basic features like sorting, filtering, and pagination. Compared to Handsontable, React Table is more focused on being a simple and flexible solution for React developers, without the spreadsheet-like features.
SlickGrid is a JavaScript grid/spreadsheet component that is known for its performance with large datasets. It offers features like virtual scrolling and column resizing. While it provides similar functionalities to Handsontable, it is more focused on performance and less on providing a spreadsheet-like experience.
FAQs
Handsontable is a JavaScript Data Grid available for React, Angular and Vue.
The npm package handsontable receives a total of 62,836 weekly downloads. As such, handsontable popularity was classified as popular.
We found that handsontable demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh joins Insecure Agents to discuss CVE remediation and why supply chain attacks require a different security approach.
Security News
Tailwind Labs laid off 75% of its engineering team after revenue dropped 80%, as LLMs redirect traffic away from documentation where developers discover paid products.
Security News
The planned feature introduces a review step before releases go live, following the Shai-Hulud attacks and a rocky migration off classic tokens that disrupted maintainer workflows.