Syncfusion React Spreadsheet Editor

Syncfusion React Spreadsheet Editor

Overview

This skill helps developers generate React (JSX/TSX) code for integrating the Syncfusion Spreadsheet Editor into their applications. It provides ready-to-use code snippets, API guidance, and best practices for building Excel-like functionality in React projects.

Key Capabilities

• File Operations: Import/export Excel files (xlsx, xls, xlsb), CSV files, and PDF export
• Data Management: Data binding, editing, sorting, filtering, and validation
• Cell Operations: Formatting (fonts, colors, borders, alignment), merge cells, wrap text
• Formulas & Calculations: Built-in Excel formulas, custom functions, named ranges
• Collaboration: Notes, comments, and threaded discussions
• Advanced Features: Charts, images, hyperlinks, conditional formatting, freeze panes, sheet protection, virtualization for large datasets

Quick Start Examples

Example 1: Generate Spreadsheet with Formatting

User: "Create a Spreadsheet with data and apply cell styles"

Result: A React (JSX) code snippet is generated that loads provide data into the Spreadsheet and applies basic cell formatting.

Example 2: Generate Code for Loading a File

User: "Create a Spreadsheet and load an Excel file initially"

Result: A React (JSX) code snippet is generated that initializes the Spreadsheet and programmatically opens an Excel file on startup.

Getting Started — Minimal React Code

Minimal React Spreadsheet setup for a plain web project:

import * as React from 'react';
import { SheetsDirective, SheetDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RowsDirective, RowDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

function Default() {
    const spreadsheetRef = React.useRef(null);
    return (<div className='control-pane'>
            <div className='control-section spreadsheet-control'>
                <SpreadsheetComponent ref={spreadsheetRef}>
                    <SheetsDirective>
                        <SheetDirective>
                          <RowsDirective>
                                  <RowDirective>
                                      <CellsDirective>
                                          <CellDirective value="Hello, Spreadsheet!" ></CellDirective>
                                      </CellsDirective>
                                  </RowDirective>
                              </RowsDirective>
                            </SheetDirective>
                    </SheetsDirective>
                </SpreadsheetComponent>
            </div>
        </div>);
}
export default Default;

Generate React (JSX) Code for the User's Project

Trigger keywords: "react spreadsheet", "spreadsheet editor", "syncfusion spreadsheet", "excel component", "load excel file", "open excel file", "import excel", "export excel file", "save excel", "export to pdf", "export to csv", "view excel", "configure spreadsheet", "create spreadsheet", "add spreadsheet", "spreadsheet data", "cell formatting", "apply formulas", "insert chart", "data binding", "spreadsheet validation", "freeze panes", "protect sheet"

Workflow:

1. Identify the requested Spreadsheet feature (data binding, formulas, charts, export, etc.).

2. Read the relevant references/*.md file(s) to understand the APIs and code patterns for the requested feature.

   • For create, initialize, render, package setup, CSS setup, or basic Spreadsheet requests, read references/getting-started.md first.

3. STOP before generating code, installing packages, creating files, or modifying project files. Check if the user has already chosen a delivery mode.

4. If no delivery mode is chosen yet, you MUST ask the user first using this concise multiple-choice question:

   "How would you like to receive the generated Spreadsheet code?"

   • Option 1: Replace the code in a specific project file (you'll need to provide the file path and confirm)
   • Option 2: Save the code in this skill's output folder at {skill-root}/syncfusion-react-spreadsheet-editor/output/app.jsx (or .tsx)
   • Option 3: Share the code directly in the chat window

5. If the user selects Option 1, validate the provided project file/folder path before generating or replacing code.

   • If the provided path is an existing React project and contains package.json, continue with the previous behavior.
   • If the provided path is an empty folder or does not contain a React project, do not edit files and do not end the chat.
   • Explain that a React project is required before replacing project files.
   • Ask whether the user wants to set up/install React first using references/getting-started.md.
   • Do not create project files, install packages, or run setup commands automatically unless the user explicitly confirms.

6. Only after the user selects a delivery mode and Option 1 path validation is complete, proceed to generate React(JSX/TSX) code using the APIs and snippets from references/*.md, substituting concrete placeholders from the user's project.

7. Do NOT make changes to workspace project files unless the user explicitly chose Option 1, provided a valid React project file/folder path, and gave permission.

8. If no React project or package.json is detected, explain that a React project is required first and provide setup guidance from references/getting-started.md. Do not create project files, install packages, or run setup commands automatically unless the user explicitly requested React app creation and provided permission.

9. Create a new React application/project only when the user explicitly asks for it, such as:

   • "create a React application and render Spreadsheet"
   • "create a new React app with Spreadsheet"
   • "create Vite/Next.js app and add Spreadsheet"

   If the user only asks to create, add, render, or configure the Spreadsheet component, do not scaffold a new React application. Treat it as Spreadsheet component/code generation for an existing React project.

10. When generating code for an existing React project, include required package and CSS setup guidance from references/getting-started.md.

11. Provide complete React snippets and concise integration steps after delivering the code.

Refer to ## Rules section for operational constraints (output directory, temporary files, allowed libraries, etc.)

Code References

All code snippets and examples are in the references/ folder. Each file contains:

• Minimal React(JSX) Code — a working, ready-to-use snippet
• Placeholders — values the user must customize
• Notes — React best practices and constraints

Key Rules for Code Generation (React (JSX)-first)

1. React (JSX)-first snippets — All examples and snippets must be written in React JSX and compile with the current @syncfusion/ej2-react-spreadsheet npm package. If the user asks for providing React TSX, provide React TSX codes.

2. No inline code in this manifest — Refer to references/*.md for runnable snippets; keep this file as the concise policy and index.

3. Reference file requirements — Each reference must include:

   • Minimal React (JSX) Code (complete, runnable)
   • Placeholders (clearly marked values to replace)
   • Notes (React integration steps and best practices)

4. License handling — Do not hardcode license keys; refer users to env variables or project config.

5. Preserve data integrity — Preserve existing formulas, references, and formatting when generating or editing sheets.

6. No hallucinated APIs — Use verified Syncfusion Spreadsheet Editor Component method names only.

7. Read references first — For any requested feature, always read the relevant references/*.md file(s) first before generating code.

8. Build strictly from references — Build React code strictly from the APIs, methods, properties, events, and snippets found in the reference files. Do NOT invent, guess, or suggest any API, method, property, or event not explicitly present in the reference files.

Rules

• Output files must go in {skill-root}/syncfusion-react-spreadsheet-editor/output/ directory when user selects Option 2
• Only use Syncfusion Spreadsheet APIs — never recommend or use alternative spreadsheet libraries (e.g., react-spreadsheet, handsontable, ag-grid)
• No temporary files — never create temporary scripts, intermediate files, or scaffolding outside the output directory
• React-only code — all generated code must be valid React (JSX/TSX), never generate vanilla JavaScript, jQuery, or non-React patterns
• Option 1 path validation: When the user selects Option 1, always validate the provided project file/folder path before editing or replacing files.
  • If the path contains an existing React project with package.json, continue with the normal code replacement flow.
  • If the path is empty or does not contain a React project, do not edit files and do not end the chat.
  • You MUST respond with a follow-up question instead of stopping.
  • Explain that a React project is required before replacing project files.
  • Ask whether the user wants setup guidance or wants to set up/install React first using references/getting-started.md.
  • Do not create project files, install packages, or run setup commands automatically unless the user explicitly confirms.
• React app creation constraint: Create or scaffold a new React application only when the user explicitly asks for React app/project creation, such as “create a React application and render Spreadsheet” or “create Vite/Next.js app and add Spreadsheet”. For normal prompts like “create a spreadsheet with data” or “add Spreadsheet”, treat the request as component code generation for an existing React project.

Security

• Docs-only: This skill contains documentation and reference snippets only; there is no bundled executable runtime code. Treat this repository as documentation unless runtime files are explicitly added.
• External downloads: Examples may reference Syncfusion domains or CDNs for demos. Prefer pinned packages (NuGet/npm) and verify signatures; do not copy CDN usage into production without integrity checks.
• Data exfiltration: Examples that call remote endpoints use placeholders (standardized to example.com). Do not send sensitive data to untrusted hosts - use mocked or local endpoints for samples.
• Prompt injection / untrusted input: Code examples include guidance to validate and whitelist user-supplied URLs, sanitize uploads, and HTML-encode outputs before rendering.