React Table Component

Used by the world's leading companies

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

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

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

    const data = [
        ['Ana', 'ana@company.com', 'Active'],
        ['Bruno', 'bruno@company.com', 'Pending'],
        ['Carla', 'carla@company.com', 'Active'],
    ];

    const columns = [
        { title: 'Name', width: '180px' },
        { title: 'Email', width: '240px' },
        { title: 'Status', type: 'dropdown', source: ['Active', 'Pending', 'Disabled'], width: '140px' },
    ];

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

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 React documentation covers events, methods, and hooks, 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 React 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:

// Read the full table
const rows = spreadsheet.current[0].getData();

// Or handle each change as it happens
<Spreadsheet ref={spreadsheet} onchange={(worksheet, cell, x, y, value) => {
    saveChange(y, x, value);
}}>
    <Worksheet data={data} columns={columns} />
</Spreadsheet>

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

TanStack Table is 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 React 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 React 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 TanStack Table?

TanStack Table is headless: it manages table state and you build every cell, editor, and interaction yourself. Jspreadsheet ships the complete editing UI, including Excel-style navigation, typed column editors, copy and paste, and formulas.

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

More resources

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