|
1 |
| -<img src="https://raw.githubusercontent.com/handsontable/static-files/master/Images/Logo/Handsontable/handsontable-angular.png" alt="Handsontable for Angular" /> |
2 |
| - |
3 |
| -<br/> |
| 1 | +<div align="center"> |
| 2 | + |
| 3 | + |
4 | 4 |
|
5 |
| -**Handsontable for Angular** is the official wrapper for [**Handsontable**](//github.com/handsontable/handsontable), a JavaScript data grid component with a spreadsheet look & feel. It easily integrates with any data source and comes with lots of useful features like data binding, validation, sorting or powerful context menu. |
| 5 | +This is the official wrapper of [**Handsontable**](//github.com/handsontable/handsontable) data grid for Angular.<br> |
| 6 | +It provides data binding, data validation, filtering, sorting and more.<br> |
6 | 7 |
|
| 8 | +[](//npmjs.com/package/@handsontable/angular) |
| 9 | +[](//npmjs.com/package/@handsontable/angular) |
7 | 10 | [](//travis-ci.org/handsontable/angular-handsontable)
|
| 11 | +</div> |
8 | 12 |
|
9 |
| -<br/> |
10 |
| - |
11 |
| -## Table of contents |
| 13 | +<br> |
12 | 14 |
|
13 |
| -1. [Installation](#installation) |
14 |
| -2. [Getting Started](#getting-started) |
15 |
| -3. [Documentation](#documentation) |
16 |
| -4. [What to use it for?](#what-to-use-it-for) |
17 |
| -5. [Features](#features) |
18 |
| -6. [Screenshot](#screenshot) |
19 |
| -7. [Resources](#resources) |
20 |
| -8. [Support](#support) |
21 |
| -9. [Contributing](#contributing) |
22 |
| -10. [Licensing](#licensing) |
| 15 | +<div align="center"> |
| 16 | +<a href="//handsontable.com/docs/frameworks-wrapper-for-angular-simple-example.html"> |
| 17 | +<img src="https://raw.githubusercontent.com/handsontable/static-files/master/Images/Screenshots/handsontable-screenshot-new.png" align="center" alt="A screenshot of a data grid for Angular"/> |
| 18 | +</a> |
| 19 | +</div> |
23 | 20 |
|
24 |
| -<br/> |
| 21 | +<br> |
25 | 22 |
|
26 | 23 | ## Installation
|
27 |
| -Use npm to download the project. |
28 |
| -```bash |
| 24 | + |
| 25 | +Use npm to install this wrapper together with Handsontable. |
| 26 | +``` |
29 | 27 | npm install handsontable @handsontable/angular
|
30 | 28 | ```
|
31 |
| -A package scope for Handsontable Pro users: |
32 |
| -```bash |
33 |
| -npm install handsontable-pro @handsontable-pro/angular |
| 29 | + |
| 30 | +You can load it directly from [jsDelivr](//jsdelivr.com/package/npm/@handsontable/angular) as well. |
| 31 | +```html |
| 32 | +<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script> |
| 33 | +<script src="https://cdn.jsdelivr.net/npm/@handsontable/angular/dist/bundles/handsontable-pro.umd.min.js"></script> |
| 34 | + |
| 35 | +<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet"> |
34 | 36 | ```
|
35 | 37 |
|
36 |
| -<br/> |
| 38 | +The component will be available as `Handsontable.angular.HotTable`. |
37 | 39 |
|
38 |
| -## Getting Started |
39 |
| -Assuming that you have installed the wrapper with npm, now you just need to include Handsontable styles into your build system and use `<hot-table>` just like any other Angular component. |
| 40 | +## Usage |
40 | 41 |
|
41 |
| -### Handsontable Community Edition: |
| 42 | +Use this data grid as you would any other component in your application. [Options](//handsontable.com/docs/Options.html) can be set as `HotTable` props. |
42 | 43 |
|
43 | 44 | **Styles**
|
44 |
| -```js |
| 45 | +```css |
45 | 46 | @import '~handsontable/dist/handsontable.full.css';
|
46 | 47 | ```
|
47 | 48 |
|
48 |
| -**Component** |
| 49 | +**Angular Module** |
49 | 50 | ```js
|
50 | 51 | import { BrowserModule } from '@angular/platform-browser';
|
51 | 52 | import { NgModule } from '@angular/core';
|
52 | 53 | import { AppComponent } from './app.component';
|
53 | 54 | import { HotTableModule } from '@handsontable/angular';
|
54 | 55 |
|
55 | 56 | @NgModule({
|
56 |
| - declarations: [ |
57 |
| - AppComponent |
58 |
| - ], |
59 | 57 | imports: [
|
60 | 58 | BrowserModule,
|
61 | 59 | HotTableModule.forRoot()
|
62 | 60 | ],
|
63 |
| - providers: [], |
64 |
| - bootstrap: [AppComponent] |
| 61 | + declarations: [ AppComponent ], |
| 62 | + bootstrap: [ AppComponent ], |
65 | 63 | })
|
66 | 64 | export class AppModule { }
|
67 | 65 | ```
|
68 | 66 |
|
69 |
| -**Template** |
70 |
| -```html |
71 |
| -<hot-table></hot-table> |
72 |
| -``` |
73 |
| - |
74 |
| -### Handsontable Pro: |
75 |
| - |
76 |
| -**Styles** |
77 |
| -```js |
78 |
| -@import '~handsontable-pro/dist/handsontable.full.css'; |
79 |
| -``` |
80 |
| - |
81 | 67 | **Angular Component**
|
82 | 68 | ```js
|
83 |
| -import { BrowserModule } from '@angular/platform-browser'; |
84 |
| -import { NgModule } from '@angular/core'; |
85 |
| -import { AppComponent } from './app.component'; |
86 |
| -import { HotTableModule } from '@handsontable-pro/angular'; |
87 |
| - |
88 |
| -@NgModule({ |
89 |
| - declarations: [ |
90 |
| - AppComponent |
91 |
| - ], |
92 |
| - imports: [ |
93 |
| - BrowserModule, |
94 |
| - HotTableModule.forRoot() |
95 |
| - ], |
96 |
| - providers: [], |
97 |
| - bootstrap: [AppComponent] |
| 69 | +import { Component } from '@angular/core'; |
| 70 | + |
| 71 | +@Component({ |
| 72 | + selector: 'my-app', |
| 73 | + templateUrl: './app.component.html', |
| 74 | + styleUrls: [ './app.component.css' ], |
98 | 75 | })
|
99 |
| -export class AppModule { } |
| 76 | +export class AppComponent { |
| 77 | + data: any[] = [ |
| 78 | + ['', 'Tesla', 'Mercedes', 'Toyota', 'Volvo'], |
| 79 | + ['2019', 10, 11, 12, 13], |
| 80 | + ['2020', 20, 11, 14, 13], |
| 81 | + ['2021', 30, 15, 12, 13] |
| 82 | + ], |
| 83 | +} |
100 | 84 | ```
|
101 | 85 |
|
102 | 86 | **Template**
|
| 87 | + |
103 | 88 | ```html
|
104 |
| -<hot-table></hot-table> |
| 89 | +<hot-table [data]="data" [colHeaders]="true" [rowHeaders]="true" [width]="600" [height]="300"></hot-table> |
105 | 90 | ```
|
106 | 91 |
|
107 |
| -<br/> |
108 |
| - |
109 |
| -## Documentation |
110 |
| -Visit [handsontable.com/docs](https://handsontable.com/docs/angular) to get more Handsontable for Angular examples and guides. |
111 |
| - |
112 |
| -<br/> |
113 |
| - |
114 |
| -## What to use it for? |
115 |
| -The list below gives a rough idea on what you can do with Handsontable, but it shouldn't limit you in any way: |
116 |
| - |
117 |
| -- Database editing |
118 |
| -- Configuration controlling |
119 |
| -- Data merging |
120 |
| -- Team scheduling |
121 |
| -- Sales reporting |
122 |
| -- Financial analysis |
123 |
| - |
124 |
| -<br/> |
| 92 | +##### [See the live demo](//handsontable.com/docs/frameworks-wrapper-for-angular-simple-example.html) |
125 | 93 |
|
126 | 94 | ## Features
|
127 | 95 |
|
128 |
| -Some of the most popular features include: |
| 96 | +A list of some of the most popular features: |
129 | 97 |
|
130 |
| -- Sorting data |
131 |
| -- Data validation |
| 98 | +- Multiple column sorting |
| 99 | +- Non-contiguous selection |
| 100 | +- Filtering data |
| 101 | +- Export to file |
| 102 | +- Validating data |
132 | 103 | - Conditional formatting
|
133 |
| -- Freezing rows/columns |
134 | 104 | - Merging cells
|
135 |
| -- Defining custom cell types |
| 105 | +- Custom cell types |
| 106 | +- Freezing rows/columns |
136 | 107 | - Moving rows/columns
|
137 | 108 | - Resizing rows/columns
|
| 109 | +- Hiding rows/columns |
138 | 110 | - Context menu
|
139 |
| -- Adding comments to cells |
140 |
| -- Dragging fill handle to populate data |
141 |
| -- Internationalization |
142 |
| -- Non-contiguous selection |
| 111 | +- Comments |
| 112 | +- Auto-fill option |
143 | 113 |
|
144 |
| -<br/> |
| 114 | +## Documentation |
145 | 115 |
|
146 |
| -## Screenshot |
147 |
| -<div align="center"> |
148 |
| -<a href="//handsontable.com/examples"> |
149 |
| -<img src="https://raw.githubusercontent.com/handsontable/static-files/master/Images/Screenshots/handsontable-ce-showcase.png" align="center" alt="Handsontable for Angular" /> |
150 |
| -</a> |
151 |
| -</div> |
| 116 | +- [Developer guides](//handsontable.com/docs/angular) |
| 117 | +- [API Reference](//handsontable.com/docs/Core.html) |
| 118 | +- [Release notes](//handsontable.com/docs/tutorial-release-notes.html) |
| 119 | +- [Twitter](//twitter.com/handsontable) (News and updates) |
152 | 120 |
|
153 |
| -<br/> |
| 121 | +## Support and contribution |
154 | 122 |
|
155 |
| -## Resources |
156 |
| -- [Guides](//handsontable.com/docs/angular) |
157 |
| -- [API Reference](//handsontable.com/docs/Core.html) |
158 |
| -- [Release notes](//github.com/handsontable/angular-handsontable/releases) |
159 |
| -- [Roadmap](//trello.com/b/PztR4hpj) |
160 |
| -- [Twitter](//twitter.com/handsontable) |
| 123 | +We provide support for all users through [GitHub issues](//github.com/handsontable/angular-handsontable/issues). If you have a commercial license then you can add a new ticket through the [contact form](//handsontable.com/contact?category=technical_support). |
| 124 | + |
| 125 | +If you would like to contribute to this project, make sure you first read the [guide for contributors](//github.com/handsontable/angular-handsontable/blob/master/CONTRIBUTING.md). |
| 126 | + |
| 127 | +## Browser compatibility |
| 128 | + |
| 129 | +Handsontable is compatible with modern browsers such as Chrome, Firefox, Safari, Opera, and Edge. It also supports Internet Explorer 9 to 11 but with limited performance. |
| 130 | + |
| 131 | +## License |
161 | 132 |
|
162 |
| -<br/> |
| 133 | +This wrapper is released under [the MIT license](//github.com/handsontable/angular-handsontable/blob/master/LICENSE) but under the hood it uses [Handsontable](//github.com/handsontable/handsontable), which is dual-licensed. You can either use it for free in all your non-commercial projects or purchase a commercial license. |
163 | 134 |
|
164 |
| -## Support |
165 |
| -You can report your issues here on [GitHub](//github.com/handsontable/angular-handsontable/issues). |
| 135 | +<table> |
| 136 | + <thead align="center"> |
| 137 | + <tr> |
| 138 | + <th width="50%">Free license</th> |
| 139 | + <th width="50%">Paid license</th> |
| 140 | + </tr> |
| 141 | + </thead> |
| 142 | + <tbody align="center"> |
| 143 | + <tr> |
| 144 | + <td>For non-commercial purposes such as teaching, academic research, personal experimentation, and evaluating on development and testing servers.</td> |
| 145 | + <td>For all commercial purposes</td> |
| 146 | + </tr> |
| 147 | + <tr> |
| 148 | + <td>All features are available</td> |
| 149 | + <td>All features are available</td> |
| 150 | + </tr> |
| 151 | + <tr> |
| 152 | + <td>Community support</td> |
| 153 | + <td>Dedicated support</td> |
| 154 | + </tr> |
| 155 | + <tr> |
| 156 | + <td><a href="//github.com/handsontable/handsontable/blob/master/handsontable-non-commercial-license.pdf">Read the license</a></td> |
| 157 | + <td><a href="//handsontable.com/pricing">See plans</a></td> |
| 158 | + </tr> |
| 159 | + </tbody> |
| 160 | +</table> |
166 | 161 |
|
167 |
| -An open source version of Handsontable doesn't include technical support. You need to purchase the [Handsontable Pro](//handsontable.com/pricing) license or [contact us](//handsontable.com/contact) directly in order to obtain a technical support from the Handsontable team. |
| 162 | +## License key |
168 | 163 |
|
169 |
| -<br/> |
| 164 | +**The license key is obligatory since [Handsontable 7.0.0](//github.com/handsontable/handsontable/releases/tag/7.0.0) (released in March 2019).** |
170 | 165 |
|
171 |
| -## Contributing |
172 |
| -If you would like to help us to develop this wrapper for Angular, please read the [guide for contributors](//github.com/handsontable/angular-handsontable/blob/master/CONTRIBUTING.md) first. |
| 166 | +If you use Handsontable for purposes not intended toward monetary compensation such as, but not limited to, teaching, academic research, evaluation, testing and experimentation, pass the phrase `'non-commercial-and-evaluation'`, as presented below. |
| 167 | + |
| 168 | +You can pass it in the `settings` object: |
| 169 | + |
| 170 | +```js |
| 171 | +settings: { |
| 172 | + data: data, |
| 173 | + rowHeaders: true, |
| 174 | + colHeaders: true, |
| 175 | + licenseKey: 'non-commercial-and-evaluation' |
| 176 | +} |
| 177 | +``` |
| 178 | + |
| 179 | +Alternatively, you can pass it to a `licenseKey` prop: |
| 180 | + |
| 181 | +```html |
| 182 | +<hot-table [settings]="settings" [licenseKey]="00000-00000-00000-00000-00000"></hot-table> |
| 183 | +``` |
173 | 184 |
|
174 |
| -<br/> |
| 185 | +If, on the other hand, you use Handsontable in a project that supports your commercial activity, then you must purchase the license key at [handsontable.com](//handsontable.com/pricing). |
175 | 186 |
|
176 |
| -## Licensing |
177 |
| -This wrapper is released under [the MIT license](//github.com/handsontable/angular-handsontable/blob/master/LICENSE). |
| 187 | +The license key is validated in an offline mode. No connection is made to any server. [Learn more](//handsontable.com/docs/tutorial-license-key.html) about how it works. |
178 | 188 |
|
179 |
| -<br/> |
| 189 | +<br> |
| 190 | +<br> |
180 | 191 |
|
181 |
| -Copyrights belong to Handsoncode sp. z o.o. |
| 192 | +Created by [Handsoncode](//handsoncode.net) with ❤ and ☕ in [Tricity](//en.wikipedia.org/wiki/Tricity,_Poland). |
0 commit comments