handsontable
Advanced tools
Handsontable is a JavaScript Spreadsheet Component available for React, Angular and Vue.
Handsontable is a JavaScript/HTML5 data grid component with spreadsheet look & feel.
It provides easy data binding, data validation, filtering, sorting and CRUD operations.
Use npm to install the latest version.
npm install handsontable
You can use Yarn, NuGet or other methods as well. You can load it directly from jsDelivr.
Create a placeholder - an HTML element holding a place for a data grid.
<div id="example"></div>
Import Handsontable and its stylesheet.
import Handsontable from "handsontable";
import 'handsontable/dist/handsontable.full.css';
Alternatively, you can simply embed it in your HTML file.
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
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
});
A list of some of the most popular features:
Use one of the available wrappers to use Handsontable with your favorite framework:
We provide support for all users through GitHub issues. If you have a commercial license then you can add a new ticket through the contact form.
If you would like to contribute to this project, make sure you first read the guide for contributors.
Handsontable is compatible with modern browsers such as Chrome, Firefox, Safari, Opera, and Edge. It also supports Internet Explorer 9 to 11 but with limited performance.
Handsontable is dual-licensed. You can either use a free license for all your non-commercial projects or purchase a commercial license. See the table below for a comparison of these two.
| Free license | Paid license |
|---|---|
| For non-commercial purposes such as teaching, academic research, personal experimentation, and evaluating on development and testing servers. | For all commercial purposes |
| All features are available | All features are available |
| Community support | Dedicated support |
| Read the license | See plans |
The license key is obligatory since Handsontable 7.0.0 (released in March 2019).
If you use Handsontable for purposes not intended toward monetary compensation such as, but not limited to, teaching, academic research, evaluation, testing and experimentation, pass the phrase 'non-commercial-and-evaluation', as presented below:
const hot = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true,
licenseKey: 'non-commercial-and-evaluation'
});
If, on the other hand, you use Handsontable in a project that supports your commercial activity, then you must purchase the license key at handsontable.com.
The license key is validated in an offline mode. No connection is made to any server. Learn more about how it works.
Created by Handsoncode with ❤ and ☕ in Tricity.
[8.0.0] - 2020-08-05
modifySourceData hook and setSourceDataAtCell method.
#6664scrollViewportTo method: optional considerHiddenIndexes which is a
boolean. #6547autofill in the beforeAutofill hook.
#4441afterAutoFill hook. #6135instance.undoRedo.
#6346countRenderableColumns method to the TableView.
#6177CustomBorders typings.
#6788beforeSetCellMeta hook with an ability to cancel the changes.
#5388manualRowMove and manualColumnMove plugins work
#5945CellMeta manager was refactored for future features and improvements.
#6233rowHeights.
#6149RMB) click on the corner, column and row headers will show just some
options, defined by newly created specification
#7082afterRenderer, modifyColWidth,
beforeStretchingColumnWidth will be executable only on visible (meaning, rendered) rows and
columns. #6547getColWidth for hidden index will return 0 - it used to return 0.1
#6547modifyColWidth hook isn't called internally. However, it will be executed when the user will
call the getColWidth. #6547beforeValueRender,
beforeRenderer, afterRenderer, modifyColWidth, beforeStretchingColumnWidth etc. will be
executed just for some of the columns (just the renderable ones).
#6547ContextMenu, now it is selecting a column
on the right when there is space on right to the last selected column, selecting a column on the
left otherwise. #6547NestedHeaders plugin was rewritten, from now on, only a tree-like structure will be allowed,
meaning, there will be no possibility to place nested headers in-between layers.
#6716CustomBorders plugin was adapted to work with HiddenColumns properly, from now on hiding cells
at the start or at the end of a range will also hide their borders. Also, hiding a single cell
with borders will hide all of its borders.
#7083CollapsibleColumns will no longer use HiddenColumns plugin to work.
#6204render() will not work properly anymore.
From this point onward, all the data-related operations need to be performed using the API
methods, such as populateFromArray or setDataAtCell.
#5945manualColumnFreeze plugin doesn't use the
manualColumnMove, the collapsibleColumns plugin doesn't use the hiddenColumns plugin,
nestedRows plugin doesn't use the trimRows plugin, filters plugin doesn't use the trimRows
plugin anymore. #5945 along with other
adjustments #6547:minSpareRows and minRows options will ensure that the number of visible rows corresponds
to the value provided to them (for example, the trimRows plugin won't have an impact on the
number of displayed rows). #5945toPhysicalRow and toVisualColumn now return null for non-existant rows/columns.
#5945afterLoadData hook receives a different set of arguments. It used to be just the initialLoad
flag, now the first argument is sourceData, followed by initialLoad.
#5945manualColumnFreeze plugin unfreezes the column just after the "line of freeze".
#5945RecordTranslator object and the t property available in the plugins were removed.
#5945afterLoadData, afterFilter, etc.) are now called just before the
render call. #5945nestedRows plugin is enabled, moving rows will be possible only using the UI or by
calling the dragRows method of the manualRowMove plugin.
#5945beforeRowResize, afterRowResize, beforeColumnResize, afterColumnResize hooks have the
order of their arguments rearranged for the sake of consistency with other hooks.
#3328collapsibleColumns' toggleCollapsibleSection method.
#6193moment, numbro and pikaday dependencies to their latest versions.
#6610z-index properties between the overlays.
#6269ObserveChanges plugin is no longer enabled by columnSorting and became deprecated.
#5945HeaderTooltips plugin becomes deprecated and will be removed in the next major version.
#7023firstVisibleColumn CSS class as no longer needed.
#6547beforeChange callback.
#6792debug key (key, css, docs).
#6672hiddenRow and hiddenColumn hooks.
#6547modifyDocumentFocus from the listen function.
#6547rowOffset and colOffset public API methods since they aliased the methods from
Walkontable. #6547GanttChart plugin.
#7022modifyRow, modifyCol, unmodifyRow, unmodifyCol and skipLengthCache hooks are no
longer needed and were removed. #5945columnSorting option
enabled. #2685loadData not resetting the row order changed by the manualRowMove plugin.
#3568alter's insert_row after using the loadData method and sorting the
data would add unintentional additional rows to the table.
#3809loadData along
with the minSpareRows option. #3937columnSummary plugin not working properly after adding new rows using
the Context Menu and sorting the data.
#3924loadData with an object-based data source would not work properly.
#4204updateSettings.
#4121filters plugin using incorrect indexes after moving and/or sorting the
table. #44420.
#4470afterRowMove hook receiving an improper target argument.
#4501manualColumnFreeze plugin enabling manualColumnMove, even if it was
declared as false. #4553arrayMappers not working properly after updating the dataset.
#4567loadData with minSpareRows and manualRowMove enabled caused the
table to improperly load the data.
#4576columnSorting caused the manualColumnFreeze to be unusable.
#4601persistentState was enabled.
#4713manualColumnMove didn't work if the dataset was empty.
#4926collapseAll method from the collapsibleColumns plugin did not work
properly if columnSorting was enabled.
#4999loadData with minSpareRows enabled would cause unwanted blank rows
to appear. #5707afterColumnMove hook receiving an improper target argument.
#5173loadData made NaN appear in the column headers.
#5369skipColumnOnPaste option not working properly when using columnSorting
and hiddenColumns. #5824trimRows plugin did not work properly after moving rows.
#5860minSpareRows not working properly with the trimRows plugin being used.
#5862nestedRows plugin.
#5889toVisualRow method to return the
wrong results. #5890filters and trimRows plugins not working properly alongside each other.
#5915manualColumnMove would not work properly when the data object properties
count would be lower than the table column count.
#5931trimRows plugin did not work properly with the startRows option.
#5953loadData after sorting would not work as expected.
#5956beforeColumnMove and afterColumnMove hooks not containing information
about their destination indexes. #6005filters and minSpareRows would make the table add an empty row at
the beginning of the table. #6278manualRowMove plugin would duplicate data in the moved rows, when used with
a row index greater than the table row count.
#6088toVisualRow method returned null when using the trimRows and
columnSorting plugins together.
#6310updateSettings in the afterColumnMove hook callback would have
no effect. #4480loadData would make the filters plugin to not behave as expected.
#5244nestedRows plugin would cause a +/-
button misalignment. #5900columnSummary plugin creating a doubled summary row.
#5794nestedRows plugin would throw an
error. #6066nestedRows
plugin would throw an error. #3914columnSorting plugin.
#6086updateSettings.
#4121hiddenColumns and stretchH showed a redundant horizontal scrollbar.
#4181stretchH was enabled, the
last column was displayed. #4370updateSettings performance was very low because of hiddenColumns being
rendered. #4381nestedHeaders plugin.
#4716hiddenColumns did not work properly with columnSorting.
#5571manualColumnMove should work with hiddenColumns.
#5598hiddenColumns option interfered with the keyboard movement.
#5704collapsibleColumns were set to true it was impossible to exit
selection mode. #5875hiddenColumns did not work properly with autoWrapRow/autoWrapCol.
#5877nestedHeaders duplicated a header name if more columns are added.
#5882hiddenColumns plugin unset cell's renderer.
#5883hiddenColumns had stored visual indexes and should have used physical
indexes. #5909columns caused an issue with
showing column once it was hidden.
#6426colHeader was truncated after moving hiddenColumn.
#6463columnSorting to true (on initialization or via updateSettings)
made headers non-collapsible programmatically via collapseAll method.
#4999customBorders plugin was missing in the definition file.
#6477wtHiderand wtHolder in overlays.
#3873updateSettings could not update tableClassName.
#6295minSpareCols with undo added too many columns.
#6363readOnly for column was erased (did not apply) if filters were used.
#6559beforeRemoveCol
or beforeRemoverow. #6332readOnly state for some cells was lost when rows with trimRows turned on
were removed. #6990hiddenColumns were
used. #6978selectAll when the first row was hidden.
#6975nestedRows blocked table from loading if data was not provided.
#6928trimRows and hiddenRows with specific settings broke borders.
#6904startPosition.
#6840Handsontable.plugins.ContextMenu.
#6347manualColumnMove did not modify the columns in updateSettings.
#5200updateSettings.
#3770currentColClassName did not work properly with nestedHeaders.
#5861stretchH.
#6186getSourceData functions returned wrong data for nested rows.
#5771nestedRows.
#4154getByRange for sourceData did not work properly with nested object data.
#6548window.frameElement threw errors in MSEdge, IE and Safari.
#6478DataSource.countColumns returned invalid number of columns for nested
objects. #3958mergedCells with hidden cells caused problems with rendering.
#7020ctrl + a. #6355onMouseOut event caused critical errors when
hovering over vertical scrollbar.
#6699NestedHeaders did not allow to define header level as an empty array.
#7035nestedHeaders as a single empty array stoped the table from
rendering. #7036 hot.updateSettings was called in afterSelection.
#3726exportToFile in the specific case.
#4176afterRowResize hook shared incorrect results in the second parameter.
#6430null.
#7074updateSettings changed the index of frozen columns via
freezeColumn method. #6843updateSettings which was part of the selection
caused scroll to the bottom. #5849setCellMeta.
#4793clear method removed the focus from the table.
#7099clear method did not work for hidden data.
#7097beforeRowMove arguments.
#6539nestedRows.
#5133afterOnCellMouseDown returned (0,0) coords after clicking on the topleft
corner. #3978manualColumnMove was not restored when using loadData.
#5207manualColumnMove operation affected the column order of data loaded by
loadData. #5591nestedRows did not allow to keep rowHeaders after collapsing.
#5874walkontable.css and handsontable.css stylesheets were out of sync.
#6381colHeaders order was not updated after manual move with empty object data
source. #6413PreventOverflow feature did not work if multiColumnSorting plugin was
enabled. #6514updateSettings.
#6575columnSummary, Filters and spare rows were causing 'RangeError: Maximum
call stack size exceeded'. #6695afterSelectionEnd returned incorrect data when clicking on a column when
all rows were hidden. #7045trimWhitespace to false.
#6232BACKSPACE not working properly in the filter by value input.
#6842deepObjectSize function.
#6821For more information on Handsontable 8.0.0, see:
FAQs
Handsontable is a JavaScript Data Grid available for React, Angular and Vue.
The npm package handsontable receives a total of 90,401 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.