Skip to content
This repository was archived by the owner on Mar 16, 2021. It is now read-only.

Commit 0a8c2bc

Browse files
authored
Merge angular-handsontable packages into one (#147)
* Changes for Handsontable 7.0.0. One component, one configuration, one stack. #142 * Renamed project/pro into project/hot-table. #142 * Added renamed files. #142 * Small changes in dir path. #142 * Bumped Handsontable version. #142
1 parent bc6c406 commit 0a8c2bc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+2925
-12558
lines changed

CONTRIBUTING.md

+3-9
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
# Contributing to Handsontable
1+
# Contributing to Handsontable for Angular
22

33
Your contributions to this project are very welcome. If you want to fix a bug or propose a new feature, you can open a new Pull Request but first make sure it follows these general rules:
44

55
1. Sign this [Contributor License Agreement](https://goo.gl/forms/yuutGuN0RjsikVpM2) to allow us to publish your changes to the code.
66
2. Make your changes on a separate branch. This will speed up the merging process.
77
3. Always make the target of your pull request the `develop` branch, not `master`.
8-
4. Do not edit files in dist/ directory.
9-
5. **Important: For any change you make, please add at least one test case** in `tests/`. That will help us understand the issue and make sure that it stays fixed forever.
10-
6. Please review our [coding style](https://github.com/handsontable/handsontable/wiki/Coding-style) for instructions on how to properly style the code.
11-
7. Add a thorough description of all the changes.
8+
4. Please review our [coding style](https://github.com/airbnb/javascript) for instructions on how to properly style the code.
9+
5. Add a thorough description of all the changes.
1210

1311
Thank you for your commitment!
14-
15-
## Team rules
16-
17-
The Handsontable team utilizes Git-Flow. Read more - [How we use Git-Flow](https://github.com/handsontable/handsontable/wiki/How-we-use-Git-Flow)

LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,4 @@ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
1919
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
2020
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
2121
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
22-
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
22+
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

+127-116
Original file line numberDiff line numberDiff line change
@@ -1,181 +1,192 @@
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+
![Handsontable for Angular](https://raw.githubusercontent.com/handsontable/static-files/master/Images/Logo/Handsontable/handsontable-angular.png)
44

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>
67

8+
[![npm](https://img.shields.io/npm/dt/@handsontable/angular.svg)](//npmjs.com/package/@handsontable/angular)
9+
[![npm](https://img.shields.io/npm/dm/@handsontable/angular.svg)](//npmjs.com/package/@handsontable/angular)
710
[![Build status](https://travis-ci.org/handsontable/angular-handsontable.png?branch=master)](//travis-ci.org/handsontable/angular-handsontable)
11+
</div>
812

9-
<br/>
10-
11-
## Table of contents
13+
<br>
1214

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>
2320

24-
<br/>
21+
<br>
2522

2623
## Installation
27-
Use npm to download the project.
28-
```bash
24+
25+
Use npm to install this wrapper together with Handsontable.
26+
```
2927
npm install handsontable @handsontable/angular
3028
```
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">
3436
```
3537

36-
<br/>
38+
The component will be available as `Handsontable.angular.HotTable`.
3739

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
4041

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

4344
**Styles**
44-
```js
45+
```css
4546
@import '~handsontable/dist/handsontable.full.css';
4647
```
4748

48-
**Component**
49+
**Angular Module**
4950
```js
5051
import { BrowserModule } from '@angular/platform-browser';
5152
import { NgModule } from '@angular/core';
5253
import { AppComponent } from './app.component';
5354
import { HotTableModule } from '@handsontable/angular';
5455

5556
@NgModule({
56-
declarations: [
57-
AppComponent
58-
],
5957
imports: [
6058
BrowserModule,
6159
HotTableModule.forRoot()
6260
],
63-
providers: [],
64-
bootstrap: [AppComponent]
61+
declarations: [ AppComponent ],
62+
bootstrap: [ AppComponent ],
6563
})
6664
export class AppModule { }
6765
```
6866

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-
8167
**Angular Component**
8268
```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' ],
9875
})
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+
}
10084
```
10185

10286
**Template**
87+
10388
```html
104-
<hot-table></hot-table>
89+
<hot-table [data]="data" [colHeaders]="true" [rowHeaders]="true" [width]="600" [height]="300"></hot-table>
10590
```
10691

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)
12593

12694
## Features
12795

128-
Some of the most popular features include:
96+
A list of some of the most popular features:
12997

130-
- Sorting data
131-
- Data validation
98+
- Multiple column sorting
99+
- Non-contiguous selection
100+
- Filtering data
101+
- Export to file
102+
- Validating data
132103
- Conditional formatting
133-
- Freezing rows/columns
134104
- Merging cells
135-
- Defining custom cell types
105+
- Custom cell types
106+
- Freezing rows/columns
136107
- Moving rows/columns
137108
- Resizing rows/columns
109+
- Hiding rows/columns
138110
- 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
143113

144-
<br/>
114+
## Documentation
145115

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)
152120

153-
<br/>
121+
## Support and contribution
154122

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
161132

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

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>
166161

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
168163

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).**
170165

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+
```
173184

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).
175186

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

179-
<br/>
189+
<br>
190+
<br>
180191

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

Comments
 (0)