<
DHTMLX Spreadsheet 5.1 with New Themes, Simplified Localization of Number Formats, Live Integration Demos with Frameworks, and More
React

DHTMLX React Spreadsheet

Elegant React JS spreadsheet with Material skin and flexible customization for fast and secure editing and formatting of data.

Try DHTMLX React Spreadsheet Live Demo

Open a demo on desktop
Spreadsheet by DHTMLX helps in creating Excel-like data tables with minimum time and effort.

How to Create React Spreadsheet

5 steps to start with DHTMLX Spreadsheet React:
1.
Create a Spreadsheet.jsx file and import files and styles of Spreadsheet.
2.
Add an empty container for Spreadsheet using the useRef() function.
4.
When the component is initialized, render a Spreadsheet instance with the useEffect() method and attach it to the container with the ref attribute.
5.
Specify a data set and load Spreadsheet with data using the parse() method.

React Spreadsheet Key Features

Built-in features
Add-on
Simple customization
Using 170+ predefined functions
The React JS Spreadsheet library is equipped with an extensive array of built-in mathematical formulas and functions for strings, financial tasks, and information processing. Users can take advantage of these functions to carry out various calculations with values and strings since they are compatible with both Excel and Google Sheets.
Using 170+ predefined functions
Working with multiple sheets
Empower your users to navigate through multiple sheets seamlessly. This involves the options to add new sheets, rename them, remove unnecessary ones, and switch between active sheets. Additionally, end-users can consolidate data from multiple sheets with the help of cross-referencing.
Working with multiple sheets
Number formatting
With DHTMLX Spreadsheet React, users can input a range of numeric values into cells, including digits, percentages, and currency symbols. Moreover, you can adjust default number format settings or create custom formats.
Number formatting
Using 170+ predefined functions
Excel export module
We provide a separate module for exporting spreadsheets to Excel files. This module can be installed directly on your server or as a Docker image. You'll also receive all updates and fixes to the export service and consultations related to the Spreadsheet component.
Excel export module
PDF/PNG export module
Adding custom icons and toolbar buttons
By default, DHTMLX Spreadsheet uses Material Design icons, but you have the flexibility to add any other icon font pack. You can also apply preferred controls to the toolbar, for instance, attach a custom button for removing all sheet content with a single click.
Enriching context menu controls
In addition to customizing the toolbar’s look and feel, you can style other elements of the spreadsheet, including the menu and context menu. Therefore, you can attach a Paint format control to the context menu, providing end-users with the option to easily save cell styles and apply them to other cells.
Setting custom read-only mode
In addition to enabling the read-only mode for the entire Spreadsheet React, you can also restrict specific operations for cells. For instance, it's possible to limit the options for editing and styling content of individual cells.

Why Choose DHTMLX Spreadsheet?

Spreadsheet in React apps
DHTMLX Spreadsheet written initially in JavaScript provides flawless integration with React. It takes about 5 quick steps to run your spreadsheet component, which you will find in our documentation. Apart from that, there's built-in support for Angular, Vue.js, and Svelte.
Secure data processing
With our React spreadsheet library, processing data is secured by being conducted on your own server. Ajax technology allows you to render the spreadsheet promptly on a web page. End users may access the spreadsheet in an edit mode or read-only mode according to the settings you prefer to define.
Extended customization
DHTMLX Spreadsheet consists of several configurable parts: menu, context menu, toolbar, editing line, and grid. Depending on your requirements, you can simply switch on or off some of these elements or change their configuration. For instance, change default toolbar icons for custom ones, remove or add toolbar controls, add custom menu items, etc.
Operations on data
Working with DHTMLX Spreadsheet is similar to working with tabular data in Excel, as our library is supplied with a range of such essential options as block selection, undo/redo commands, locking cells, pasting additional columns and rows, changing columns' size, which is available due to the simple yet detailed API. Operations on data are intuitive and familiar for end-users.
Styling data in the grid
Moreover, end-users benefit from styling options for presenting data the way they need. For example, it's possible to define the color of the cells' background, text alignment and decoration, etc. If needed, end users may clear the styles applied at any moment.
Get started for free
Download the DHTMLX Spreadsheet trial version and test it completely free of charge for 30 days taking advantage of our email technical support.

DHTMLX Spreadsheet Licensing

Spreadsheet
💎 Save on bundles
Individual Commercial Enterprise Ultimate
License Terms
Individual
Commercial
Enterprise
Ultimate
Developers
Individual
1
Commercial
5
Enterprise
20
Ultimate
Projects
Individual
1
Commercial
1
Enterprise
5
Ultimate
Use in SaaS (unlimited end-users)
Individual
Commercial
Enterprise
Ultimate
Perpetual distribution rights
Individual
Commercial
Enterprise
Ultimate
Support Plan
Individual
Standard Support
Commercial
Premium Support
Enterprise
Premium Support
Ultimate
Ultimate Support
Time Period
Individual
1 year
Commercial
1 year
Enterprise
1 year
Ultimate
1 year
Updates
Individual
Major, minor, and maintenance updates
Commercial
Major, minor, and maintenance updates
Enterprise
Major, minor, and maintenance updates
Ultimate
Major, minor, and maintenance updates
Priority queue for bug fixing
Support requests
Individual
10
Commercial
30
Enterprise
50
Ultimate
Response Time
Individual
72h
Commercial
48h
Enterprise
48h
Ultimate
24h
Personal Account Manager
Individual
Commercial
Enterprise
Ultimate
Functionality
Individual
Professional
Commercial
Professional
Enterprise
Professional
Ultimate
Professional
Online export to Excel
Individual
Free
Commercial
Free
Enterprise
Free
Ultimate
Free
Free local Excel export module
Individual
Commercial
Enterprise
Ultimate
Documentation
Refer to documentation
Explore the Spreadsheet documentation where we’ve described API features and added step-by-step guides and tutorials. It also includes instructions for smoothly integrating the pure JavaScript component into different frameworks, including Angular, React, Svelte, and Vue.js.
Samples
Explore code snippets
Create and configure spreadsheets online, explore code possibilities, and share your customized examples with your team or DHTMLX support using our flexible code snippet tool.
Free trial
Download Spreadsheet trial
Evaluate the features of DHTMLX Spreadsheet by downloading the free 30-day trial version. It includes the latest updates, allows you to access the official technical support, and does not require providing your credit card details.
Official tech support
Learn about technical support
Read about the available methods to get technical or licensing support. The DHTMLX team provides support to proprietary license owners as well as trial users.
Community forum
Use DHTMLX forum
Find a proper solution in a base of knowledge shared by DHTMLX users and learn from the experiences of skilled developers. We monitor discussions and respond to commonly asked questions.
Blog
Keep up with updates
Delve into the DHTMLX blog, an extensive resource where we’re posting information on the latest Spreadsheet releases with detailed feature descriptions, helpful tips, technical tutorials, and updates on other offerings and developments.
Manage large data sets conveniently with DHTMLX Spreadsheet
Download the Spreadsheet trial version and evaluate it free of
charge for 30 days getting assistance from the official support team.
NO credit card required