Handsontable – Excel-like table editor

Handsontable is a approach to Excel-like table editor in HTML and jQuery.

Features:

  • autoexpanding: when you type in a cell the grid adds new rows and cols automatically. You can use CTRL+Z and CTRL+Y to undo/redo, and CTRL+C and CTRL+V to copy/paste;
  • legend: this feature makes the first row have a green font;
  • autocomplete: you can define rules for autocompletition. This feature has a dependency on another jQuery plugin: bootstrap-typeahead (that is included in the repo when you download the plugin);
  • drag-down: the selected cell has a little square in the corner; you can drag it down to repeat the values from the cell;
  • context menu: on right click you have some additional options (insert row, insert column, delete row, delete column);
  • validation: use the onBeforeChange callback to validate changes before they are applied to the table;
  • load & save: use the onChange callback to track changes made in the table.

How to use:

The markup

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

The JS for a simple example

 $("#example1grid").handsontable({
   rows: 5,
   cols: 5,
   minSpareCols: 1, //always keep at least 1 spare row at the right
   minSpareRows: 1, //always keep at least 1 spare row at the bottom
   contextMenu: true
});
 var data = [
   ["", "Kia", "Nissan", "Toyota", "Honda"],
   ["2008", 10, 11, 12, 13],
   ["2009", 20, 11, 14, 13],
   ["2010", 30, 15, 12, 13]
];
 $("#example1grid").handsontable("loadData", data);

Demo Download & Documentation

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s