{"id":13480775,"url":"https://github.com/valor-software/ng2-handsontable","last_synced_at":"2025-04-04T22:07:32.946Z","repository":{"id":57742095,"uuid":"42571939","full_name":"valor-software/ng2-handsontable","owner":"valor-software","description":"Angular 2 directive for Handsontable","archived":false,"fork":false,"pushed_at":"2018-07-05T07:38:18.000Z","size":7951,"stargazers_count":274,"open_issues_count":45,"forks_count":93,"subscribers_count":28,"default_branch":"master","last_synced_at":"2024-11-03T16:12:09.357Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://valor-software.github.io/ng2-handsontable/","language":"TypeScript","has_issues":true,"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/valor-software.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-16T07:32:06.000Z","updated_at":"2024-07-12T00:32:10.000Z","dependencies_parsed_at":"2022-09-05T17:00:33.795Z","dependency_job_id":null,"html_url":"https://github.com/valor-software/ng2-handsontable","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valor-software%2Fng2-handsontable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valor-software%2Fng2-handsontable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valor-software%2Fng2-handsontable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valor-software%2Fng2-handsontable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/valor-software","download_url":"https://codeload.github.com/valor-software/ng2-handsontable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256112,"owners_count":20909240,"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":[],"created_at":"2024-07-31T17:00:44.846Z","updated_at":"2025-04-04T22:07:32.922Z","avatar_url":"https://github.com/valor-software.png","language":"TypeScript","readme":"# ng2-handsontable\n\nNative Angular2+ wrapper for [Handsontable](https://github.com/handsontable/handsontable).\n\n[Handsontable](https://github.com/handsontable/handsontable) is a data grid component with an Excel-like appearance. Built in JavaScript, it integrates with any data source and comes with [features](http://docs.handsontable.com/tutorial-features.html) like data validation, sorting, grouping, data binding or column ordering. Actively supported by the Handsoncode team and the GitHub community.\n\n- - -\n\n\n## Quick start\n\n1. Add ***ng2-handsontable*** to your package.json or install with `npm i ng2-handsontable --save`. **The latest version of ng2-handsontable only works for Angular5+. For Angular2 or Angular4 use ng2-handsontable@2.**\n\n2. If you are using SystemJS, add the ng2-handsontable path to your SystemJS.config.js: `'ng2-handsontable': 'node_modules/ng2-handsontable/bundles/ng2-handsontable.umd.js'`. Webpack (used by Angular-CLI) picks up the path automatically.\n\n3. Import the `HotTableModule` into your module. Here's a TypeScript example:\n\n```typescript\nimport { HotTableModule } from 'ng2-handsontable';\n...\n\n@NgModule({\n  ...\n  imports: [\n    HotTableModule\n  ],\n  ...\n})\nexport class MyModule {\n}\n```\n\n4. Use the `hot-table` component in your template. The following example displays the supported attributes:\n\n```html\n\u003chot-table [data]=\"data\"\n           [columns]=\"columns\"\n           [colHeaders]=\"colHeaders\"\n           [colWidths]=\"colHeaders\"\n           [options]=\"options\"\n           (hotInstanceCreated)=\"init($event)\"\n           (HANDSONTABLE_EVENT)=\"eventHandler\"\u003e\n\u003c/hot-table\u003e\n```\n\n- `data: any[]` - data source\n- `pageData: Observable\u003cany[]\u003e` - observable data source for paged data\n- `columns?: any[]` - descriptors of columns that contains information regarding type, format, source, ... of particular column\n- `colHeaders?: string[]` - array of column headers, default column headers will be shown (or not be shown, it depends on other settings) if this parameter is undefined\n- `colWidths?: number[]` - array of column sizes, default column size will be applied if this parameter is undefined\n- `options?: any` - any of the [Handsontable options](http://docs.handsontable.com/pro/Options.html)\n- `hotInstanceCreated` - Emits the Handsontable instance after it has been created. (Alternatively the `this`-context of the Handsontable hooks [init()](https://docs.handsontable.com/Hooks.html#event:init) or [afterInit()](https://docs.handsontable.com/Hooks.html#event:afterInit) could be used.)\n- 'HANDSONTABLE_EVENT' - all [Handsontable events](http://docs.handsontable.com/pro/Hooks.html#event:afterAddChild) are implemented as EventEmitters, e.g. `(beforeInit)=\"onBeforeInit\"`.\n\nThe free version of Handsontable is used by default, but the pro-version could be used as a drop-in replacement.\n\n5. The following methods are available as a public API on HotTableComponent (which you can access from your parent component with `@ViewChild(HotTableComponent) hotTableComponent`):\n- `getHandsontableInstance(): Handsontable` - returns the underlying [Handsontable Core instance](https://docs.handsontable.com/Core.html); all registered Handsontable plugins are accessible via [instance.getPlugin()](https://docs.handsontable.com/pro/1.11.0/Core.html#getPlugin)\n- `markAsChanged(properties: ('data' | 'options' | 'colHeaders' | 'colWidths' | 'columns')[])`- Call this function to mark any of the given input properties as changed in case they were changed partially, rather than replaced by a new object. The component picks up the latter through Angular's ngOnChanges(), but not the former. For example, when a new row is added to an existing 'data' input array, call `markAsChanged(['data'])`.\n\n6. See the [demo](http://valor-software.github.io/ng2-handsontable/) and the [demo sources](https://github.com/valor-software/ng2-handsontable/tree/master/demo/src) for further details.\n\n## Troubleshooting\n\n- ZoneJS \u003c 0.8.20 was throwing an error because of [Handsontable's wrapping of the native Promise](https://github.com/handsontable/handsontable/issues/4452). If you are not able to update zone.js, you will need to import handsontable _before_ zone.js with `import 'handsontable'`. For an AngularCLI-project, the zone.js import happens in the `polyfill.ts` file.\n\nPlease follow this guidelines when reporting bugs and feature requests:\n\n1. Use [GitHub Issues](https://github.com/valor-software/ng2-handsontable/issues) board to report bugs and feature requests (not our email address)\n2. Please **always** write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.\n\nThanks for your understanding!\n\n\n## License\n\nThe MIT License (see the [LICENSE](https://github.com/valor-software/ng2-handsontable/blob/master/LICENSE) file for the full text)\n","funding_links":[],"categories":["Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)","UI Components"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Table"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalor-software%2Fng2-handsontable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvalor-software%2Fng2-handsontable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalor-software%2Fng2-handsontable/lists"}