xx-handsontable
v1.0.1
Published
Handsontable is a JavaScript Spreadsheet Component available for React, Angular and Vue.
Downloads
12
Maintainers
Readme
Data Grid for Vue
Handsontable's wrapper for Vue combines data grid features with spreadsheet-like UX. It provides data binding, data validation, filtering, sorting, and CRUD operations.
Features
The most popular features of Handsontable for Vue:
✓ Multiple column sorting ✓ Non-contiguous selection ✓ Filtering data ✓ Export to file ✓ Validating data ✓ Conditional formatting ✓ Merging cells ✓ Freezing rows/columns ✓ Moving rows/columns ✓ Resizing rows/columns ✓ Hiding rows/columns ✓ Context menu ✓ Comments
Documentation
Get Started
Install with npm
Run the following command in your terminal
npm install handsontable @handsontable/vue
You can load it directly from jsDelivr as well.
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/vue/dist/vue-handsontable.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
The component will be available as Handsontable.vue.HotTable
.
Usage
Use this data grid as you would any other component in your application. Options can be set as HotTable
props.
Styles
@import '~handsontable/dist/handsontable.full.css';
Vue Component
<template>
<hot-table :data="data" colHeaders="true" rowHeaders="true" width="600" height="300"></hot-table>
</template>
<script>
import { HotTable } from '@handsontable/vue';
export default {
data: function() {
return {
data: [
['', 'Tesla', 'Mercedes', 'Toyota', 'Volvo'],
['2019', 10, 11, 12, 13],
['2020', 20, 11, 14, 13],
['2021', 30, 15, 12, 13]
],
};
},
components: {
HotTable
}
}
</script>
handsontable收缩行的操作图标从行头切换到某列中
<template>
<HotTable ref="ht" :settings="hotSettings"></HotTable>
</template>
<script>
hotSettings: {
colMenuIndex: 0, //参数代表列的索引 0代表操作按钮在表格的第一列。
}
</script>
View live demo
Support
We provide support for developers working with commercial version via contact form or at [email protected].
If you use a non-commercial version then please ask your tagged question on StackOverflow.
License
Handsontable is a commercial software with two licenses available:
- Free for non-commercial purposes such as teaching, academic research, and evaluation. Read it here.
- Commercial license with support and maintenance included. See pricing plans.
License key
If you use Handsontable for Vue in a project that supports your commercial activity, then you must purchase the license key at handsontable.com.
If you use the free for non-commercial license of Handsontable, then pass the phrase 'non-commercial-and-evaluation'
, as described in this documentation.
Proudly created and maintained by the Handsontable Team.