Learning jQuery

Excel is a powerful tool so as jQuery is a powerful library. In this post, I will show you a jQuery plugin named "Handsontable " using which you can easily create Excel like document/table on your webpage. This plugin also supports some of the tasks which you can perform with excel like Copy+Paste, Drag down to copy cell value.

Handsontable is a minimalistic (60 KB unminified) approach to Excel-like table editor in HTML & jQuery.

Features

• Autoexpanding: Type in any cell and see how the grid adds new rows and cols automatically.
• Copy Paste Compatibility - Data can be copied and pasted between jQuery Handsontable, MS Excel, Google Spreadsheet or LibreOffice.
• Legend : The legend feature, which makes the first row uneditable and have a green font.
• Autocomplete : You can define rules for autocompletition.
• Drag-down : You can drag it (drag-down) to repeat the values from the cell.
• Context menu : Right click to see the context menu.
• Custom buttons : The alter method can be used if you want insert or remove rows and columns using external buttons.

How to use it?

• Download the plugin and its related dependent libraries and include their references.
• Declare a div element.
• Define number of rows and columns you want. That may depend on the data that you have.
• After that create an array of data.
• And finally call the "handsontable" method with "loaddata" function.

$("#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);

Above code is just a basic example but this plugin offers a lot more options and settings to play with.

Feel free to contact me for any help related to jQuery, I will gladly help you.