@progress/kendo-spreadsheet-vue-wrapper
Version:
Kendo UI Spreadsheet wrapper for Vue.js
288 lines (256 loc) • 10.4 kB
Markdown
---
title: Overview
page_title: Spreadsheet Overview - Components - Kendo UI for Vue
description: "Get an overview of the features the Kendo UI Spreadsheet wrapper for Vue delivers and use the component in Vue projects."
slug: overview_spreadsheet
position: 0
---
The Spreadsheet enables you to edit and visualize tabular data by using cell formatting options, styles, and themes.
It also supports the selection of cells and background colors, the application of vertical and horizontal cell alignment, formulas, multiple sheets, frozen panes, text wrapping, and provides resizing options.
The Spreadsheet wrapper for Vue is a client-side wrapper for the [Kendo UI Spreadsheet](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet) widget.
The following example demonstrates how to initialize the Spreadsheet component.
{% meta height:460 %}
```html-preview
<div id="vueapp" class="vue-app">
<kendo-spreadsheet ref="spreadsheet"
:excel-proxy-URL="'https://demos.telerik.com/kendo-ui/service/export'"
:pdf-proxy-URL="'https://demos.telerik.com/kendo-ui/service/export'">
<kendo-spreadsheet-sheet :name="'Food Order'"
:merged-cells="mergedCells"
:rows="firstRows"
:columns="firstColumns">
</kendo-spreadsheet-sheet>
</kendo-spreadsheet>
</div>
```
```js
Vue.use(SpreadsheetInstaller);
window.JSZip = JSZip;
new Vue({
el: '#vueapp',
data () {
return {
mergedCells: ['A1:G1', 'C15:E15'],
firstRows: [{
height: 70,
cells: [{
index: 0, value: 'Invoice #52 - 06/23/2015', fontSize: 32, background: 'rgb(96,181,255)', textAlign: 'center', color: 'white'
}]
},{
height: 25,
cells: [{
value: 'ID', background: 'rgb(167,214,255)', textAlign: 'center', color: 'rgb(0,62,117)'
},{
value: 'Product', background: 'rgb(167,214,255)', textAlign: 'center', color: 'rgb(0,62,117)'
},{
value: 'Quantity', background: 'rgb(167,214,255)', textAlign: 'center', color: 'rgb(0,62,117)'
},{
value: 'Price', background: 'rgb(167,214,255)', textAlign: 'center', color: 'rgb(0,62,117)'
},{
value: 'Tax', background: 'rgb(167,214,255)', textAlign: 'center', color: 'rgb(0,62,117)'
},{
value: 'Amount', background: 'rgb(167,214,255)', textAlign: 'center', color: 'rgb(0,62,117)'
},{
background: 'rgb(167,214,255)', color: 'rgb(0,62,117)'
}]
},{
cells: [{
value: 216321, textAlign: 'center', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)'
},{
value: 'Calzone', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)'
},{
value: 1, textAlign: 'center', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)'
},{
value: 12.39, format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)'
},{
formula: 'C3*D3*0.2', format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)'
},{
formula: 'C3*D3+E3', format: '$#,##0.00', background: 'rgb(255,255,255)', color: 'rgb(0,62,117)'
},{
background: 'rgb(255,255,255)', color: 'rgb(0,62,117)'
}]
},{
cells: [{
value: 546897, textAlign: 'center', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)'
},{
value: 'Margarita', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)'
},{
value: 2, textAlign: 'center', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)'
},{
value: 8.79, format: '$#,##0.00', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)'
},{
formula: 'C4*D4*0.2', format: '$#,##0.00', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)'
},{
formula: 'C4*D4+E4', format: '$#,##0.00', background: 'rgb(229,243,255)', color: 'rgb(0,62,117)'
},{
background: 'rgb(229,243,255)', color: 'rgb(0,62,117)'
}]
}],
firstColumns: [{
width: 100
},{
width: 150
},{
width: 100
},{
width: 100
},{
width: 100
},{
width: 100
}]
}
},
mounted () {
var spreadsheet = this.$refs.spreadsheet.kendoWidget();
spreadsheet.element.css('height', '400px');
spreadsheet.element.css('width', '100%');
spreadsheet.resize();
}
})
```
{% endmeta %}
To initialize the Spreadsheet, either:
* [Use the CDN service]({% slug using_cdn %}), or
* [Use Webpack](
1. Install Kendo UI and add a theme.
```sh
npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default
```
1. Install the Kendo UI Spreadsheet package for Vue.
```sh
npm install --save @progress/kendo-spreadsheet-vue-wrapper
```
1. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the `main.js` file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.
```js-no-run
import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'
import { Spreadsheet,
SpreadsheetSheet,
SpreadsheetInstaller } from '@progress/kendo-spreadsheet-vue-wrapper'
Vue.use(SpreadsheetInstaller)
new Vue({
el: '#app',
components: {
Spreadsheet,
SpreadsheetSheet
}
})
```
* [Data Binding]({% slug databinding_spreadsheet %})
* [Sorting and Filtering]({% slug sortingfiltering_spreadsheet %})
* [Disabled Cells]({% slug disabledcells_spreadsheet %})
* [Custom Editors]({% slug customeditors_spreadsheet %})
* [Validation]({% slug validation_spreadsheet %})
The Spreadsheet delivers [data binding]({% slug databinding_spreadsheet %}) functionality.
The following example demonstrates basic Spreadsheet events. You can subscribe to [all Spreadsheet events](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet#events) by the handler name.
```html
<div id="vueapp" class="vue-app">
<kendo-spreadsheet ref="spreadsheet"
:excel-proxy-URL="'https://demos.telerik.com/kendo-ui/service/export'"
:pdf-proxy-URL="'https://demos.telerik.com/kendo-ui/service/export'"
v-on:render="onRender"
v-on:select="onSelect"
v-on:change="onChange"
v-on:changeformat="onChangeFormat"
v-on:excelexport="onExcelExport"
v-on:excelimport="onExcelImport"
v-on:pdfexport="onPdfExport"
v-on:insertsheet="onInsertSheet"
v-on:removesheet="onRemoveSheet"
v-on:renamesheet="onRenameSheet"
v-on:selectsheet="onSelectSheet"
v-on:unhidecolumn="onUnhideColumn"
v-on:unhiderow="onUnhideRow"
v-on:hidecolumn="onHideColumn"
v-on:hiderow="onHideRow"
v-on:deletecolumn="onDeleteColumn"
v-on:deleterow="onDeleteRow"
v-on:insertcolumn="onInsertColumn"
v-on:insertrow="onInsertRow">
<kendo-spreadsheet-sheet :name="'Food Order'">
</kendo-spreadsheet-sheet>
</kendo-spreadsheet>
</div>
```
```js
Vue.use(SpreadsheetInstaller);
new Vue({
el: '#vueapp',
mounted () {
var spreadsheet = this.$refs.spreadsheet.kendoWidget();
spreadsheet.element.css('height', '400px');
spreadsheet.element.css('width', '100%');
spreadsheet.resize();
},
methods: {
onRender (arg) {
console.log("Spreadsheet is rendered");
},
onSelect (arg) {
console.log("New range selected. New value: " + arg.range.value());
},
onChange (arg) {
console.log("Spreadsheet change. New value: " + arg.range.value());
},
onChangeFormat (arg) {
console.log("Format of the range with value " + arg.range.value() + " changed to " + arg.range.format());
},
onExcelExport (arg) {
console.log("Spreadsheet is exported to Excel");
},
onExcelImport (arg) {
console.log(arg.file.name + " file is about to be imported in the Spreadsheet");
},
onPdfExport (arg) {
console.log("Spreadsheet is exported to PDF");
},
onInsertSheet (arg) {
console.log("Inserted new Sheet");
},
onRemoveSheet (arg) {
console.log(arg.sheet.name() + " sheet removed");
},
onRenameSheet (arg) {
console.log(arg.sheet.name() + " renamed to " + arg.newSheetName);
},
onSelectSheet (arg) {
console.log(arg.sheet.name() + " sheet is selected");
},
onUnhideColumn (arg) {
console.log("The column at index " + arg.index + " on sheet " + arg.sheet.name() + " is unhidden");
},
onUnhideRow (arg) {
console.log("The row at index " + arg.index + " on sheet " + arg.sheet.name() + " is unhidden");
},
onHideColumn (arg) {
console.log("The column at index " + arg.index + " on sheet " + arg.sheet.name() + " is hidden");
},
onHideRow (arg) {
console.log("The row at index " + arg.index + " on sheet " + arg.sheet.name() + " is hidden");
},
onDeleteColumn (arg) {
console.log("The column at index " + arg.index + " on sheet " + arg.sheet.name() + " is deleted");
},
onDeleteRow (arg) {
console.log("The row at index " + arg.index + " on sheet " + arg.sheet.name() + " is deleted");
},
onInsertColumn (arg) {
console.log("New column at index " + arg.index + " on sheet " + arg.sheet.name() + " is inserted");
},
onInsertRow (arg) {
console.log("New row at index " + arg.index + " on sheet " + arg.sheet.name() + " is inserted");
}
}
})
```
* [Kendo UI Spreadsheet for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/overview)
* [API Reference of the Spreadsheet Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet)