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.

Installation

To initialize the Spreadsheet, either:

Initializing from CDN

The following example demonstrates how to initialize the Spreadsheet component by using the CDN services. To access all CDN references, open the sample in Plunker.

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

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

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

Features and Functionalities

The Spreadsheet delivers data binding functionalities.

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