Excel-like Data Grid Editor For jQuery - handsontable

Excel-like Data Grid Editor For jQuery - handsontable
File Size: 4.56 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

handsontable is a a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery. It allows you to use auto-expanding and auto-complete as well as add new rows and columns.

It also includes a legend, scrolling (so as your table grows, it won’t take up your entire page and become unwieldy), context menus, conditional formatting and other features. You can even set it to track changes made to the table. And, all the data you enter in Handsontable can be copied and pasted to Excel, Google Spreadsheet, or LibreOffice.

You might also like:


$ npm install handsontable --save

How to use it:

1. Include jQuery library and handsontable.js

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/dist/jquery.handsontable.full.js"></script>

2. Include handsontable CSS to style your plugin

<link rel="stylesheet" href="/path/to/dist/jquery.handsontable.full.css">

3. Markup

<div id="dataTable"></div>

4. Call the plugin and load some data if you wish

  var data = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
    data: data,
    startRows: 6,
    startCols: 8

5. Default plugin settings.

table: void 0,
debug: false,
// shows WalkontableDebugOverlay
// presentation mode
externalRowCalculator: false,
stretchH: 'none',
// values: all, last, none
currentRowClassName: null,
currentColumnClassName: null,
preventOverflow: function preventOverflow() {
  return false;
// data source
data: void 0,
freezeOverlays: false,
fixedColumnsLeft: 0,
fixedRowsTop: 0,
fixedRowsBottom: 0,
minSpareRows: 0,
// this must be array of functions: [function (row, TH) {}]
rowHeaders: function rowHeaders() {
  return [];
// this must be array of functions: [function (column, TH) {}]
columnHeaders: function columnHeaders() {
  return [];
totalRows: void 0,
totalColumns: void 0,
cellRenderer: function cellRenderer(row, column, TD) {
  var cellData = _this.getSetting('data', row, column);

  (0, _element.fastInnerText)(TD, cellData === void 0 || cellData === null ? '' : cellData);
// columnWidth: 50,
columnWidth: function columnWidth() {// return undefined means use default size for the rendered cell content
rowHeight: function rowHeight() {// return undefined means use default size for the rendered cell content
defaultRowHeight: 23,
defaultColumnWidth: 50,
selections: null,
hideBorderOnMouseDownOver: false,
viewportRowCalculatorOverride: null,
viewportColumnCalculatorOverride: null,
// callbacks
onCellMouseDown: null,
onCellContextMenu: null,
onCellMouseOver: null,
onCellMouseOut: null,
onCellMouseUp: null,
//    onCellMouseOut: null,
onCellDblClick: null,
onCellCornerMouseDown: null,
onCellCornerDblClick: null,
beforeDraw: null,
onDraw: null,
onBeforeRemoveCellClassNames: null,
onAfterDrawSelection: null,
onBeforeDrawBorders: null,
onScrollVertically: null,
onScrollHorizontally: null,
onBeforeTouchScroll: null,
onAfterMomentumScroll: null,
onBeforeStretchingColumnWidth: function onBeforeStretchingColumnWidth(width) {
  return width;
onModifyRowHeaderWidth: null,
onModifyGetCellCoords: null,
onWindowResize: null,
// constants
scrollbarWidth: 10,
scrollbarHeight: 10,
renderAllRows: false,
groups: false,
rowHeaderWidth: null,
columnHeaderHeight: null,
headerClassName: null


v7.0.2 (2019-04-09)

  • Replaced fixed positioning of the row/column resize handles with absolute to prevent misalignment issues in implementations based on CSS transform.
  • Updated webpack to version 4. 
  • Fixed a problem with Handsontable throwing errors on scroll by adding support for EventListenerOption in the EventManager.
  • Added core-js to Handsontable's dependencies.
  • Added a ghost-table attribute to all cell elements generated with Ghost Table. 
  • Fixed a bug, where the editor was visible despite not being open, when the table was positioned using CSS transform.
  • Fixed a bug, where the table scrolled up after clicking a cell when Handsontable was implemented inside of an iframe.

v7.0.0 (2019-03-06)

  • Handsontable is now "source-available" instead of "open source". The MIT license has been replaced with custom, free for non-commercial license.
  • Added the beforeTrimRows and beforeUntrimRows hooks and modified the argument list for the existing ones in the Trim Rows plugin.
  • Removed the deprecated selectCellByProp method. 
  • Added hooks for the Hidden Rows and Hidden Columns plugins + added validation of the provided rows. 
  • Refactored classes to ES6.
  • Added a possibility to declare the table's width/height using relative values (%, vh, vw, rem, em). 
  • Added support for creating a Handsontable instance inside an iframe when the instance is initialized outside of it. 
  • Extended the Hidden Rows plugin's hooks argument list. 
  • Rewrote the TypeScript definition file so it would match the actual structure of the library more precisely. 
  • Lots of bugs fixed.

v6.2.2 (2018-12-19)

  • Update

v6.0.1 (2018-10-04)

  • Update

v5.0.2 (2018-09-20)

  • Update

v5.0.1 (2018-08-16)

  • Update

v0.38.1 (2018-04-10)

  • Bugs fixed.

v0.34.1 (2017-09-07)

  • Bugs fixed.

v0.31.2 (2017-04-03)

  • Bugs fixed.

v0.30.1 (2017-01-17)

  • Bugs fixed.

v0.30.0 (2017-01-11)

  • Bugs fixed.

v0.29.2 (2016-12-21)

  • Bugs fixed.

v0.29.1 (2016-12-13)

  • Bugs fixed.

v0.29.0 (2016-11-08)

  • Bugs fixed.

v0.28.4 (2016-10-13)

  • Bugs fixed.

v0.26.1 (2016-07-28)

  • Bugs fixed.

v0.26.0 (2016-07-12)

  • Bugs fixed.

v0.22.0 (2016-02-07)

  • Bugs fixed.

v0.11.4 (2014-10-08)

  • Bugs fixed.

v0.11.3 (2014-09-20)

  • update.

v0.11.2 (2014-09-12)

  • bugfix: text editor was showing unexpected characters if initiated with a non Latin alphanumeric character 
  • bugfix: copy-down of multiple cells does not work 
  • bugfix: custom borders did not work with fixedRowsTop 
  • bugfix: clicking on a merged cell scrolls to top 
  • enhanced descriptions on Autocomplete and HOT-in-HOT demo pages
  • removed animation of htInvalid class red background color (used for cells that don't validate)
  • text editor now uses the same font as table cell

v0.11.0 (2014-09-05)

  • support for multilevel context menu (demo) (#1649)
  • minified JS and CSS available in the dist directory (#762)
  • better described the behaviour of Handsontable cell type and Autocomplete cell type
  • bugs fixed.

v0.10.5 (2014-03-31)

  • fixed undoing/redoing changes in cells with validators
  • optimized pasting data into the table
  • added searchPlugin

v0.10.4 (2014-03-20)

  • fixed computing row height in IE8 
  • AutocompleteRenderer will now work on tables, which were destroyed and reinitialized
  • propToCol() will now properly translate data property to column index, when column data parameter is a function
  • multiple fixes for AutocompleteEditor 
  • pressing ENTER on cell of type checkbox will now toggle the checkbox state

v0.10.3 (2014-02-10)

  • fixed undoing/redoing remove rows/columns form tables with minSpareRows/minSpareCols 
  • dateEditor now allows to type date manually 
  • fixed typing any value in autocompleteEditor, when filter property is set to true
  • values typed in autocompleteEditor and dropdownEditor won't be recognized as regex anymore 
  • fixed copying values from cells with explicitly set type property 

v0.10.2 (2014-01-24)

  • new configuration option copyable lets you define which cells can be copied to the clipboard using the keyboard shortcut (using CTRL+C, CTRL+V). The default value is true for all cells with one exception - see the next point)
  • password cell type value can no longer be copied to the clipboard (unless you explicitly set option copyable: true)
  • added .editorconfig file. See http://editorconfig.org/ for details
  • moved Handsontable.DataMap class to a separate file

v0.10.1 (2014-01-12)

  • fixed handling copyPaste plugin, when no cell is selected 
  • fixed invoking cell renderers by autoColumnSize plugin 
  • fixed WeakMap shim for IE8 
  • fixed removing rows from a sorted table
  • fixed handling contextMenu plugin with multiple Handsontable instances
  • cell editor won't open after pressing ALT 
  • improved Web Components binding of Handsontable configuration to DOM properties

v0.10.0 (2013-12-28)

  • all renderers moved to a common namespace Handsontable.renderers (old names such as Handsontable.TextRenderer still works, but are deprecated)
  • fixed displaying editors when allowInvalid is set to true 
  • CapsLock no longer opens editor
  • loadData now clears cellProperties cache
  • when cell edit is cancelled, the original value is not validated
  • copy and paste handling has been moved to a separate plugin
  • added htmlRenderer
  • fixed problems with space key, when table contains cells of type checkbox 
  • fixed expanding <select> in selectEditor
  • fixed error occasionally thrown in IE8 
  • fixed selecting last column in scrollable table
  • simplified contextMenu plugin and fixed displaying menu for tables with native scroll enabled
  • set double click time to 500 ms

v0.9.19 (2013-10-01)

  • new plugin hook: afterRenderer
  • (previously private) DOM helpers are now exposed as Handosontable.Dom

v0.9.18 (2013-09-19)

  • Fixed bugs
  • Performance improved

v0.9.17 (2013-09-05)

  • Fixed bugs
  • Performance improved

This awesome jQuery plugin is developed by handsontable. For more Advanced Usages, please check the demo page or visit the official website.