Introducing DHTMLX Spreadsheet 6.0 with React Integration, Custom Formulas, and Scientific Notation

React

DHTMLX React Spreadsheet

Name: React Spreadsheet Component Library | DHTMLX
Rating: 4.7 (47 reviews)

Build Excel-like interfaces in modern React apps faster with a ready-to-use DHTMLX Spreadsheet for React component, official docs, and live demos.

Get free trial

View docs

npm i @dhtmlx/trial-react-spreadsheet

Click to copy

Get free trial

View docs

Copy npm command

Click to copy

Deployment covered

with every license.

100+ awards

Unlimited end-users

for your SaaS app based

on React JS Spreadsheet.

DHTMLX React Spreadsheet Key Features

The React Spreadsheet component combines familiar spreadsheet capabilities with a React-friendly integration, making it easy to deliver Excel-like experiences inside modern web apps. It supports client-side editing and formatting, multi-sheet workbooks, a rich set of formulas, and customizable UI controls for navigation and layout.

Flexible spreadsheet editing and formatting

DHTMLX React Spreadsheet delivers an intuitive Excel-like editing experience inside the browser, so end-users can work with data without leaving your React application. The component supports full row and column operations, including add, delete, hide, resize, and auto-fit, giving users the flexibility they need for everyday spreadsheet tasks. Combined with read-only support and file exchange, it offers a complete spreadsheet solution for React projects.

Filtering and sorting Searching Excel import & export Undo/redo Read-only Locked cells

Multi-sheet workbooks with powerful formula support

End-users can organize related data across multiple sheet tabs within a single workbook and add, remove, and rename sheets as projects grow. Combined with 90+ built-in functions and rich number formatting, the React Spreadsheet component handles everything from simple data entry to advanced calculations. Whether you're building finance dashboards, reporting tools, or planning interfaces, the spreadsheet delivers the calculation power users expect in a clean interface.

90+ built-in formulas Cell values Number formatting Add/remove sheet tabs Active sheet switching

Configurable spreadsheet controls

DHTMLX Spreadsheet for React gives you full control over how the interface looks and behaves. You can empower end-users to merge content, freeze panes, and validate input to keep data clean and tables well-structured. The toolbar, context menu, and locales are all configurable. You can easily reorder or extend toolbar blocks to match your product's workflow without rebuilding standard controls from scratch.

Merged cells Frozen panes Configurable toolbar Hotkey navigation Localization

Flexible UI customization and theming

The React Spreadsheet component includes the everyday workflow features users expect, along with the styling options needed for enterprise-grade interfaces. Four built-in themes, including light, dark, contrast-light, and contrast-dark, can be applied or switched at runtime, and a layered CSS variable system lets you create fully custom themes to match your app's design.

Built-in themes CSS variable customization Custom themes TypeScript support

Get Started with React Spreadsheet

Download trial version

Get access to the free 30-day evaluation version of DHTMLX React Spreadsheet by downloading a package or installing it via npm (npm i @dhtmlx/trial-react-spreadsheet).

Use supporting materials

Simplify learning by using the documentation and examples on GitHub for detailed instructions on how to integrate DHTMLX Spreadsheet into your React application.

Select a suitable license

After evaluation, choose the Spreadsheet license that fits your team size, number of projects, and whether you're building a SaaS product.

How to Create and Use React Spreadsheet

Click to copy

import { useState } from "react";
import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet";
import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css";

function App() {
    const [sheets] = useState<SheetData[]>([
        {
            id: "sheet1",
            name: "Sales",
            cells: {
                A1: { value: "Product", css: "bold" },
                B1: { value: "Revenue", css: "bold", format: "currency" },
                A2: { value: "Widget" },
                B2: { value: 15000, format: "currency" },
            },
        },
    ]);

    const styles = {
        bold: { "font-weight": "bold" },
    };

    return <ReactSpreadsheet sheets={sheets} styles={styles} activeSheet="sheet1" />;
}

Click to copy

import { useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet";
import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css";
import type { RootState } from "./store";
import { setSheets } from "./store/spreadsheetSlice";

const styles = {
    bold: { "font-weight": "bold" },
};

function App() {
    const ref = useRef<SpreadsheetRef>(null);
    const dispatch = useDispatch();
    const sheets = useSelector((state: RootState) => state.spreadsheet.sheets);
    const activeSheet = useSelector((state: RootState) => state.spreadsheet.activeSheet);

    const handleAfterAction = () => {
        const data = ref.current?.instance?.serialize();
        if (data?.sheets) {
            dispatch(setSheets(data.sheets));
        }
    };

    return (
        <div style={{ width: "100%", height: "100vh" }}>
            <ReactSpreadsheet
                ref={ref}
                sheets={sheets}
                styles={styles}
                activeSheet={activeSheet}
                onAfterAction={handleAfterAction}
            />
        </div>
    );
}

export default App;

Click to copy

"use client";

import { useState } from "react";
import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet";
import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css";

const initialSheets: SheetData[] = [
    {
        id: "sheet1",
        name: "Data",
        cells: {
            A1: { value: "Name", css: "bold" },
            B1: { value: "Value", css: "bold" },
            A2: { value: "Item 1" },
            B2: { value: 100 },
        },
    },
];

const styles = {
    bold: { "font-weight": "bold" },
};

export default function SpreadsheetView() {
    const [sheets] = useState<SheetData[]>(initialSheets);

    return (
        <div style={{ width: "100%", height: "100vh" }}>
            <ReactSpreadsheet sheets={sheets} styles={styles} activeSheet="sheet1" />
        </div>
    );
}

Click to copy

import { useState } from "react";
import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet";
import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css";

function App() {
    const [sheets] = useState<SheetData[]>([
        {
            id: "sheet1",
            name: "Sales",
            cells: {
                A1: { value: "Product", css: "bold" },
                B1: { value: "Revenue", css: "bold", format: "currency" },
                A2: { value: "Widget" },
                B2: { value: 15000, format: "currency" },
            },
        },
    ]);

    const styles = {
        bold: { "font-weight": "bold" },
    };

    return <ReactSpreadsheet sheets={sheets} styles={styles} activeSheet="sheet1" />;
}

Set up the React Spreadsheet component

Install the React Spreadsheet component with the DHTMLX React Spreadsheet package, which is available as a public evaluation build or as a commercial release through the private DHTMLX registry. The package requires React 18 or higher and includes bundled TypeScript types.

The ReactSpreadsheet component uses a props-based API. In the basic example, the sheets prop defines the spreadsheet content, while styles and activeSheet configure its appearance and initial state.

How to create a Spreadsheet in React

Click to copy

import { useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet";
import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css";
import type { RootState } from "./store";
import { setSheets } from "./store/spreadsheetSlice";

const styles = {
    bold: { "font-weight": "bold" },
};

function App() {
    const ref = useRef<SpreadsheetRef>(null);
    const dispatch = useDispatch();
    const sheets = useSelector((state: RootState) => state.spreadsheet.sheets);
    const activeSheet = useSelector((state: RootState) => state.spreadsheet.activeSheet);

    const handleAfterAction = () => {
        const data = ref.current?.instance?.serialize();
        if (data?.sheets) {
            dispatch(setSheets(data.sheets));
        }
    };

    return (
        <div style={{ width: "100%", height: "100vh" }}>
            <ReactSpreadsheet
                ref={ref}
                sheets={sheets}
                styles={styles}
                activeSheet={activeSheet}
                onAfterAction={handleAfterAction}
            />
        </div>
    );
}

export default App;

Use React Spreadsheet with Redux

You can keep spreadsheet data in a Redux Toolkit store and pass it to ReactSpreadsheet through useSelector. After user actions, the component state is serialized from the spreadsheet instance and dispatched back to the store with onAfterAction, which keeps the UI and Redux state in sync.

React Spreadsheet with Redux toolkit

Click to copy

"use client";

import { useState } from "react";
import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet";
import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css";

const initialSheets: SheetData[] = [
    {
        id: "sheet1",
        name: "Data",
        cells: {
            A1: { value: "Name", css: "bold" },
            B1: { value: "Value", css: "bold" },
            A2: { value: "Item 1" },
            B2: { value: 100 },
        },
    },
];

const styles = {
    bold: { "font-weight": "bold" },
};

export default function SpreadsheetView() {
    const [sheets] = useState<SheetData[]>(initialSheets);

    return (
        <div style={{ width: "100%", height: "100vh" }}>
            <ReactSpreadsheet sheets={sheets} styles={styles} activeSheet="sheet1" />
        </div>
    );
}

Full support for JSX, TSX, and Next.js

DHTMLX React Spreadsheet ships with bundled TypeScript type definitions. Full JSX and TSX support lets you work with React's syntax and TypeScript's type-checking to build and maintain spreadsheet interfaces confidently. The component also works in Next.js with the App Router. Since the spreadsheet is a client-side widget, wrap it in a client component using the "use client" directive and import it into your server page.

Next.js integration guide

Why Choose DHTMLX React Spreadsheet?

Native React integration with a declarative API

DHTMLX React Spreadsheet delivers a native React experience. You can manage all spreadsheet data through one prop, handle updates with typed callbacks, and use refs for export, programmatic selection, and other imperative actions.

Full TypeScript support out of the box

The package ships with bundled type definitions and JSDoc descriptions, so no separate types package is required. You get full JSX and TSX support and smooth integration with Next.js App Router for server‑rendered apps.

Flexible state management and Redux integration

Spreadsheet data can be managed within React state or synced with Redux Toolkit. All cell and sheet updates flow through standard Redux actions, making data predictable and easy to trace. The component automatically serializes edits back to the store to keep UI and app state aligned.

Feature-rich Spreadsheet component for enterprise use

DHTMLX React Spreadsheet provides advanced spreadsheet features out of the box: 90+ formulas, multi-sheet editing, validation, filtering, frozen panes, undo/redo, and XLSX import/export. Built-in row and column operations give users full control without additional development.

Deep customization without rebuilding from scratch

The toolbar, context menu, and hotkeys are fully configurable. You can extend toolbar controls, add custom menu items, switch themes at runtime, and style the UI with CSS variables. Full React Spreadsheet localization supports labels, formulas, and date/number formats.

Get started for free

Download the DHTMLX React Spreadsheet trial version and test it completely free of charge for 30 days, taking advantage of our email technical support.

Get React Spreadsheet trial

Get Accurate AI Help
for DHTMLX Spreadsheet

Connect your AI coding assistant to the official DHTMLX Spreadsheet documentation via the MCP server. Get real-time access to accurate API references, configuration options, and usage examples without leaving your AI workflow.

Try DHTMLX MCP server

Get Accurate AI Help for DHTMLX Spreadsheet

Free Trial

Explore enterprise-grade features of DHTMLX React Spreadsheet with a 30-day trial.

Get started for free

Changelog

Full changelog

Samples & Docs

About DHTMLX Spreadsheet

Documentation

Online samples

React Spreadsheet on GitHub

Other integrations

Community forum

DHTMLX Spreadsheet Licensing

Individual

Total: $599

Buy now

Commercial

Total: $1299

Buy now

Enterprise

Total: $2899

Buy now

Ultimate

Total: $5799

Buy now

License Terms	Read License Agreement	Read License Agreement	Read License Agreement	Read License Agreement
Developers	1	5	20
Projects	1	1	5
Use in SaaS (unlimited end-users)
Source code
Perpetual distribution rights

Support Plan

Standard

Premium

Ultimate

Time Period	1 year	1 year	1 year	1 year
Updates	Major, minor, and maintenance updates	Major, minor, and maintenance updates	Major, minor, and maintenance updates	Major, minor, and maintenance updates Priority queue for bug fixing
Support requests	10	30	50
Response time	72h	48h	48h	24h
Personal Account Manager

Functionality

PRO

PRO + 1 add-on

Online export to Excel	Free	Free	Free	Free
Free local Excel export module

Individual

$599

Buy now

License Terms	Read License Agreement
Developers	1
Projects	1
Use in SaaS (unlimited end-users)
Source code
Perpetual distribution rights

Support Plan

Standard

Time Period	1 year
Updates	Major, minor, and maintenance updates
Support requests	10
Response time	72h
Personal Account Manager

Functionality

PRO

Online export to Excel	Free
Free local Excel export module

Commercial

$1299

Buy now

License Terms	Read License Agreement
Developers	5
Projects	1
Use in SaaS (unlimited end-users)
Source code
Perpetual distribution rights

Support Plan

Premium

Time Period	1 year
Updates	Major, minor, and maintenance updates
Support requests	30
Response time	48h
Personal Account Manager

Functionality

PRO

Online export to Excel	Free
Free local Excel export module

Enterprise

$2899

Buy now

License Terms	Read License Agreement
Developers	20
Projects	5
Use in SaaS (unlimited end-users)
Source code
Perpetual distribution rights

Support Plan

Premium

Time Period	1 year
Updates	Major, minor, and maintenance updates
Support requests	50
Response time	48h
Personal Account Manager

Functionality

PRO + 1 add-on

Online export to Excel	Free
Free local Excel export module

Ultimate

$5799

Buy now

License Terms	Read License Agreement
Developers
Projects
Use in SaaS (unlimited end-users)
Source code
Perpetual distribution rights

Support Plan

Ultimate

Time Period	1 year
Updates	Major, minor, and maintenance updates Priority queue for bug fixing
Support requests
Response time	24h
Personal Account Manager

Functionality

PRO + 1 add-on

Online export to Excel	Free
Free local Excel export module

DHTMLX React Spreadsheet: Frequently Asked Questions

What are the requirements for using DHTMLX React Spreadsheet?

DHTMLX React Spreadsheet requires React 18 or higher. The package is distributed via npm and is available as a public evaluation build for free 30-day trials, or as a commercial release via the private DHTMLX registry. No additional peer dependencies are required to get started.

Can I use DHTMLX React Spreadsheet with Next.js?

The component works with Next.js App Router. Since the spreadsheet is a client-side widget that requires browser DOM access, you need to wrap it in a client component using the "use client" directive and import it into your server page. The documentation includes a dedicated Next.js integration guide with a complete working example.

Does the component support TypeScript?

The React Spreadsheet package ships with bundled type definitions and JSDoc descriptions, so no separate types package is needed. Full JSX and TSX support lets you work with React's syntax and TypeScript's type-checking across your entire spreadsheet integration.

Can I manage spreadsheet data with Redux?

Spreadsheet data can be managed within React state or connected to a Redux Toolkit store. All cell and sheet updates flow through standard Redux actions, and the component serializes the current state on every user edit and dispatches it back to the store automatically, thus keeping the UI and application state in sync without manual handling.

How many end-users can access my SaaS app built with DHTMLX React Spreadsheet?

There are no limits on the number of end-users for SaaS applications built with DHTMLX React Spreadsheet. The license covers your development team, not the users of the product you build.

What license do I need for a commercial project?

DHTMLX React Spreadsheet is available under Commercial, Enterprise, and Ultimate licenses. The right choice depends on your team size, the number of projects, and whether you're building a SaaS product. You can evaluate all features free of charge for 30 days before selecting a license.

Latest Blog Posts

DHTMLX JavaScript Components for Data Analysis Apps: Spreadsheet

March 25, 2026

12 min read

Announcing the Repackaged DHTMLX Grid and Brand-New Table Pack Bundle

October 29, 2024

2 min read

Guide into CRUD Operations in JavaScript by DHTMLX

November 30, 2022

4 min read

What's new

Discover the recently launched DHTMLX Spreadsheet versions, fresh developer guides, and tutorials with code snippets and practical tips from our tech team.

Dive deeper

DHTMLX React Spreadsheet

DHTMLX React Spreadsheet Key Features

Flexible spreadsheet editing and formatting

Multi-sheet workbooks with powerful formula support

Configurable spreadsheet controls

Flexible UI customization and theming

Get Started with React Spreadsheet

How to Create and Use React Spreadsheet

Why Choose DHTMLX React Spreadsheet?

Get Accurate AI Help for DHTMLX Spreadsheet

Free Trial

Changelog

Samples & Docs

DHTMLX Spreadsheet Licensing

DHTMLX React Spreadsheet: Frequently Asked Questions

Latest Blog Posts

Get Accurate AI Help
for DHTMLX Spreadsheet