{"id":13989994,"url":"https://github.com/handsontable/ngHandsontable","last_synced_at":"2025-07-22T11:32:30.804Z","repository":{"id":4695775,"uuid":"5842835","full_name":"handsontable/ngHandsontable","owner":"handsontable","description":"Official AngularJS directive for Handsontable","archived":false,"fork":false,"pushed_at":"2022-09-24T02:47:51.000Z","size":13087,"stargazers_count":433,"open_issues_count":31,"forks_count":158,"subscribers_count":53,"default_branch":"develop","last_synced_at":"2024-11-21T10:14:32.695Z","etag":null,"topics":["angularjs","data-grid","data-table","dynamic-table","excel","grid","grid-editor","spreadsheet","table"],"latest_commit_sha":null,"homepage":"http://handsontable.github.io/ngHandsontable/","language":"JavaScript","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/handsontable.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2012-09-17T15:14:10.000Z","updated_at":"2024-11-05T06:12:05.000Z","dependencies_parsed_at":"2022-08-29T07:20:36.750Z","dependency_job_id":null,"html_url":"https://github.com/handsontable/ngHandsontable","commit_stats":null,"previous_names":["warpech/angular-ui-handsontable"],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/handsontable%2FngHandsontable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/handsontable%2FngHandsontable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/handsontable%2FngHandsontable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/handsontable%2FngHandsontable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/handsontable","download_url":"https://codeload.github.com/handsontable/ngHandsontable/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227089490,"owners_count":17729474,"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":["angularjs","data-grid","data-table","dynamic-table","excel","grid","grid-editor","spreadsheet","table"],"created_at":"2024-08-09T13:02:14.827Z","updated_at":"2024-11-29T09:30:40.847Z","avatar_url":"https://github.com/handsontable.png","language":"JavaScript","readme":"# ngHandsontable - the AngularJS directive for [Handsontable](https://github.com/handsontable/handsontable) [![Build Status](https://travis-ci.org/handsontable/ngHandsontable.png?branch=master)](https://travis-ci.org/handsontable/ngHandsontable)\n\nEnables creation of data grid applications in AngularJS.\n\n## Demo\n\nSee the demo at http://handsontable.github.io/ngHandsontable.\n\n## Usage\n\nInclude the library files:\n\n```html\n\u003clink rel=\"stylesheet\" media=\"screen\" href=\"bower_components/handsontable/dist/handsontable.full.css\"\u003e\n\u003cscript src=\"bower_components/angular/angular.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"bower_components/handsontable/dist/handsontable.full.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"dist/ngHandsontable.js\"\u003e\u003c/script\u003e\n```\n\nInclude component to your app:\n\n```js\nangular.module('my-app', ['ngHandsontable']);\n```\n\nTemplate:\n\n```html\n\u003chot-table settings=\"{colHeaders: colHeaders, contextMenu: ['row_above', 'row_below', 'remove_row'], afterChange: afterChange}\"\n           row-headers=\"false\"\n           min-spare-rows=\"minSpareRows\"\n           datarows=\"db.items\"\n           height=\"300\"\n           width=\"700\"\u003e\n    \u003chot-column data=\"id\" title=\"'ID'\"\u003e\u003c/hot-column\u003e\n    \u003chot-column data=\"name.first\" title=\"'First Name'\" type=\"grayedOut\" read-only\u003e\u003c/hot-column\u003e\n    \u003chot-column data=\"name.last\" title=\"'Last Name'\" type=\"grayedOut\" read-only\u003e\u003c/hot-column\u003e\n    \u003chot-column data=\"address\" title=\"'Address'\" width=\"150\"\u003e\u003c/hot-column\u003e\n    \u003chot-column data=\"product.description\" title=\"'Favorite food'\" type=\"'autocomplete'\"\u003e\n        \u003chot-autocomplete datarows=\"description in product.options\"\u003e\u003c/hot-autocomplete\u003e\n    \u003c/hot-column\u003e\n    \u003chot-column data=\"price\" title=\"'Price'\" type=\"'numeric'\" width=\"80\" format=\"'$ 0,0.00'\"\u003e\u003c/hot-column\u003e\n    \u003chot-column data=\"isActive\" title=\"'Is active'\" type=\"'checkbox'\" width=\"65\" checked-template=\"'Yes'\" unchecked-template=\"'No'\"\u003e\u003c/hot-column\u003e\n\u003c/hot-table\u003e\n```\n\nController:\n\n```javascript\n$scope.db.items = [\n  {\n    \"id\": 1,\n    \"name\": {\n      \"first\": \"John\",\n      \"last\": \"Schmidt\"\n    },\n    \"address\": \"45024 France\",\n    \"price\": 760.41,\n    \"isActive\": \"Yes\",\n    \"product\": {\n      \"description\": \"Fried Potatoes\",\n      \"options\": [\n        {\n          \"description\": \"Fried Potatoes\",\n          \"image\": \"//a248.e.akamai.net/assets.github.com/images/icons/emoji/fries.png\"\n        },\n        {\n          \"description\": \"Fried Onions\",\n          \"image\": \"//a248.e.akamai.net/assets.github.com/images/icons/emoji/fries.png\"\n        }\n      ]\n    }\n  },\n  //more items go here\n];\n```\n  \n## Directives and attributes specification\n\nMain directive for creating table is `\u003chot-table\u003e`. For defining column options you can use settings object with \ncolumns property. If you want to describe column behavior in declarative way you can add `\u003chot-column\u003e` directive \nas a children of `\u003chot-table\u003e` element and add all neccessary attributes to describe column options.\n\nAll **Handsontable** options listed [here](http://docs.handsontable.com/Options.html) should be supported. \nOptions in camelCase mode should be passed to the directive in hyphenate mode e.q `autoWrapCol: true` -\u003e `\u003chot-table auto-wrap-col\u003e`.\n\nIt's recommended to put all your settings in one big object (`settings=\"ctrl.settings\"`).\nSettings attribute unlike any other attributes is not watched so using this can be helpful to achieve higher performance.\n\n## License\n\nThe MIT License (see the [LICENSE](https://github.com/handsontable/ngHandsontable/blob/master/LICENSE) file for the full text)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhandsontable%2FngHandsontable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhandsontable%2FngHandsontable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhandsontable%2FngHandsontable/lists"}