handsontable
Advanced tools
Handsontable is a JavaScript Spreadsheet Component available for React, Angular and Vue.
Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX.
It provides data binding, data validation, filtering, sorting, and CRUD operations.
React
|
Angular
|
Vue
|
Vue 3
|
JavaScript
|
The most popular features of Handsontable:
✓ Multiple column sorting
✓ Non-contiguous selection
✓ Filtering data
✓ Export to file
✓ Validating data
✓ Conditional formatting
✓ Merging cells
✓ Freezing rows/columns
✓ Moving rows/columns
✓ Resizing rows/columns
✓ Hiding rows/columns
✓ Context menu
✓ Comments
Run the following command in your terminal
npm install handsontable
You can also use Yarn, NuGet or load the bundle directly from jsDelivr.
Create an HTML placeholder
<div id="example"></div>
Import Handsontable and its stylesheet
import Handsontable from "handsontable";
import 'handsontable/dist/handsontable.full.css';
Now turn your placeholder into a data grid with sample data.
const data = [
['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
['2019', 10, 11, 12, 13],
['2020', 20, 11, 14, 13],
['2021', 30, 15, 12, 13]
];
const container = document.getElementById('example');
const hot = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true
});
We provide support for developers working with commercial version via contact form or at support@handsontable.com.
If you use a non-commercial version then please ask your tagged question on StackOverflow.
Handsontable is a commercial software with two licenses available:
If you use Handsontable in a project that supports your commercial activity, then you must purchase the license key at handsontable.com.
If you use the free for non-commercial license of Handsontable, then pass the phrase 'non-commercial-and-evaluation', as described in this documentation.
Proudly created and maintained by the Handsontable Team.
[12.0.0] - 2022-04-28
ShortcutManager, a new API for customizing keyboard shortcuts.
#8942layoutDirection. #8760fixedColumnsStart.
#8760updateSettings() handles data updates, to improve performance
and the consistency of user experience. Now, when provided with a new data object,
updateSettings() updates the data without resetting any states.
#7263updatePlugin() reacts to updateSettings() calls, to improve
performance and the consistency of user experience. Now, calls to updateSettings() update a
plugin's state only when the options object contains a configuration option that's relevant to
that particular plugin. #9021beforeKeyDown is
properly fired before afterDocumentKeyDown.
#6236./), to speed up the build process: now,
the npm run build and npm run test scripts don't build or test the Handsontable examples
(./examples). #9412hot.view.wt to hot.view._wt, where hot is the name
of your Handsontable instance. The intention of this change is to make it clear that Walkontable
(Handsontable's rendering engine) is not a part of Handsontable's public API.
#8760enzyme dependency from the React wrapper.
#9151updateSettings() caused problems for
state managers. #8372updateSettings() caused hidden columns to reappear.
#7165updateSettings() caused merged cells to unmerge.
#3315updateSettings() caused the state of nested rows to reset.
#8838updateSettings() caused problems with column sorting.
#7688setState() within the afterFilter hook broke
filtering. #7567updateSettings()
caused Handsontable to crash. #7546failed validation status got erased when editing a new row.
#7541BasePlugin class.
#9175"exports" field to their package.json files.
#9140For more information on Handsontable 12.0.0, see:
FAQs
Handsontable is a JavaScript Data Grid available for React, Angular and Vue.
The npm package handsontable receives a total of 87,113 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 0 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
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.