DHTMLX React Spreadsheet

Getting started | API overview | License | Useful links

DHTMLX React Spreadsheet is a React wrapper for the DHTMLX Spreadsheet library.

It provides a declarative way to integrate DHTMLX Spreadsheet's Excel-like functionality — cell editing, formulas, formatting, filtering, sorting, multi-sheet support, and more — directly into React apps.

Important: this npm package is a trial build intended for evaluation only. For access to commercial licenses and technical support, please visit: https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml

Getting started

Install package

Professional Evaluation version:

npm install @dhtmlx/trial-react-spreadsheet

And initialize:

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

const sheets: SheetData[] = [
	{
		id: "sheet1",
		name: "Sales",
		cells: {
			A1: { value: "Product" },
			B1: { value: "Revenue", format: "currency" },
			A2: { value: "Widget A" },
			B2: { value: 1500, format: "currency" },
		},
	},
];

export default function App() {
	return (
		<div style={{ width: "100%", height: "500px" }}>
			<ReactSpreadsheet
				sheets={sheets}
				onAfterEditEnd={(cell, value) => {
					console.log(`Cell ${cell} updated to: ${value}`);
				}}
			/>
		</div>
	);
}

Requirements

• React 18.x or newer

Complete guides

• https://docs.dhtmlx.com/spreadsheet/

API overview

Data — sheets, styles, activeSheet, search, loadUrl

Configuration — menu, editLine, toolbarBlocks, multiSheets, formats, readonly, rowsCount, colsCount, localization, importModulePath, exportModulePath

Appearance — theme (light, dark, contrast-light, contrast-dark), className, style

Events — 21 callbacks covering actions, selection, editing, sheets, and data lifecycle (e.g. onBeforeAction, onAfterEditEnd, onAfterSheetChange, onStateChange)

Ref API — access the underlying DHTMLX instance via SpreadsheetRef for imperative operations (serialize, undo/redo, programmatic selection)

TypeScript — full type exports: SheetData, CellData, SearchConfig, Actions enum, and all event handler types

License

@license

DHTMLX Spreadsheet for React v.6.0.0 Evaluation

This software is covered by DHTMLX Evaluation License and purposed only for evaluation. Contact [email protected] to get Commercial or Enterprise license. Usage without proper license is prohibited.

(c) XB Software.

Useful links

• DHTMLX Spreadsheet product page
• Official documentation
• Online examples
• Support forum