Skip to content

Handsontable is an Excel-like data grid / spreadsheet for HTML & JavaScript

License

Notifications You must be signed in to change notification settings

r-kamath/handsontable

 
 

Repository files navigation

Handsontable Build Status

Handsontable is a data grid component with an Excel-like appearance. Built in JavaScript, it integrates with any data source and comes with features like data validation, sorting, grouping, data binding or column ordering. Actively supported by the Handsoncode team and the GitHub community.

Check out the demos at http://handsontable.com/examples.html or fork the example on JSFiddle to see Handsontable in action.


Quick start

  1. A recommended way to install Handsontable is through Bower package manager using the following command:

bower install handsontable --save

Alternatively, you can download it in a ZIP file.

  1. After Handsontable is downloaded, embed the code into your project. All the files that you need are in the dist\ directory:
<script src="dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="dist/handsontable.full.css">
  1. Then, create a new Handsontable object, passing a reference to an empty div as a first argument. After that, load some data if you wish:
<div id="example"></div>

<script>
  var data = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
  ];
  
 var container = document.getElementById('example');
  var hot = new Handsontable(container,
   {
     data: data
    });
</script>

API Reference

AMD support

If you use a modular script loader than Handsontable is not bound to the global object and will fit nicely in your build process. You can require Handsontable just like any other module.

require(['handsontable'], function(Handsontable) {
    var hot = new Handsontable(document.getElementById('example'), {
      data: [[1, 2, 3, 4], [1, 2, 3, 4]]
    });
});

CommonJS module support

If you use a CommonJS compatible environment you can use the require function to import Handsontable.

var handsontable = require('handsontable');

To bundle handsontable with Browserify you must specify the module names of all required modules by Handsontable:

browserify main.js -o bundle.js -r moment -r pikaday -r zeroclipboard

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

  1. Use GitHub Issues board to report bugs and feature requests (not our email address)
  2. Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.
  3. If possible, please add a JSFiddle link that shows the problem (start by forking this fiddle). It saves us much time.
  4. If you can't reproduce it on JSFiddle, please add a screenshot that shows the problem. JSFiddle is much more appreciated because it lets us start fixing straight away.

Thanks for understanding!

Compatibility

Handsontable is compatible with IE 9+, Firefox, Chrome, Safari and Opera.

Want to help?

Please see CONTRIBUTING.md

Changelog

To see the list of recent changes, see Releases section.

License

The MIT License (see the LICENSE file for the full text)

Contact

You can contact us at [email protected].

About

Handsontable is an Excel-like data grid / spreadsheet for HTML & JavaScript

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 91.4%
  • HTML 6.6%
  • CSS 1.9%
  • PHP 0.1%