5fa4bfcb868a13cbd619f92b943e9c96cde6ca42b8eaf835124cbac643a81966345fd04114884457e21b76c75d42ff2cc59e346051b685afcd9cd0d483b14e 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. # [![Build Status](https://raw.githubusercontent.com/handsontable/static-files/master/Images/Logo/Handsontable/Handsontable-logo-300-74.png)](https://handsontable.com)
  2. [**Handsontable**](https://handsontable.com) is a pure JavaScript/HTML5 spreadsheet component with an Excel-like appearance. It can easily integrate with any data source and comes with a variety of useful features like data binding, validation, sorting or powerful custom context menu. Actively supported by the [Handsoncode team](https://handsontable.com/team.html) team and [many contributors](https://github.com/handsontable/handsontable/graphs/contributors).
  3. [![Build status](https://travis-ci.org/handsontable/handsontable.png?branch=master)](https://travis-ci.org/handsontable/handsontable)
  4. [![npm](https://img.shields.io/github/contributors/handsontable/handsontable.svg)](https://github.com/handsontable/handsontable/graphs/contributors)
  5. [![npm](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/handsontable/handsontable/blob/master/LICENSE)
  6. ## What to use it for?
  7. We have seen Handsontable being used in many different, sometimes completely unexpected fields. The list below is just to give you a rough idea on what you can do with Handsontable, but it doesn't limit you in any way.
  8. - Database editing
  9. - Configuration controlling
  10. - Data merging
  11. - Team scheduling
  12. - Sales reporting
  13. - Financial analysis
  14. ## Installation
  15. There are many ways to install Handsontable but we suggest using one of available package managers.
  16. ```
  17. npm install handsontable --save
  18. ```
  19. or
  20. ```
  21. bower install handsontable --save
  22. ```
  23. ### Alternative installation
  24. - [Download ZIP](https://github.com/handsontable/handsontable/archive/master.zip)
  25. - [Download from nuget](https://www.nuget.org/packages/Handsontable/)
  26. ### AMD support
  27. If you use a modular script loader then you can require Handsontable just like any other module:
  28. ```javascript
  29. require(['handsontable'], function(Handsontable) {
  30. var hot = new Handsontable(document.getElementById('example'), {
  31. data: [[1, 2, 3, 4], [1, 2, 3, 4]]
  32. });
  33. });
  34. ```
  35. ### CommonJS module support
  36. If you use a CommonJS compatible environment you can use the `require` function to import Handsontable:
  37. ```javascript
  38. var handsontable = require('handsontable');
  39. ```
  40. To bundle Handsontable with [Browserify](http://browserify.org) you must specify the module names of all required modules:
  41. `browserify main.js -o bundle.js -r moment -r pikaday -r zeroclipboard -r numbro`
  42. ## Basic usage
  43. Assuming you have already installed Handsontable, add an empty `<div>` element that will be turned into a spreadsheet:
  44. ```html
  45. <div id="example"></div>
  46. ```
  47. In the next step, pass a reference to that `<div>` element and fill it with sample data:
  48. ```javascript
  49. var data = [
  50. ["", "Ford", "Volvo", "Toyota", "Honda"],
  51. ["2016", 10, 11, 12, 13],
  52. ["2017", 20, 11, 14, 13],
  53. ["2018", 30, 15, 12, 13]
  54. ];
  55. var container = document.getElementById('example');
  56. var hot = new Handsontable(container, {
  57. data: data,
  58. rowHeaders: true,
  59. colHeaders: true
  60. });
  61. ```
  62. ## Examples
  63. - [Explore our features](https://handsontable.com/examples.html)
  64. - [Basic demo](http://jsfiddle.net/handsoncode/s6t768pq)
  65. - [Handling a large dataset](http://jsfiddle.net/handsoncode/Lp4qn55v)
  66. - [Finance](http://jsfiddle.net/handsoncode/b2g2h7oh)
  67. - [Sport](http://jsfiddle.net/handsoncode/b5rvw5zk)
  68. - [Science](http://jsfiddle.net/handsoncode/g1hnaxtt)
  69. ## Resources
  70. - [API Reference](http://docs.handsontable.com/Core.html)
  71. - [List of features](http://docs.handsontable.com/tutorial-features.html)
  72. - [Compatibility](http://docs.handsontable.com/tutorial-compatibility.html)
  73. - [Performance tips](http://docs.handsontable.com/tutorial-performance-tips.html)
  74. - [Roadmap](https://trello.com/b/PztR4hpj/handsontable-roadmap-2016)
  75. - [Known limitations](http://docs.handsontable.com/tutorial-known-limitations.html)
  76. ## Commercial version
  77. [Handsontable Pro](https://handsontable.com/pricing.html) is a commercial spreadsheet solution packed with additional, business-ready features. It comes with a dedicated support and a [forum support](https://forum.handsontable.com), where you can find the answers to common questions.
  78. | Pro Feature | Description |
  79. |--------------------------- |---------------------------------------------------------------------------------------- |
  80. | Binding rows with headers | Bind rows with headers to lock the row number and always display one beside the other. |
  81. | Collapsing columns | Expand and collapse columns to better fit the content. |
  82. | Column summary | Carry out pre-defined calculations and display the results in Handsontable. |
  83. | Dropdown menu | Add a menu to the heading to enable additional operations for the columns. |
  84. | Export to file | Export data to a flat file like CSV or a string. |
  85. | Filtering | Display rows that meet your criteria and hide the rest. |
  86. | Gantt Chart | Create a simple Gantt Chart using Handsontable. |
  87. | Header tooltips | Display the header label in a tooltip. |
  88. | Hiding columns | Hide specific columns and show the rest. |
  89. | Hiding rows | Hide specific rows and show the rest. |
  90. | Nested headers | Create a nested, hierarchical structure of headers to get your data into groups. |
  91. | Trimming rows | Exclude specific rows from the rendering process so they won't be displayed. |
  92. Have questions regarding the Pro version? [Contact us](https://handsontable.com/contact.html?category=general_question) or take a look at the [Frequently Asked Questions](https://handsontable.com/faq.html).
  93. ## Screenshot
  94. <p align="center">
  95. <img src="https://raw.githubusercontent.com/handsontable/static-files/master/Images/Screenshots/handsontable-showcase.png" align="center" alt="Handsontable Screenshot"/>
  96. </p>
  97. ## Community
  98. - [Forum](https://forum.handsontable.com)
  99. - [Google group](https://groups.google.com/forum/#!forum/handsontable)
  100. - [GitHub](https://github.com/handsontable/handsontable/issues)
  101. - [Twitter](https://twitter.com/handsontable)
  102. ## Contributing
  103. If you would like to help us in writing the code, please take a look into [CONTRIBUTING.md](https://github.com/handsontable/handsontable/blob/master/CONTRIBUTING.md)
  104. ## Copyright and license
  105. Handsontable is released under the [MIT license](https://github.com/handsontable/handsontable/blob/master/LICENSE).
  106. Copyrights belong to Handsoncode sp. z o.o.