Excel-like Data Grid Editor For jQuery - handsontable

Excel-like Data Grid Editor For jQuery - handsontable
File Size: 3.6 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:

How to use it:

1. Include jQuery library and handsontable.js

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

2. Include handsontable CSS to style your plugin

<link rel="stylesheet" media="screen" href="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,
externalRowCalculator: false,
stretchH: 'none',
currentRowClassName: null,
currentColumnClassName: null,
preventOverflow: function() {
  return false;
data: void 0,
fixedColumnsLeft: 0,
fixedRowsTop: 0,
fixedRowsBottom: 0,
minSpareRows: 0,
rowHeaders: function() {
  return [];
columnHeaders: function() {
  return [];
totalRows: void 0,
totalColumns: void 0,
cellRenderer: (function(row, column, TD) {
  var cellData = $__1.getSetting('data', row, column);
  fastInnerText(TD, cellData === void 0 || cellData === null ? '' : cellData);
columnWidth: function(col) {
rowHeight: function(row) {
defaultRowHeight: 23,
defaultColumnWidth: 50,
selections: null,
hideBorderOnMouseDownOver: false,
viewportRowCalculatorOverride: null,
viewportColumnCalculatorOverride: null,
onCellMouseDown: null,
onCellMouseOver: null,
onCellDblClick: null,
onCellCornerMouseDown: null,
onCellCornerDblClick: null,
beforeDraw: null,
onDraw: null,
onBeforeDrawBorders: null,
onScrollVertically: null,
onScrollHorizontally: null,
onBeforeTouchScroll: null,
onAfterMomentumScroll: null,
onBeforeStretchingColumnWidth: (function(width) {
  return width;
scrollbarWidth: 10,
scrollbarHeight: 10,
renderAllRows: false,
groups: false,
rowHeaderWidth: null,
columnHeaderHeight: null

Change Logs:

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)

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.