JavaScript Table Component

Used by the world's leading companies

Build an Editable JavaScript Table in Two Minutes

Install with the wizard, which sets up everything for your project:

npx @jspreadsheet/install

Or install manually:

npm install jspreadsheet

Then create an editable table with pagination, no framework required:

import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";

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

jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        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' },
        ],
        pagination: 10,
    }]
});

Nothing else is required: inline editing, keyboard navigation, copy and paste, sorting, and pagination all work out of the box. It runs with plain script tags or any bundler, and official wrappers exist for React, Vue, and Angular. 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 JavaScript 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 handler:

const worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{ data, columns }],
    onchange: (worksheet, cell, x, y, value) => {
        saveChange(y, x, value);
    },
});

// Read the full table whenever needed
const rows = worksheets[0].getData();

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 JavaScript Table Libraries

Tabulator is a solid free choice for read-heavy tables with occasional edits. Choose Jspreadsheet when editing is the point: Excel-style interaction, typed editors, clipboard support, and formulas work 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 JavaScript table library 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 Tabulator or DataTables?

Those libraries are read-first tables with editing added on. Jspreadsheet is editing-first: Excel-style navigation, typed column editors, copy and paste from Excel, and formulas all ship in the core.

Does the JavaScript 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 JavaScript data grid for large structured datasets with validation. Use a JavaScript spreadsheet for free-form editing with formulas. All three run on the same Jspreadsheet engine.

More resources

Getting started · Documentation · Examples · JavaScript spreadsheet · JavaScript data grid · React table · Vue table · Angular table