141 lines
5.8 KiB
Markdown
141 lines
5.8 KiB
Markdown
<div align="center">
|
|
|
|
<a href="https://handsontable.com" rel="nofollow"><img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/handsontable-logo-blue.svg" alt="Handsontable" width="300"></a>
|
|
|
|
Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX. <br>
|
|
It provides data binding, data validation, filtering, sorting, and CRUD operations.
|
|
|
|
[](https://npmjs.com/package/handsontable)
|
|
[](https://npmjs.com/package/handsontable)
|
|
[](https://github.com/handsontable/handsontable/actions/workflows/test.yml?query=branch%3Amaster)
|
|
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fhandsontable%2Fhandsontable?ref=badge_shield)
|
|
[](https://sonarcloud.io/dashboard?id=handsontable_handsontable)
|
|
|
|
---
|
|
#### Get Started with Handsontable
|
|
|
|
<table border="0">
|
|
<tr>
|
|
<td>
|
|
<img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/icons/react-icon.svg" width="14" height="14">
|
|
<a href="https://github.com/handsontable/handsontable/tree/master/wrappers/react"> <strong>React</strong></a>
|
|
</td>
|
|
<td>
|
|
<img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/icons/angular-icon.svg" width="14" height="14">
|
|
<a href="https://github.com/handsontable/handsontable/tree/master/wrappers/angular"> <strong>Angular</strong></a>
|
|
</td>
|
|
<td>
|
|
<img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/icons/vue-icon.svg" width="14" height="14">
|
|
<a href="https://github.com/handsontable/handsontable/tree/master/wrappers/vue"> <strong>Vue</strong></a>
|
|
</td>
|
|
<td>
|
|
<img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/icons/vue-icon.svg" width="14" height="14">
|
|
<a href="https://github.com/handsontable/handsontable/tree/master/wrappers/vue3"> <strong>Vue 3</strong></a>
|
|
</td>
|
|
<td>
|
|
<img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/icons/javascript-icon.svg" width="14" height="14">
|
|
<a href="#installation"> <strong>JavaScript</strong></a>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
---
|
|
|
|
<a href="https://handsontable.com/demo"><img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/handsontable-github-preview.png" alt="Handsontable data grid" width="805"/></a>
|
|
|
|
</div>
|
|
|
|
## Features
|
|
|
|
The most popular features of Handsontable:
|
|
|
|
✓ Multiple column sorting <br>
|
|
✓ Non-contiguous selection <br>
|
|
✓ Filtering data <br>
|
|
✓ Export to file <br>
|
|
✓ Validating data <br>
|
|
✓ Conditional formatting <br>
|
|
✓ Merging cells <br>
|
|
✓ Freezing rows/columns <br>
|
|
✓ Moving rows/columns <br>
|
|
✓ Resizing rows/columns <br>
|
|
✓ Hiding rows/columns <br>
|
|
✓ Context menu <br>
|
|
✓ Comments <br>
|
|
|
|
## Documentation
|
|
|
|
- [Developer guides](https://handsontable.com/docs)
|
|
- [API Reference](https://handsontable.com/docs/api/core/)
|
|
- [Changelog](https://handsontable.com/docs/release-notes/)
|
|
- [Demo](https://handsontable.com/demo)
|
|
|
|
<div id="installation"></div>
|
|
|
|
## Get Started
|
|
### Install with npm
|
|
|
|
Run the following command in your terminal
|
|
```
|
|
npm install handsontable
|
|
```
|
|
|
|
You can also use [Yarn](https://yarnpkg.com/package/handsontable), [NuGet](https://www.nuget.org/packages/Handsontable) or load the bundle directly from [jsDelivr](https://jsdelivr.com/package/npm/handsontable).
|
|
|
|
### Create a placeholder
|
|
|
|
Create an HTML placeholder
|
|
|
|
```html
|
|
<div id="example"></div>
|
|
```
|
|
|
|
Import Handsontable and its stylesheet
|
|
```js
|
|
import Handsontable from "handsontable";
|
|
import 'handsontable/dist/handsontable.full.css';
|
|
```
|
|
|
|
### Initialize the grid
|
|
|
|
Now turn your placeholder into a data grid with sample data.
|
|
```js
|
|
const data = [
|
|
['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
|
|
['2019', 10, 11, 12, 13],
|
|
['2020', 20, 11, 14, 13],
|
|
['2021', 30, 15, 12, 13]
|
|
];
|
|
|
|
const container = document.getElementById('example');
|
|
const hot = new Handsontable(container, {
|
|
data: data,
|
|
rowHeaders: true,
|
|
colHeaders: true
|
|
});
|
|
```
|
|
|
|
## Support
|
|
|
|
We provide support for developers working with commercial version via [contact form](https://handsontable.com/contact?category=technical_support)</a> or at support@handsontable.com.
|
|
|
|
If you use a non-commercial version then please ask your tagged question on [StackOverflow](https://stackoverflow.com/questions/tagged/handsontable).
|
|
|
|
## License
|
|
|
|
Handsontable is a commercial software with two licenses available:
|
|
|
|
- Free for non-commercial purposes such as teaching, academic research, and evaluation. [Read it here](https://github.com/handsontable/handsontable/blob/master/handsontable-non-commercial-license.pdf).
|
|
- Commercial license with support and maintenance included. See [pricing plans](https://handsontable.com/pricing).
|
|
|
|
## License key
|
|
|
|
If you use Handsontable in a project that supports your commercial activity, then you must purchase the license key at [handsontable.com](https://handsontable.com/pricing).
|
|
|
|
If you use the free for non-commercial license of Handsontable, then pass the phrase `'non-commercial-and-evaluation'`, as described in [this documentation](https://handsontable.com/docs/license-key/).
|
|
|
|
<br>
|
|
<br>
|
|
|
|
Proudly created and maintained by the [Handsontable Team](https://handsontable.com/team).
|