We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Overview

The Vue Spreadsheet, also known as the Vue Excel viewer, is a feature-rich component for organizing and analyzing data in tabular format. It provides all the common Excel features, including data binding, selection, editing, formatting, resizing, sorting, and importing and exporting Excel documents.


Data binding

Bind data seamlessly with various local and remote data sources such as JSON, RESTful services, OData services, and WCF services. The control uses a data manager to handle data and supports customizing data requests and processing.

Vue Spreadsheet data binding.


High performance

The Vue Spreadsheet (Excel-like grid) component is designed and optimized for loading large amounts of data, scrolling, and more.

Instant data loading in Vue Spreadsheet.

Instant loading

Vue Excel Viewer instant loading allows users to load large amounts of data into a worksheet and view it on demand with the help of row and column virtualization.

Smooth scrolling in Vue Spreadsheet.

Smooth scrolling

The Vue Spreadsheet component provides a smooth scrolling experience even with many cells in a view.


Editing in Vue Spreadsheet.

Editing

Data editing allows you to add, edit, and remove formulas or values in a cell. Edit the contents of a cell directly in the cell or by typing the formula bar.


Excel-like selection

The Vue Spreadsheet widget provides interactive support to highlight the cells, rows, columns, and sheets selected. Selection can be done through mouse, touch, or keyboard interaction.

Selection in Vue Spreadsheet.


Formulas

The Vue Spreadsheet library provides a wide range of formulas with cross-sheet references support.

Built-in formulas in Vue Spreadsheet.

Built-in functions

The Vue Spreadsheet with rich UI provides a built-in calculation engine is suitable for most of the calculations. It also provides an option to create and use custom formulas.

Vue Spreadsheet dependent cell reference.

Auto calculation

Values are automatically recalculated when a dependent cell is edited.


Number formatting in Vue Spreadsheet.

Number formatting

Number formatting is used to change the appearance of numbers in Vue Spreadsheet. It helps display data as currency, percentages, short dates, long dates, time, fractions, and scientific numbers, similar to Excel.


Cell formatting

Using cell formatting, users can highlight a particular cell or range of cells from a whole workbook. The component supports various formatting options: font size, font family, font color, fill color, indent, and horizontal and vertical alignments of text.

Sheet tabs in Vue Spreadsheet.


Open and save

Excel and CSV import

Load Excel documents initially or open them like an Excel application with data accuracy, styles, and formats. Microsoft Excel (.xlsx), Microsoft Excel 97-2003 (.xls), and comma-delimited values (.csv) file formats can be opened in a Vue Spreadsheet.

Excel and CSV export

Easily save the Spreadsheet component with data accuracy, styles, and formats as an Excel file. The Vue Spreadsheet supports file formats such as Microsoft Excel (.xlsx), Microsoft Excel 97-2003 (.xls), and comma-delimited values (.csv).


Sort and filter

  • Reorganize data faster by sorting the range of cells in either the ascending or descending order. The custom sort option allows you to sort multiple columns.
  • When filtering, if values in one or more columns do not meet the filtering criteria, all the data will be hidden. You can filter text, dates, and numbers.

Vue Spreadsheet sorting and filtering.


There is built-in support for hyperlinks and bookmarks. Navigate to web links or cell references within the sheet or other sheets in the workbook.

Hyperlink in Vue Spreadsheet.


Images

The image feature allows users to view, insert, and modify a picture in a Vue Spreadsheet with customizing options.

Image in Vue Spreadsheet.


Chart

The chart feature transforms the Vue Spreadsheet data into an intuitive overview for better understanding.

Chart in Vue Spreadsheet.


Ribbon UI

The Vue Spreadsheet provides an interactive ribbon that organizes the spreadsheet’s features into a series of tabs. Collapse the ribbon to make more rows visible in the viewport.

Ribbon in Vue Spreadsheet.


Collaborative editing

Easily collaborate on workbooks. Multiple users can work on a spreadsheet at the same time and view the changes made by others instantly.

Collaborative editing in Vue Spreadsheet.


Interactive features

Clipboard operations in Vue Spreadsheet.

Copy to clipboard

Use the clipboard operations, cut, copy, and paste, just like Microsoft Excel. You can paste the values or formulas with or without formatting in a newly selected range.

Context menu in Vue Spreadsheet.

Context menu

The context menu improves user interaction with the Vue Spreadsheet using a pop-up menu. It appears when a cell, row header, column header, or sheet tab is right clicked. In addition to built-in default menu items, you can add custom context menu items.

Row and column resizing in Vue Spreadsheet.

Resize and autofit

The resize and autofit options help you adjust the row height and column width.

Undo and redo in Vue Spreadsheet.

Undo and redo

The Vue Spreadsheet provides an option to undo and redo changes made in a workbook. You can customize the limit of undo and redo operations.


Accessibility

Keyboard navigation in Vue Spreadsheet.

Keyboard navigation

The Vue Excel Spreadsheet ensures that every cell is accessible using a keyboard. Major features like selection, clipboard, and editing can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component.

Accessibility and screen reader support in Vue Spreadsheet.

Screen reader

The Vue Spreadsheet grid view has complete WAI-ARIA accessibility support. The Vue Spreadsheet with rich UI includes high-contrast visual elements, helping visually impaired people have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers.


Built-in and customizable themes

Five built-in, SASS-based themes are available: Material, Bootstrap, Bootstrap 4, Fabric, and high contrast. Simplify theme customization either by overriding the existing SASS styling or creating custom themes using the Theme Studio application.

Vue Spreadsheet themes.


Globalization and localization

Format dates and numbers in Vue Spreadsheet.

Globalization

The Vue Spreadsheet enables users from different locales to use it by formatting the dates, currency, and numbering to suit their language preferences. It uses the internalization (i18n) library to handle number formatting.

Show right-to-left language in Vue Spreadsheet.

Right to left (RTL)

Right-to-left rendering allows you to display the text and layout of the Spreadsheet from right to left. This improves the user experience and accessibility for RTL languages.

Localize Vue Spreadsheet UI strings.

Localization

Localize all the strings used in the user interface of the Vue Spreadsheet component. The component uses the localization (l10n) library to localize UI strings.


Supported browsers

The Vue Spreadsheet works well with all modern web browsers: Chrome, Firefox, Edge, Safari, and IE11. It supports IE11 with the help of polyfills.

Supported web browsers for Vue Spreadsheet.


Vue Spreadsheet Code Example

Easily get started with the Vue Spreadsheet using a few simple lines of Vue code example as demonstrated below. Also explore our Vue Spreadsheet Example that shows you how to render and configure a Spreadsheet in Vue.

<template>
    <ejs-spreadsheet ref="spreadsheet">
      <e-sheets>
          <e-sheet>
            <e-ranges>
              <e-range :dataSource="dataSource"></e-range>
            </e-ranges>
             <e-columns>
              <e-column :width="width1"></e-column>
              <e-column :width="width2"></e-column>
            </e-columns>
          </e-sheet>
        </e-sheets></ejs-spreadsheet>                      
</ template >

< script >
import Vue from "vue";
import { SpreadsheetPlugin
}
from "@syncfusion/ej2-vue-spreadsheet";
import { defaultData }from './data.js';
Vue.use(SpreadsheetPlugin);
export default {
data: () => {
    return {
dataSource: defaultData,
    }
  }
}
</ script >
< style >
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</ style >

Other supported frameworks

The Spreadsheet component is also available in React, Angular, and JavaScript frameworks. Check out the different Spreadsheet platforms from the links below,

Developer-friendly APIs

Developers can customize their UI and control its behaviors according to the end user’s requirement using the control’s rich set of client-side APIs.




65+ VUE UI COMPONENTS

Frequently Asked Questions

  • Seamless data analysis and visualization like in Microsoft Excel.
  • Compatibility with Microsoft Excel file formats.
  • Highly intuitive user interfaces.
  • Flexible data binding with support to use local and remote data source services.
  • Supports Freeze panes, Keyboard shortcuts and all the common Excel features.
  • One of the best Vue Spreadsheet in the market that offers feature-rich UI to interact with the software.
  • Supports all modern browsers.
  • Mobile-touch friendly and responsive.
  • Expansive learning resources such as demos and documentation to learn quickly and get started with Vue Spreadsheet.

We do not sell the Vue Spreadsheet separately. It is only available for purchase as part of the Syncfusion Vue suite, which contains over 70 Vue components, including the Spreadsheet. A single developer license for the Syncfusion Essential Studio for Vue suite costs $995.00 USD, including one year of support and updates. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our sales team today to see if you qualify for any additional discounts.

You can find our Vue Spreadsheet demo here.

No, our 70 Vue components, including Spreadsheet, are not sold individually, only as a single package. However, we have competitively priced the product so it only costs a little bit more than what some other vendors charge for their Spreadsheet alone. We have also found that, in our experience, our customers usually start off using one of our products and then expand to several products quickly, so we felt it was best to offer all 70 Vue components for a flat fee of $995/developer. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our sales team today to see if you qualify for any additional discounts.

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

A good place to start would be our comprehensive getting started documentation.

Read independent,
authenticated reviews
on G2

Download Now Pricing

What do our customers say about us?

double quotes

We're using the file formats and Windows/JavaScript list controls a lot. They're fast, easy to use, and the documentation is good and contains examples. Tickets with questions or suggestions were answered within a day, so we're happy to use the Syncfusion libraries.
Daniel Persidok

Daniel Persidok

wpd onshore GmbH & Co. KG

double quotes

Using Syncfusion Angular and JavaScript controls makes front-end web development a piece of cake. Each component has many properties that can be configured as per your desire, methods that can be used to interact with the element, and a lot of events that trigger at different stages, which makes modifying your components according to the state of the application an easy task. Also, their support is amazing! They always offer a sample working project, which makes it very simple to solve your question about your code.
Carlos Rodriguez Garcia

Carlos Rodriguez Garcia

Vistatec

Transform your applications today by downloading our free evaluation version Download Free Trial

Awards

Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile