All Components

Spreadsheet Overview

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 widget.

Basic Usage

The following example demonstrates how to initialize the Spreadsheet.

<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>
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();
    }
})

Installation

To initialize the Spreadsheet, either:

Initializing with Webpack

  1. Install Kendo UI and add a theme.

    npm install --save @progress/kendo-ui
    npm install --save @progress/kendo-theme-default
  2. Install the Kendo UI Spreadsheet package for Vue.

    <pre><code class="language-sh">npm install --save @progress/kendo-spreadsheet-vue-wrapper</code></pre>
    
  3. 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.

    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
        }
    })

Functionality and Features

Events

The following example demonstrates basic Spreadsheet events. You can subscribe to all Spreadsheet events by the handler name.

<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>
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");
        }
    }
})
In this article