Vue Table Component

Used by the world's leading companies

Build an Editable Vue Table 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 an editable table with pagination:

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data" :columns="columns" :pagination="10" />
    </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('ZDIzMWMyNDU0ZTgxYzFiYTZjNTk4NDMzMDc4MWViNDUxZDU1ZjU4NzAyMjJhNWZkZjExZjBhYjE0ZDVkOWE3YjViZWU0MjJmZTk5ZTY5MjU2YmUyYjQxMGRkOTQ1ZGY3MzVmYjQ1NzNkOTYzNmE1NTAyZGU1MTFmYWJjYmU3ZWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpnMk9UWXlOakF4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

export default {
    components: { Spreadsheet, Worksheet },
    data() {
        return {
            data: [
                ['Ana', 'ana@company.com', 'Active'],
                ['Bruno', 'bruno@company.com', 'Pending'],
                ['Carla', 'carla@company.com', 'Active'],
            ],
            columns: [
                { title: 'Name', width: '180px' },
                { title: 'Email', width: '240px' },
                { title: 'Status', type: 'dropdown', source: ['Active', 'Pending', 'Disabled'], width: '140px' },
            ],
        };
    },
};
</script>

Unlike headless table utilities, nothing else is required: inline editing, keyboard navigation, copy and paste, sorting, and pagination all work out of the box. The Vue documentation covers events and methods, and the getting started guide explains every 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 Table

Editable lists and CRUD tables

User management, task lists, inventory: any list your users need to edit inline. Dropdown, calendar, and checkbox columns validate input at the cell, and the context menu handles row insertion and deletion without extra code.

Tables that report their own state

Read the whole table as an array at any time, or react to individual edits with an event prop:

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

Call getData() on the worksheet to read the full table. All events are listed in the events documentation.

Excel-friendly workflows

Users can paste ranges straight from Excel or Google Sheets into the table, and export the result to XLSX or CSV when they are done. See export to XLSX.

How Jspreadsheet Compares to Other Vue Table Libraries

Headless utilities are excellent when you want full control of markup and are ready to build editors, clipboard handling, and keyboard navigation yourself. Choose Jspreadsheet when you want an editable, Excel-friendly Vue table working today, with a path to a full data grid or spreadsheet later. See the Handsontable comparison and pricing.

Frequently Asked Questions

Is there a free Vue table component 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 is Jspreadsheet different from headless table libraries?

Headless libraries manage table state and leave every cell, editor, and interaction for you to build. Jspreadsheet ships the complete editing UI, including Excel-style navigation, typed column editors, copy and paste, and formulas.

Does the Vue table support pagination and sorting?

Yes. Pagination, sorting, filtering, and search are built in and configurable per worksheet, as shown in the quickstart above.

Can users edit cells directly in the table?

Yes. Every cell is editable inline with Excel-style keyboard navigation. Columns enforce types such as dropdown, calendar, and checkbox, so invalid input never reaches your data.

When do I need a data grid or spreadsheet instead of a table?

Use a table for lightweight editable lists. Use a Vue data grid for large structured datasets with validation. Use a Vue spreadsheet for free-form editing with formulas. All three run on the same Jspreadsheet engine.

More resources

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