{"id":15536,"date":"2026-05-21T11:11:38","date_gmt":"2026-05-21T08:11:38","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=15536"},"modified":"2026-06-30T18:47:01","modified_gmt":"2026-06-30T15:47:01","slug":"meet-dhtmlx-spreadsheet-6-0","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/meet-dhtmlx-spreadsheet-6-0\/","title":{"rendered":"Meet DHTMLX Spreadsheet 6.0 with React Wrapper, Custom Formulas, Scientific Notation, and More"},"content":{"rendered":"

Today, we are delighted to announce the highly anticipated release of DHTMLX Spreadsheet 6.0. In this iteration, we take a major step toward modern React development workflows by introducing the React Spreadsheet wrapper. This novelty enables you to add the time-tested JavaScript Spreadsheet<\/a> functionality to React apps in a familiar, declarative way. The wrapper covers all major spreadsheet capabilities and, when needed, provides direct access to the native API, which also received useful updates. Specifically, v6.0 adds support for custom formulas, requested conditional aggregate functions, scientific notation, flexible font-size settings, and JSDoc annotations. <\/p>\n\n\t\t

\n\t\t
\n\t\t
\n\t\t
Download DHTMLX Spreadsheet v6.0<\/div>\n\t\t
Estimate the updated functionality for delivering Excel-like data tables<\/div>\n <\/div>\n\t\t \n \n
\n Get free trial<\/a>\n <\/div>\n \n <\/div>\n\t\t<\/div>\n\t\n

Now, let us delve into the details. <\/p>\n

What You Get with React Spreadsheet<\/h2>\n

React is still considered an industry standard for building modern business apps, thanks to its component-based architecture and scalability, while Excel-like spreadsheets remain relevant for data analysis. The new DHTMLX wrapper helps development teams address both these needs. It is designed to work seamlessly with modern React (18 and later versions) and follows the main React principles, making it easier to configure a powerful spreadsheet via props.<\/p>\n

Here is a basic setup that shows how to import and render a basic spreadsheet table in React:<\/p>\n

import<\/span> {<\/span> useState }<\/span> from "react"<\/span>;<\/span>
\nimport<\/span> {<\/span> ReactSpreadsheet,<\/span> type SheetData }<\/span> from "@dhtmlx\/trial-react-spreadsheet"<\/span>;<\/span>
\nimport<\/span> "@dhtmlx\/trial-react-spreadsheet\/spreadsheet.react.css"<\/span>;<\/span>
\n
\nfunction<\/span> App(<\/span>)<\/span> {<\/span>
\n   const<\/span> [<\/span>sheets]<\/span> =<\/span> useState<<\/span>SheetData[<\/span>]<\/span>><\/span>(<\/span>[<\/span>
\n       {<\/span>
\n           id:<\/span> "sheet1"<\/span>,<\/span>
\n           name:<\/span> "Sales"<\/span>,<\/span>
\n           cells:<\/span> {<\/span>
\n               A1:<\/span> {<\/span> value:<\/span> "Product"<\/span>,<\/span> css:<\/span> "bold"<\/span> }<\/span>,<\/span>
\n               B1:<\/span> {<\/span> value:<\/span> "Revenue"<\/span>,<\/span> css:<\/span> "bold"<\/span>,<\/span> format:<\/span> "currency"<\/span> }<\/span>,<\/span>
\n               A2:<\/span> {<\/span> value:<\/span> "Widget"<\/span> }<\/span>,<\/span>
\n               B2:<\/span> {<\/span> value:<\/span> 15000<\/span>,<\/span> format:<\/span> "currency"<\/span> }<\/span>,<\/span>
\n           }<\/span>,<\/span>
\n       }<\/span>,<\/span>
\n   ]<\/span>)<\/span>;<\/span>
\n
\n   const<\/span> styles =<\/span> {<\/span>
\n       bold:<\/span> {<\/span> "font-weight"<\/span>:<\/span> "bold"<\/span> }<\/span>,<\/span>
\n   }<\/span>;<\/span>
\n
\n   return<\/span> <<\/span>ReactSpreadsheet sheets=<\/span>{<\/span>sheets}<\/span> styles=<\/span>{<\/span>styles}<\/span> activeSheet=<\/span>"sheet1"<\/span> \/>;<\/span>
\n}<\/span><\/div><\/div>\n

Under the hood, all spreadsheet data is organized via the sheets<\/strong> prop, which acts as the single source of truth. In the example above, this prop is used to specify a single sheet and formatted cells. <\/p>\n

Using props, you can extend the spreadsheet with other popular features available in DHTMLX Spreadsheet: multiple sheets, predefined formulas, number formatting, themes, localization, data manipulations, and more. <\/p>\n

Props describe the UI state. So when they are updated, the wrapper synchronizes the underlying widget accordingly. Props differ in update behavior. Check the documentation to learn how props are categorized by this criterion<\/a> and gain a deeper understanding of state management<\/a> in the React Spreadsheet.<\/p>\n

The wrapper also provides typed event callbacks (like onAfterAction<\/strong> shown below) to respond to user interactions.<\/p>\n

<<\/span>ReactSpreadsheet
\n   sheets=<\/span>{<\/span>sheets}<\/span>
\n   onAfterAction=<\/span>{<\/span>(<\/span>action,<\/span> config)<\/span> =><\/span> {<\/span>
\n       console.log<\/span>(<\/span>"Action:"<\/span>,<\/span> action,<\/span> "Cell:"<\/span>,<\/span> config.cell<\/span>)<\/span>;<\/span>
\n   }<\/span>}<\/span>
\n\/><\/span><\/div><\/div>\n

If the spreadsheet table’s default configuration does not meet your needs, you can customize any UI elements (toolbar, context menu, search bar, etc.). For example, if you need to display the toolbar with a specific set of controls, you need to pass an array of block identifiers to toolbarBlocks<\/strong>, as shown below:<\/p>\n

<<\/span>ReactSpreadsheet
\n   sheets=<\/span>{<\/span>sheets}<\/span>
\n   toolbarBlocks=<\/span>{<\/span>[<\/span>"undo"<\/span>,<\/span> "colors"<\/span>,<\/span> "decoration"<\/span>,<\/span> "align"<\/span>,<\/span> "format"<\/span>]<\/span>}<\/span>
\n\/><\/span><\/div><\/div>\n

While most of the spreadsheet UI is configured via declarative props, some features are better handled via an imperative approach. For such cases, the wrapper allows accessing the underlying Spreadsheet API via SpreadsheetRef<\/strong>:<\/p>\n

import<\/span> {<\/span> useRef }<\/span> from "react"<\/span>;<\/span>
\nimport<\/span> {<\/span> ReactSpreadsheet,<\/span> type SpreadsheetRef }<\/span> from "@dhtmlx\/trial-react-spreadsheet"<\/span>;<\/span>
\n
\nfunction<\/span> App(<\/span>)<\/span> {<\/span>
\n   const<\/span> ref =<\/span> useRef<<\/span>SpreadsheetRef><\/span>(<\/span>null<\/span>)<\/span>;<\/span>
\n
\n   const<\/span> handleExport =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
\n       const<\/span> data =<\/span> ref.current<\/span>?<\/span>.instance<\/span>?<\/span>.serialize<\/span>(<\/span>)<\/span>;<\/span>
\n       console.log<\/span>(<\/span>data)<\/span>;<\/span>
\n   }<\/span>;<\/span>
\n
\n   const<\/span> handleUndo =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
\n       ref.current<\/span>?<\/span>.instance<\/span>?<\/span>.undo<\/span>(<\/span>)<\/span>;<\/span>
\n   }<\/span>;<\/span>
\n
\n   return<\/span> (<\/span>
\n       <><\/span>
\n           <<\/span>button onClick=<\/span>{<\/span>handleExport}<\/span>><\/span>Export<\/<\/span>button><\/span>
\n           <<\/span>button onClick=<\/span>{<\/span>handleUndo}<\/span>><\/span>Undo<\/<\/span>button><\/span>
\n           <<\/span>ReactSpreadsheet ref=<\/span>{<\/span>ref}<\/span> sheets=<\/span>{<\/span>[<\/span>]<\/span>}<\/span> \/><\/span>
\n       <\/><\/span>
\n   )<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

It works well for serializing data, triggering undo\/redo operations, or managing selections programmatically. <\/p>\n

How to Get and Where to Start<\/h3>\n

The first thing to mention is that the React Spreadsheet wrapper will be a free addition<\/strong> to the DHTMLX JS Spreadsheet distributed under Commercial<\/strong>, Enterprise<\/strong>, and Ultimate<\/strong> licenses.<\/p>\n

After reading the information above, you should have a general understanding of the wrapper and its working principles. Now, you can move from theory to practice. To try DHTMLX React Spreadsheet in action absolutely free of charge, you have two options on npm:<\/p>\n