{"id":13649258,"url":"https://github.com/handsontable/vue-handsontable-official","last_synced_at":"2025-04-22T14:31:06.716Z","repository":{"id":53746237,"uuid":"82917188","full_name":"handsontable/vue-handsontable-official","owner":"handsontable","description":"Vue Data Grid with Spreadsheet Look \u0026 Feel. Official Vue wrapper for Handsontable.","archived":true,"fork":false,"pushed_at":"2021-03-16T11:31:02.000Z","size":3711,"stargazers_count":746,"open_issues_count":0,"forks_count":128,"subscribers_count":37,"default_branch":"master","last_synced_at":"2025-04-18T08:41:53.735Z","etag":null,"topics":["data-grid","datatable","dynamic-table","excel","grid","grid-editor","handsontable","spreadsheet","table","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://handsontable.com/docs/vue","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/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-02-23T10:44:42.000Z","updated_at":"2025-03-26T18:19:18.000Z","dependencies_parsed_at":"2022-09-12T14:26:04.659Z","dependency_job_id":null,"html_url":"https://github.com/handsontable/vue-handsontable-official","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/handsontable%2Fvue-handsontable-official","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/handsontable%2Fvue-handsontable-official/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/handsontable%2Fvue-handsontable-official/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/handsontable%2Fvue-handsontable-official/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/handsontable","download_url":"https://codeload.github.com/handsontable/vue-handsontable-official/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250258881,"owners_count":21400986,"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":["data-grid","datatable","dynamic-table","excel","grid","grid-editor","handsontable","spreadsheet","table","vue","vuejs"],"created_at":"2024-08-02T01:04:53.615Z","updated_at":"2025-04-22T14:31:01.708Z","avatar_url":"https://github.com/handsontable.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)","VueJS"],"sub_categories":["表","UI Components","Table"],"readme":"# Important information\n\n## We permanently moved this project to the main Handsontable repository at [https://github.com/handsontable/handsontable/tree/master/wrappers/vue](https://github.com/handsontable/handsontable/tree/master/wrappers/vue)\n\n## It is still available under the same name in npm: [`@handsontable/vue`](https://www.npmjs.com/package/@handsontable/vue), 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 Vue](https://raw.githubusercontent.com/handsontable/static-files/master/Images/Logo/Handsontable/handsontable-vue.png)\n\nThis is the official wrapper of [**Handsontable**](//github.com/handsontable/handsontable) data grid for Vue.\u003cbr\u003e\nIt provides data binding, data validation, filtering, sorting and more.\u003cbr\u003e\n\n[![npm](https://img.shields.io/npm/dt/@handsontable/vue.svg)](//npmjs.com/package/@handsontable/vue)\n[![npm](https://img.shields.io/npm/dm/@handsontable/vue.svg)](//npmjs.com/package/@handsontable/vue)\n[![Build status](https://travis-ci.org/handsontable/vue-handsontable-official.png?branch=master)](//travis-ci.org/handsontable/vue-handsontable-official)\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"//handsontable.com/docs/frameworks-wrapper-for-vue-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 Vue.js\"/\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/vue\n```\n\nYou can load it directly from [jsDelivr](//jsdelivr.com/package/npm/@handsontable/vue) 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/vue/dist/vue-handsontable.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.vue.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**Vue Component**\n```vue\n\u003ctemplate\u003e\n  \u003chot-table :data=\"data\" colHeaders=\"true\" rowHeaders=\"true\" width=\"600\" height=\"300\"\u003e\u003c/hot-table\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { HotTable } from '@handsontable/vue';\n\n  export default {\n    data: function() {\n      return {\n        data: [\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    components: {\n      HotTable\n    }\n  }\n\u003c/script\u003e\n```\n\n##### [See the live demo](//handsontable.com/docs/frameworks-wrapper-for-vue-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/vue)\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/vue-handsontable-official/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/vue-handsontable-official/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/vue-handsontable-official/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```vue\n\u003chot-table :settings=\"settings\" licenseKey=\"non-commercial-and-evaluation\" /\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhandsontable%2Fvue-handsontable-official","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhandsontable%2Fvue-handsontable-official","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhandsontable%2Fvue-handsontable-official/lists"}