This repository has been archived by the owner on Mar 16, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
26 changed files
with
11,333 additions
and
8,173 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,73 +1,181 @@ | ||
| # angular-handsontable [](https://travis-ci.org/handsontable/angular-handsontable) | ||
| Official Angular module for [Handsontable](https://github.com/handsontable/handsontable). | ||
| <img src="https://raw.githubusercontent.com/handsontable/static-files/master/Images/Logo/Handsontable/handsontable-angular.png" alt="Handsontable for Angular" /> | ||
|
|
||
| <br/> | ||
|
|
||
| **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. | ||
|
|
||
| [](//travis-ci.org/handsontable/angular-handsontable) | ||
|
|
||
| <br/> | ||
|
|
||
| ## Table of contents | ||
|
|
||
| 1. [Installation](#installation) | ||
| 2. [Basic usage](#basic-usage) | ||
| 3. [Documentation](https://handsontable.github.io/angular-handsontable/) | ||
| 4. [License](#license) | ||
| 5. [Contact](#contact) | ||
| 6. [Other wrappers](#other-wrappers) | ||
| 2. [Getting Started](#getting-started) | ||
| 3. [Documentation](#documentation) | ||
| 4. [What to use it for?](#what-to-use-it-for) | ||
| 5. [Features](#features) | ||
| 6. [Screenshot](#screenshot) | ||
| 7. [Resources](#resources) | ||
| 8. [Support](#support) | ||
| 9. [Contributing](#contributing) | ||
| 10. [Licensing](#licensing) | ||
|
|
||
| ## Installation | ||
| To install a wrapper for Handsontable Community Edition (CE): | ||
| <br/> | ||
|
|
||
| ## Installation | ||
| Use npm to download the project. | ||
| ```bash | ||
| npm install handsontable @handsontable/angular | ||
| ``` | ||
| npm install @handsontable/angular handsontable | ||
| A package scope for Handsontable Pro users: | ||
| ```bash | ||
| npm install handsontable-pro @handsontable-pro/angular | ||
| ``` | ||
|
|
||
| To install a wrapper for Handsontable PRO: | ||
| ``` | ||
| npm install @handsontable-pro/angular handsontable-pro | ||
| ``` | ||
| <br/> | ||
|
|
||
| ## Getting Started | ||
| 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. | ||
|
|
||
| ## Basic usage | ||
| ### Handsontable Community Edition: | ||
|
|
||
| styles.css | ||
| ```scss | ||
| **Styles** | ||
| ```js | ||
| @import '~handsontable/dist/handsontable.full.css'; | ||
| ``` | ||
|
|
||
| app/app.module.ts | ||
| ```javascript | ||
| **Component** | ||
| ```js | ||
| import { BrowserModule } from '@angular/platform-browser'; | ||
| import { NgModule } from '@angular/core'; | ||
| import { AppComponent } from './app.component'; | ||
| import { HotTableModule } from '@handsontable/angular'; | ||
|
|
||
| @NgModule({ | ||
| declarations: [ | ||
| AppComponent | ||
| ], | ||
| imports: [ | ||
| BrowserModule, | ||
| HotTableModule.forRoot() | ||
| ], | ||
| providers: [], | ||
| bootstrap: [AppComponent] | ||
| }) | ||
| export class AppModule { } | ||
| ``` | ||
|
|
||
| **Template** | ||
| ```html | ||
| <hot-table></hot-table> | ||
| ``` | ||
|
|
||
| ### Handsontable Pro: | ||
|
|
||
| **Styles** | ||
| ```js | ||
| @import '~handsontable-pro/dist/handsontable.full.css'; | ||
| ``` | ||
|
|
||
| **Angular Component** | ||
| ```js | ||
| import { BrowserModule } from '@angular/platform-browser'; | ||
| import { NgModule } from '@angular/core'; | ||
| import { AppComponent } from './app.component'; | ||
| import { HotTableModule } from '@handsontable-pro/angular'; | ||
|
|
||
| @NgModule({ | ||
| declarations: [ | ||
| AppComponent | ||
| ], | ||
| imports: [ | ||
| BrowserModule, | ||
| HotTableModule | ||
| HotTableModule.forRoot() | ||
| ], | ||
| providers: [], | ||
| bootstrap: [AppComponent] | ||
| }) | ||
| export class AppModule { } | ||
| ``` | ||
|
|
||
| app/app.component.html | ||
| **Template** | ||
| ```html | ||
| <hot-table></hot-table> | ||
| ``` | ||
| ## Examples | ||
| - [A basic implementation for Handsontable CE](https://stackblitz.com/edit/angular-handsontable-ce) | ||
|
|
||
| ## License | ||
| @handsontable/angular is released under the [MIT license](https://github.com/handsontable/angular-handsontable/blob/master/LICENSE). | ||
| @handsontable-pro/angular is released under the [MIT license](https://github.com/handsontable/angular-handsontable/blob/master/LICENSE). | ||
| Copyrights belong to Handsoncode sp. z o.o. | ||
| <br/> | ||
|
|
||
| ## Documentation | ||
| Visit [docs.handsontable.com](https://docs.handsontable.com/angular) to get more Handsontable for Angular examples and guides. | ||
|
|
||
| <br/> | ||
|
|
||
| ## What to use it for? | ||
| The list below gives a rough idea on what you can do with Handsontable, but it shouldn't limit you in any way: | ||
|
|
||
| - Database editing | ||
| - Configuration controlling | ||
| - Data merging | ||
| - Team scheduling | ||
| - Sales reporting | ||
| - Financial analysis | ||
|
|
||
| <br/> | ||
|
|
||
| ## Features | ||
|
|
||
| ## Contact | ||
| Feel free to give us feedback on this wrapper using this [contact form](https://handsontable.com/contact.html). | ||
| Some of the most popular features include: | ||
|
|
||
| ## Other Wrappers | ||
| Handsontable is available for other popular frameworks: | ||
| - Sorting data | ||
| - Data validation | ||
| - Conditional formatting | ||
| - Freezing rows/columns | ||
| - Merging cells | ||
| - Defining custom cell types | ||
| - Moving rows/columns | ||
| - Resizing rows/columns | ||
| - Context menu | ||
| - Adding comments to cells | ||
| - Dragging fill handle to populate data | ||
| - Internationalization | ||
| - Non-contiguous selection | ||
|
|
||
| - [hot-table](https://github.com/handsontable/hot-table) (Polymer - WebComponents) | ||
| - [ngHandsontable](https://github.com/handsontable/ngHandsontable) (Angular 1) | ||
| - [vue-handsontable-official](https://github.com/handsontable/vue-handsontable-official) (Vue.js) | ||
| - [react-handsotable](https://github.com/handsontable/react-handsontable) (React) | ||
| <br/> | ||
|
|
||
| ## Screenshot | ||
| <div align="center"> | ||
| <a href="//handsontable.com/examples"> | ||
| <img src="https://raw.githubusercontent.com/handsontable/static-files/master/Images/Screenshots/handsontable-ce-showcase.png" align="center" alt="Handsontable for Angular" /> | ||
| </a> | ||
| </div> | ||
|
|
||
| <br/> | ||
|
|
||
| ## Resources | ||
| - [Guides](//docs.handsontable.com/angular) | ||
| - [API Reference](//docs.handsontable.com/Core.html) | ||
| - [Release notes](//github.com/handsontable/angular-handsontable/releases) | ||
| - [Roadmap](//trello.com/b/PztR4hpj) | ||
| - [Twitter](//twitter.com/handsontable) | ||
|
|
||
| <br/> | ||
|
|
||
| ## Support | ||
| You can report your issues here on [GitHub](//github.com/handsontable/angular-handsontable/issues). | ||
|
|
||
| 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. | ||
|
|
||
| <br/> | ||
|
|
||
| ## Contributing | ||
| 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. | ||
|
|
||
| <br/> | ||
|
|
||
| ## Licensing | ||
| This wrapper is released under [the MIT license](//github.com/handsontable/angular-handsontable/blob/master/LICENSE). | ||
|
|
||
| <br/> | ||
|
|
||
| Copyrights belong to Handsoncode sp. z o.o. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| <img src="https://raw.githubusercontent.com/handsontable/static-files/master/Images/Logo/Handsontable/handsontable-angular.png" alt="Handsontable Community Edition for Angular" /> | ||
|
|
||
| <br/> | ||
|
|
||
| **Handsontable Community Edition for Angular** is the official wrapper for [**Handsontable Community Edition**](//github.com/handsontable/handsontable), an open source 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. | ||
|
|
||
| [](//travis-ci.org/handsontable/angular-handsontable) | ||
|
|
||
| <br/> | ||
|
|
||
| ## Table of contents | ||
|
|
||
| 1. [Installation](#installation) | ||
| 2. [Getting Started](#getting-started) | ||
| 4. [Documentation](#documentation) | ||
| 5. [What to use it for?](#what-to-use-it-for) | ||
| 6. [Features](#features) | ||
| 7. [Screenshot](#screenshot) | ||
| 8. [Resources](#resources) | ||
| 9. [Support](#support) | ||
| 10. [Contributing](#contributing) | ||
| 11. [Licensing](#licensing) | ||
|
|
||
| <br/> | ||
|
|
||
| ## Installation | ||
| Use npm to download the project. | ||
| ```bash | ||
| npm install handsontable @handsontable/angular | ||
| ``` | ||
|
|
||
| <br/> | ||
|
|
||
| ## Getting Started | ||
| 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. | ||
|
|
||
| **Styles** | ||
| ```js | ||
| @import '~handsontable/dist/handsontable.full.css'; | ||
| ``` | ||
|
|
||
| **Angular Component** | ||
| ```js | ||
| import { BrowserModule } from '@angular/platform-browser'; | ||
| import { NgModule } from '@angular/core'; | ||
| import { AppComponent } from './app.component'; | ||
| import { HotTableModule } from '@handsontable/angular'; | ||
|
|
||
| @NgModule({ | ||
| declarations: [ | ||
| AppComponent | ||
| ], | ||
| imports: [ | ||
| BrowserModule, | ||
| HotTableModule.forRoot() | ||
| ], | ||
| providers: [], | ||
| bootstrap: [AppComponent] | ||
| }) | ||
| export class AppModule { } | ||
| ``` | ||
|
|
||
| **Template** | ||
| ```html | ||
| <hot-table></hot-table> | ||
| ``` | ||
|
|
||
| <br/> | ||
|
|
||
| ## Documentation | ||
| Visit [docs.handsontable.com](https://docs.handsontable.com/angular) to get more Handsontable for Angular examples and guides. | ||
|
|
||
| <br/> | ||
|
|
||
| ## What to use it for? | ||
| The list below gives a rough idea on what you can do with Handsontable, but it shouldn't limit you in any way: | ||
|
|
||
| - Database editing | ||
| - Configuration controlling | ||
| - Data merging | ||
| - Team scheduling | ||
| - Sales reporting | ||
| - Financial analysis | ||
|
|
||
| <br/> | ||
|
|
||
| ## Features | ||
|
|
||
| Some of the most popular features include: | ||
|
|
||
| - Sorting data | ||
| - Data validation | ||
| - Conditional formatting | ||
| - Freezing rows/columns | ||
| - Merging cells | ||
| - Defining custom cell types | ||
| - Moving rows/columns | ||
| - Resizing rows/columns | ||
| - Context menu | ||
| - Adding comments to cells | ||
| - Dragging fill handle to populate data | ||
| - Internationalization | ||
| - Non-contiguous selection | ||
|
|
||
| <br/> | ||
|
|
||
| ## Screenshot | ||
| <div align="center"> | ||
| <a href="//handsontable.com/examples"> | ||
| <img src="https://raw.githubusercontent.com/handsontable/static-files/master/Images/Screenshots/handsontable-ce-showcase.png" align="center" alt="Handsontable Community Edition for Angular" /> | ||
| </a> | ||
| </div> | ||
|
|
||
| <br/> | ||
|
|
||
| ## Resources | ||
| - [Guides](//docs.handsontable.com/angular) | ||
| - [API Reference](//docs.handsontable.com/Core.html) | ||
| - [Release notes](//github.com/handsontable/angular-handsontable/releases) | ||
| - [Roadmap](//trello.com/b/PztR4hpj) | ||
| - [Twitter](//twitter.com/handsontable) | ||
|
|
||
| <br/> | ||
|
|
||
| ## Support | ||
| You can report your issues here on [GitHub](//github.com/handsontable/angular-handsontable/issues). | ||
|
|
||
| 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. | ||
|
|
||
| <br/> | ||
|
|
||
| ## Contributing | ||
| 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. | ||
|
|
||
| <br/> | ||
|
|
||
| ## Licensing | ||
| This wrapper is released under [the MIT license](//github.com/handsontable/angular-handsontable/blob/master/LICENSE). | ||
|
|
||
| <br/> | ||
|
|
||
| Copyrights belong to Handsoncode sp. z o.o. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.