{"id":13787050,"url":"https://github.com/handsontable/angular-handsontable","last_synced_at":"2025-05-12T00:30:39.867Z","repository":{"id":53747855,"uuid":"83674511","full_name":"handsontable/angular-handsontable","owner":"handsontable","description":"Angular Data Grid with Spreadsheet Look \u0026 Feel. Official Angular wrapper for Handsontable.","archived":true,"fork":false,"pushed_at":"2021-03-16T11:33:36.000Z","size":1719,"stargazers_count":173,"open_issues_count":0,"forks_count":43,"subscribers_count":28,"default_branch":"master","last_synced_at":"2025-04-19T05:16:58.753Z","etag":null,"topics":["angular","data-grid","data-table","dynamic-table","excel","grid","grid-editor","spreadsheet","table"],"latest_commit_sha":null,"homepage":"https://handsontable.com/docs/angular","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/handsontable.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-02T12:19:27.000Z","updated_at":"2023-09-10T08:51:36.000Z","dependencies_parsed_at":"2022-09-03T08:43:51.712Z","dependency_job_id":null,"html_url":"https://github.com/handsontable/angular-handsontable","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/handsontable%2Fangular-handsontable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/handsontable%2Fangular-handsontable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/handsontable%2Fangular-handsontable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/handsontable%2Fangular-handsontable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/handsontable","download_url":"https://codeload.github.com/handsontable/angular-handsontable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253655756,"owners_count":21943068,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","data-grid","data-table","dynamic-table","excel","grid","grid-editor","spreadsheet","table"],"created_at":"2024-08-03T20:00:25.737Z","updated_at":"2025-05-12T00:30:39.269Z","avatar_url":"https://github.com/handsontable.png","language":"TypeScript","readme":"# Important information\n\n## We permanently moved this project to the main Handsontable repository at [https://github.com/handsontable/handsontable/tree/master/wrappers/angular](https://github.com/handsontable/handsontable/tree/master/wrappers/angular)\n\n## It is still available under the same name in npm: [`@handsontable/angular`](https://www.npmjs.com/package/@handsontable/angular), so you don't have to update your dependency configuration.\n\n---------\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \n![Handsontable for Angular](https://raw.githubusercontent.com/handsontable/static-files/master/Images/Logo/Handsontable/handsontable-angular.png)\n\nThis is the official wrapper of [**Handsontable**](//github.com/handsontable/handsontable) data grid for Angular.\u003cbr\u003e\nIt provides data binding, data validation, filtering, sorting and more.\u003cbr\u003e\n\n[![npm](https://img.shields.io/npm/dt/@handsontable/angular.svg)](//npmjs.com/package/@handsontable/angular)\n[![npm](https://img.shields.io/npm/dm/@handsontable/angular.svg)](//npmjs.com/package/@handsontable/angular)\n[![Build status](https://travis-ci.org/handsontable/angular-handsontable.png?branch=master)](//travis-ci.org/handsontable/angular-handsontable)\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"//handsontable.com/docs/frameworks-wrapper-for-angular-simple-example.html\"\u003e\n\u003cimg 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\"/\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n## Installation\n\nUse npm to install this wrapper together with Handsontable.\n```\nnpm install handsontable @handsontable/angular\n```\n\nYou can load it directly from [jsDelivr](//jsdelivr.com/package/npm/@handsontable/angular) as well.\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@handsontable/angular/bundles/handsontable-angular.umd.min.js\"\u003e\u003c/script\u003e\n\n\u003clink href=\"https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css\" rel=\"stylesheet\"\u003e\n```\n\nThe component will be available as `Handsontable.angular.HotTable`.\n\n## Usage\n\nUse this data grid as you would any other component in your application. [Options](//handsontable.com/docs/Options.html) can be set as `HotTable` props.\n\n**Styles**\n```css\n@import '~handsontable/dist/handsontable.full.css';\n```\n\n**Angular Module**\n```js\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { AppComponent } from './app.component';\nimport { HotTableModule } from '@handsontable/angular';\n \n@NgModule({\n  imports: [\n    BrowserModule,\n    HotTableModule.forRoot()\n  ],\n  declarations: [ AppComponent ],\n  bootstrap: [ AppComponent ],\n})\nexport class AppModule { }\n```\n\n**Angular Component**\n```js\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'my-app',\n  templateUrl: './app.component.html',\n  styleUrls: [ './app.component.css' ],\n})\nexport class AppComponent  {\n  data: any[] = [\n    ['', 'Tesla', 'Mercedes', 'Toyota', 'Volvo'],\n    ['2019', 10, 11, 12, 13],\n    ['2020', 20, 11, 14, 13],\n    ['2021', 30, 15, 12, 13]\n  ],\n}\n```\n\n**Template**\n\n```html\n\u003chot-table [data]=\"data\" [colHeaders]=\"true\" [rowHeaders]=\"true\" [width]=\"600\" [height]=\"300\"\u003e\u003c/hot-table\u003e\n```\n\n##### [See the live demo](//handsontable.com/docs/frameworks-wrapper-for-angular-simple-example.html)\n\n## Features\n\nA list of some of the most popular features:\n\n- Multiple column sorting\n- Non-contiguous selection\n- Filtering data\n- Export to file\n- Validating data\n- Conditional formatting\n- Merging cells\n- Custom cell types\n- Freezing rows/columns\n- Moving rows/columns\n- Resizing rows/columns\n- Hiding rows/columns\n- Context menu\n- Comments\n- Auto-fill option\n\n## Documentation\n\n- [Developer guides](//handsontable.com/docs/angular)\n- [API Reference](//handsontable.com/docs/Core.html)\n- [Release notes](//handsontable.com/docs/tutorial-release-notes.html)\n- [Twitter](//twitter.com/handsontable) (News and updates)\n\n## Support and contribution\n\nWe 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).\n\nIf 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).\n\n## Browser compatibility\n\nHandsontable 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.\n\n## License\n\nThis 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.\n\n\u003ctable\u003e\n  \u003cthead align=\"center\"\u003e\n    \u003ctr\u003e\n      \u003cth width=\"50%\"\u003eFree license\u003c/th\u003e\n      \u003cth width=\"50%\"\u003ePaid license\u003c/th\u003e\n    \u003c/tr\u003e    \n  \u003c/thead\u003e\n  \u003ctbody align=\"center\"\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eFor non-commercial purposes such as teaching, academic research, personal experimentation, and evaluating  on development and testing servers.\u003c/td\u003e\n      \u003ctd\u003eFor all commercial purposes\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eAll features are available\u003c/td\u003e\n      \u003ctd\u003eAll features are available\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eCommunity support\u003c/td\u003e\n      \u003ctd\u003eDedicated support\u003c/td\u003e\n    \u003c/tr\u003e    \n    \u003ctr\u003e\n      \u003ctd\u003e\u003ca href=\"//github.com/handsontable/handsontable/blob/master/handsontable-non-commercial-license.pdf\"\u003eRead the license\u003c/a\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ca href=\"//handsontable.com/pricing\"\u003eSee plans\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## License key\n\n**The license key is obligatory since [Handsontable 7.0.0](//github.com/handsontable/handsontable/releases/tag/7.0.0) (released in March 2019).**\n\nIf 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. \n\nYou can pass it in the `settings` object: \n\n```js\nsettings: {\n  data: data,\n  rowHeaders: true,\n  colHeaders: true,\n  licenseKey: 'non-commercial-and-evaluation'\n}\n```\n\nAlternatively, you can pass it to a `licenseKey` prop:\n\n```html\n\u003chot-table [settings]=\"settings\" [licenseKey]=\"00000-00000-00000-00000-00000\"\u003e\u003c/hot-table\u003e\n```\n\nIf, 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).\n\nThe 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.\n\n\u003cbr\u003e\n\u003cbr\u003e\n\nCreated by [Handsoncode](//handsoncode.net) with ❤ and ☕ in [Tricity](//en.wikipedia.org/wiki/Tricity,_Poland).\n","funding_links":[],"categories":["Dependencies"],"sub_categories":["Forms"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhandsontable%2Fangular-handsontable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhandsontable%2Fangular-handsontable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhandsontable%2Fangular-handsontable/lists"}