Vue Spreadsheet Component

Used by the world's leading companies

Create a Vue Spreadsheet in Two Minutes

The fastest way to start is the install wizard. It detects Vue, installs the wrapper, and configures the CSS imports for you:

npx @jspreadsheet/install

Or install the Vue wrapper manually:

npm install @jspreadsheet/vue

Then render your first spreadsheet component:

<template>
    <Spreadsheet ref="spreadsheet" :toolbar="true">
        <Worksheet :data="data" :columns="columns" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Get a free 30-day trial certificate at jspreadsheet.com
jspreadsheet.setLicense('ZjI0NjVjNjVlOTk0MzYyMWY4NzU3OWYyNjUzYzA4ZjJkNGMzZTViNjlmYWI4ZmI4ZmRjNjMwYTVkZDU1Mjk3MDM5YTljZTBkM2RkMGM0OWEwNmE0OWFjZDJiNzEzZjEyNDAwMjc2Y2RlZDRjY2Y4OWE4MzZlMGU0YjI0NzZmNDUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpnMk9EWXpNVFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

export default {
    components: { Spreadsheet, Worksheet },
    data() {
        return {
            data: [
                ['Mazda', 2001, 2000, '=B1*C1'],
                ['Peugeot', 2010, 5000, '=B2*C2'],
                ['Honda Fit', 2009, 3000, '=B3*C3'],
            ],
            columns: [
                { title: 'Model', width: '250px' },
                { title: 'Year', width: '100px' },
                { title: 'Price', width: '100px' },
                { title: 'Total', width: '120px' },
            ],
        };
    },
};
</script>

That is a complete Excel-like Vue spreadsheet: editable cells, live formulas, keyboard navigation, and copy and paste from Excel. Using Nuxt? Render the component on the client, since the spreadsheet works with the DOM directly. The Vue documentation covers events, methods, and both API styles, and the getting started guide explains every configuration option.

Proven Solution, Backed by Users

In their own words: How teams saved hours and reduce rework.

What Our Customers Are Saying

Jspreadsheet reduces our customers' development time. Here are some of their experiences.

"At SplitC we struggled sometimes when users wanted to bulk insert/edit things (sometimes over 100k rows) and we needed performance. Jspreadsheet is probably the fastest spreadsheet component you'll find out there, and with a small bundle size. By the way, support is awesome."

Lucas Segers,

"We vetted 10 JavaScript components and we must say that Jspreadsheet comes out as the best."

Lode Cools,

"The latest version of Jspreadsheet is a powerful data grid tool, providing an excellent front end for our spreadsheet interface. The Jspreadsheet team is helpful and quick to respond."

Dana Stoesz,

What Developers Build with This Vue Spreadsheet

Spreadsheets with Excel-compatible formulas

Formulas work out of the box: type them in cells or ship them with your data, as in the quickstart above. Calculations run on the client with the same syntax users know from Excel, including cross-worksheet references. The formulas documentation covers custom functions, and Formula Pro adds the complete 500+ function set.

Excel file import and export

Let users drop an XLSX file into your Vue application, edit it, and download the result. Formulas, formatting, merged cells, and multiple worksheets survive the round trip. See import from XLSX and export to XLSX.

Data entry with typed columns

Each column can enforce a type with its own editor: dropdowns, calendars, checkboxes, images, colors, and more.

const columns = [
    { title: 'Product', type: 'text', width: '200px' },
    { title: 'Category', type: 'dropdown', source: ['Hardware', 'Software'], width: '160px' },
    { title: 'Launch date', type: 'calendar', width: '140px' },
];

The full list of editors is in the columns documentation.

Reacting to user changes

Every edit fires an event you can bind as a prop, which makes it straightforward to sync spreadsheet data with your Vue state, an API, or a chart library:

<template>
    <Spreadsheet ref="spreadsheet" :onchange="handleChange">
        <Worksheet :data="data" :columns="columns" />
    </Spreadsheet>
</template>

All events are listed in the events documentation.

How Jspreadsheet Compares to Other Vue Spreadsheet Libraries

AG Grid is a strong choice for read-heavy analytics grids. Handsontable is a capable spreadsheet component with a different licensing model. Choose Jspreadsheet when your users expect a real spreadsheet: formulas, XLSX round trips, and Excel behavior, at a lower total cost of ownership. See the detailed Handsontable comparison, AG Grid comparison, and pricing.

Frequently Asked Questions

Is there a free Vue spreadsheet component?

Yes. Jspreadsheet CE is MIT-licensed and free, including for commercial use. The Pro edition on this page adds XLSX import and export, the 500+ function formula engine, real-time collaboration, and more, with a 30-day free trial and no credit card required.

Does Jspreadsheet support Vue 3 and the Composition API?

Yes. The official wrapper works with Vue 3, supports both the Composition API and the Options API, and ships TypeScript definitions. In Nuxt, render the spreadsheet on the client side since it interacts with the DOM directly.

Can users open and save Excel files?

Yes. XLSX, XLS, and CSV import and export are built in. Formulas, cell formatting, merged cells, and multiple worksheets are preserved in both directions.

How many rows can a Vue spreadsheet handle?

Hundreds of thousands of rows. Virtual rendering only draws visible cells, so scrolling and editing stay smooth as data grows.

What is the difference between a Vue spreadsheet and a Vue data grid?

A spreadsheet gives users free-form editing with formulas and Excel behavior. A data grid presents structured records with typed columns and validation. Jspreadsheet does both: see the Vue data grid page for the data-centric view, or the Vue table page for lightweight editable tables.

More resources

Vue documentation · Getting started · Examples · Vue data grid · Vue table · React spreadsheet · Angular spreadsheet