jQuery: Create EXCEL like Document

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.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..