React Data Grid Component

Used by the world's leading companies

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

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('ZThiZGI0ZjBiN2RhMjM1ZmIzMzIwOGUwNGNjOGI2NzFlOGE4YWFiYWUzOTY3YzkwOTgxMmQ4MjgxNjFjNGFhMWI0ZGY2YTJjYjQzZGNkNTk2NTdiM2RkYzk1NmY2YTIyZGY3MDQ1ZTA4ZDZmZWU3YTJjYTE1NjljMWFkOGQ4ZTksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpnMk5UZzNORFF5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

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

    const data = [
        ['SKU-100', 'Keyboard', 'Hardware', '2026-01-15'],
        ['SKU-101', 'CRM License', 'Software', '2026-02-01'],
        ['SKU-102', 'Monitor', 'Hardware', '2026-03-10'],
    ];

    const columns = [
        { title: 'SKU', width: '120px' },
        { title: 'Product', width: '220px' },
        { title: 'Category', type: 'dropdown', source: ['Hardware', 'Software'], width: '160px' },
        { title: 'Added', type: 'calendar', width: '140px' },
    ];

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

You get an editable React data grid with dropdown and calendar editors, Excel-style keyboard navigation, and copy and paste that plays nicely with Excel and Google Sheets. The React documentation covers events, methods, and hooks, 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 React 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 handle as a component prop, so keeping React state, an API, or a chart in sync is one handler away:

<Spreadsheet ref={spreadsheet} onchange={(worksheet, cell, x, y, value) => {
    updateRecord(y, x, value);
}}>
    <Worksheet data={data} columns={columns} />
</Spreadsheet>

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 React 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 React 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 React 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 React?

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

Does the React 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 React spreadsheet page for the spreadsheet model, or the React table page for lightweight editable tables.

More resources

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