React Spreadsheet Component

Used by the world's leading companies

Create a React Spreadsheet in Two Minutes

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

npx @jspreadsheet/install

Or install the React wrapper manually:

npm install @jspreadsheet/react

Then render your first spreadsheet component:

import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

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

export default function App() {
    const spreadsheet = useRef();

    const data = [
        ['Mazda', 2001, 2000, '=B1*C1'],
        ['Peugeot', 2010, 5000, '=B2*C2'],
        ['Honda Fit', 2009, 3000, '=B3*C3'],
    ];

    const columns = [
        { title: 'Model', width: '250px' },
        { title: 'Year', width: '100px' },
        { title: 'Price', width: '100px' },
        { title: 'Total', width: '120px' },
    ];

    return (
        <Spreadsheet ref={spreadsheet} toolbar={true} tabs={true}>
            <Worksheet data={data} columns={columns} />
        </Spreadsheet>
    );
}

That is a complete Excel-like React spreadsheet: editable cells, live formulas, keyboard navigation, copy and paste from Excel, and an optional toolbar with worksheet tabs. Using Next.js? Render the component inside a client component, since the spreadsheet works with the DOM directly. From here, the React documentation covers events, methods, and hooks in detail, 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 React 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 your 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 React 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 handle as a component prop, which makes it straightforward to sync spreadsheet data with your React state, an API, or a chart library:

<Spreadsheet ref={spreadsheet} onchange={(worksheet, cell, x, y, value) => {
    console.log(`Cell (${x}, ${y}) changed to ${value}`);
}}>
    <Worksheet data={data} columns={columns} />
</Spreadsheet>

All events are listed in the events documentation.

How Jspreadsheet Compares to Other React Spreadsheet Libraries

AG Grid is a strong choice for read-heavy analytics grids with server-side row models. 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 React 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 work with modern React and TypeScript?

Yes. The wrapper supports hooks and function components, ships TypeScript definitions, and works in strict mode. In Next.js, render the spreadsheet inside a client component 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 React 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 React spreadsheet and a React 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 React data grid page for the data-centric view, or the React table page for lightweight editable tables.

More resources

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