React Spreadsheet Editor Overview
To add spreadsheet editing to a React application, integrate the Apryse Web SDK (WebViewer) with the Spreadsheet Editor add-on. The SDK loads XLSX, XLS, and CSV files and runs the entire edit session in the browser through WebAssembly, with no server round trip for document processing. The document viewer SDK uses an event to check if the Spreadsheet Editor is ready before loading spreadsheet files.
Get a trial license key and follow along: Start a Free Trial
React Spreadsheet Editor vs React Data Grid
A Spreadsheet Editor and a data grid solve different problems. A React data grid displays and manipulates tabular data, typically with sorting, filtering, and column configuration built on top of an array of rows. Essentially, data grids are intended to display your data in a familiar, spreadsheet-like interface. In comparison, the Spreadsheet Editor opens and edits the spreadsheet file itself, including formulas, charts, and cell formatting, without converting the file.
Use a data grid when the application already has structured data in memory and needs fast tabular interaction. Use the Spreadsheet Editor when users need to open, edit, and hand back an actual XLSX, XLS, or CSV file, including one built by someone else in Excel.
Building a DOCX Editor into the same application follows the same integration pattern described below, since both add-ons share the WebViewer constructor and event-gate model. If the application is built on Angular instead of React, the Angular spreadsheet integration guide covers the equivalent setup.
Developers evaluating this capability in React typically compare it against AG Grid or Handsontable, both data grid libraries, against SheetJS, a file-parsing library with no visual editor, or against Syncfusion's React Spreadsheet component, the closest like-for-like alternative with its own grid-based editing UI.
Implementation Details
Installing the Apryse WebViewer SDK in React
To install via npm, use:
WebViewer also requires copying static assets from node_modules/@pdftron/webviewer/public into a publicly served directory before the SDK will initialize. See the static assets guide for full instructions, including automation options for webpack and Parcel.
In the component, a useRef holds the DOM element the SDK mounts into, and a useEffect calls the WebViewer constructor once that element exists. The constructor requires a path to the copied assets and a license Key. Both must be present, since a constructor missing either fails immediately.
For the full setup, see the React get started docs.
Listening for the SPREADSHEET_EDITOR_READY Event
SPREADSHEET_EDITOR_READY is the event gate for the Spreadsheet Editor. The SpreadsheetEditorManager and the Workbook object are only accessible after this event fires. Calling setEditMode, reading a cell, or touching a chart before that point does not throw an error. It fails silently, which makes the missing event listener a common first bug for developers new to the add-on.
Register the listener on documentViewer immediately after the WebViewer constructor resolves, before calling loadDocument. That ordering guarantees the listener is in place before the event has a chance to fire.
Loading Spreadsheet Files in React
While data grid components can't load XLSX files without additional installs, Apryse WebViewer can view and edit PDF, DOCX and XLSX files, as well as CAD and images. Spreadsheet Editor activates automatically once an XLSX, XLS, or CSV file is loaded into a WebViewer instance with the add-on license.
- Remote URL: pass the URL to documentViewer.loadDocument(url). Supports HTTP and HTTPS, including S3 buckets.
- Local file: pass a File or Blob from a file input or drag-and-drop handler directly to loadDocument().
- In-memory document: pass a base64 string or ArrayBuffer to loadDocument().
XLS and CSV files convert to XLSX in the browser on load. The source file in storage is not modified.
Enabling Edit Mode
The Spreadsheet Editor opens in View mode by default, which allows grid navigation and viewing calculated cells and formulas but no editing. Switch to Edit mode explicitly:
setEditMode takes the SpreadsheetEditorEditMode enum rather than a boolean. In Edit mode, users can format cells (font, size, color, borders, bold, italic, underline, strikethrough), add, edit, and delete rows and columns, cut, copy and paste, and merge cells.
Formula Support
Formula support covers common formulas across math and trigonometry, statistics, date and time, text, logical, lookup and reference, financial, and engineering categories. Find the full list in our documentation.
Chart Support
The Spreadsheet Editor renders Column, Bar, Pie, Donut, Line, Area, Scatter, Stock, Radar, Histogram, and Sunburst charts. Three-dimensional chart types render as their two-dimensional equivalent.
Users can select, move, and resize charts already present in a workbook, and the API exposes those same interactions for building custom controls into the application. Chart creation, chart styling, and chart type changes are not currently supported.
Exporting and Saving from React
The Spreadsheet Editor saves and downloads the edited workbook as XLSX or PDF. It does not save or export back to XLS or CSV.
Client-Side Processing and Data Residency
Spreadsheet Editor, including opening a file, evaluating a formula, rendering a chart, saving an edit, runs inside the browser through Apryse's WebAssembly-compiled core. No document content is transmitted to Apryse infrastructure at any point. For teams evaluating client-side spreadsheet processing for data residency requirements, this means spreadsheet data never leaves the boundary the browser already operates inside, without a server component in the request path.
