Vue Data Grid Component

Used by the world's leading companies

Build a Vue Data Grid 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 a data grid with typed columns:

<template>
    <Spreadsheet ref="spreadsheet">
        <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('OTQ2ZDgzZDY3MWY0YWQ2MTcxMzczZjE5ODk2YWZlNDVlODQxMGUyODE2MzE5NTVjMmRmZDdhZjQ5NTMxZmQzOTMwZWEwNDhhMTdkY2IwNzE0YzBkMjc2NzdmOTQ0ZjE3YzBmYWViYzE5MDUzMTJhZmJjNTFiZGY4NTMzMTBiNjIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpnMk5UZzJPRGt3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

export default {
    components: { Spreadsheet, Worksheet },
    data() {
        return {
            data: [
                ['SKU-100', 'Keyboard', 'Hardware', '2026-01-15'],
                ['SKU-101', 'CRM License', 'Software', '2026-02-01'],
                ['SKU-102', 'Monitor', 'Hardware', '2026-03-10'],
            ],
            columns: [
                { title: 'SKU', width: '120px' },
                { title: 'Product', width: '220px' },
                { title: 'Category', type: 'dropdown', source: ['Hardware', 'Software'], width: '160px' },
                { title: 'Added', type: 'calendar', width: '140px' },
            ],
        };
    },
};
</script>

You get an editable Vue data grid with dropdown and calendar editors, Excel-style keyboard navigation, and copy and paste that plays nicely with Excel and Google Sheets. The Vue documentation covers events and methods, and the columns documentation lists every column type.

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 Data Grid

Admin panels and CRUD interfaces

Replace per-row edit forms with inline editing. Users update records directly in the grid with dropdowns, calendars, and checkboxes enforcing valid input. The columns documentation lists every editor type.

Grids that stay in sync with your application

Every edit fires an event you can bind as a prop, so keeping Vue state, an API, or a chart in sync is one handler away:

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

Read the current grid state at any time with getData(). All events are listed in the events documentation.

Calculated columns with Excel formulas

Unlike most Vue data grids, Jspreadsheet ships a formula engine. Add computed columns with the same syntax users know from Excel:

const data = [
    ['Keyboard', 25, 40, '=B1*C1'],
    ['Monitor', 12, 180, '=B2*C2'],
];

See the formulas documentation for custom functions and the complete 500+ function set.

Excel round trips

Import an XLSX file into the grid, edit it, and export it back with formulas, formatting, and worksheets intact. See import from XLSX and export to XLSX.

How Jspreadsheet Compares to Other Vue Data Grid Libraries

AG Grid excels at read-heavy analytics with server-side row models, grouping, and pivoting. If your grid is mostly presentation, it is a fine choice. Choose Jspreadsheet when users edit data: cell-level validation, Excel behavior, formulas, and XLSX round trips come standard, at a lower total cost per developer. See the detailed AG Grid comparison, Handsontable comparison, and pricing.

Frequently Asked Questions

Is there a free Vue data grid with editing?

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.

How does Jspreadsheet handle large datasets in Vue?

Virtual rendering draws only the visible cells, so grids with hundreds of thousands of rows scroll and edit smoothly, without pagination tricks.

Does the Vue data grid support column types and validation?

Yes. Columns can be text, numeric, dropdown, calendar, checkbox, color, image, and more. Each type brings its own editor and validation, so bad data never enters the grid.

Can I export the grid to Excel?

Yes. XLSX, XLS, and CSV import and export are built in, preserving formulas, formatting, and multiple worksheets. No third-party spreadsheet library required.

When should I choose a data grid over a spreadsheet component?

Choose a data grid for structured records with typed columns and validation. Choose a spreadsheet for free-form editing with formulas. Jspreadsheet does both: see the Vue spreadsheet page for the spreadsheet model, or the Vue table page for lightweight editable tables.

More resources

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