documentation(EJ2-1015792): Added content for spreadsheet architecture overview.

Document-Processing-toc.html

@@ -5480,6 +5480,7 @@
 									<li><a href="/document-processing/excel/spreadsheet/react/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio">Publish Spreadsheet Server to Azure App Service using Visual Studio</a></li>
 								</ul>
 							</li>
+							<li><a href="/document-processing/excel/spreadsheet/react/architecture">Architecture</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/worksheet">Worksheet</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/cell-range">Cell Range</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/editing">Editing</a></li>

Document-Processing/Excel/Spreadsheet/React/architecture.md

@@ -0,0 +1,289 @@
+---
+layout: post
+title: Spreadsheet architecture overview | Syncfusion
+description: Learn here all about the architecture overview React Spreadsheet component of Syncfusion Essential JS 2 in a Create React App project.
+control: Architecture
+platform: document-processing
+documentation: ug
+---
+
+# Spreadsheet Architecture Guide
+
+## Introduction
+
+The **Syncfusion React Spreadsheet** is a web-based Excel-like editor that operates through a three-tier architecture. This guide explains how the spreadsheet handles rendering, calculations, and data flow. Whether working with local datasets or server-side data, understanding these layers helps you work effectively with the component.
+
+---
+
+## Part 1: React Spreadsheet Architecture Overview
+
+### Three-Tier Architecture
+
+The Spreadsheet operates through three distinct layers that work together to deliver the complete experience:
+
+```
+┌─────────────────────────────────────────────┐
+│  Application & React Integration            │
+├─────────────────────────────────────────────┤
+│  Spreadsheet UI (Tier 1)                    │
+│  - Selection, editing, keyboard shortcuts   │
+│  - User interactions & actions              │
+│  - DOM management and rendering             │
+├─────────────────────────────────────────────┤
+│  Workbook Model (Tier 2)                    │
+│  - Sheets, cells, formatting rules          │
+│  - Data structure & state management        │
+├─────────────────────────────────────────────┤
+│  Calculate Engine (Tier 3)                  │
+│  - Formula parsing and evaluation           │
+│  - Dependency tracking                      │
+└─────────────────────────────────────────────┘
+```
+
+### Key Components
+
+**Spreadsheet (UI Tier)**  
+The primary interface layer handles user interactions like cell selection, editing mode, clipboard operations, and keyboard shortcuts. It orchestrates feature modules for auto-fill, conditional formatting, data validation, and other user-facing capabilities.
+
+**Workbook (Data Tier)**  
+The central data model manages the complete structure of sheets, rows, columns, and cells. It stores formatting rules, validation settings, protection state, and undo/redo history. The workbook persists all data changes and communicates state updates to the UI layer.
+
+**Calculate Engine (Calculation Tier)**  
+This isolated engine handles all formula operations. It supports 150+ Excel-compatible functions, manages dependencies between cells, performs recalculation when data changes, and handles cross-sheet references and named ranges.
+
+**Data Flow: User Action to Update**
+
+When a user edits a cell:
+
+1. **UI captures interaction** → Selection and edit mode update
+2. **Action module processes** → Based on the interaction type (editing, formatting, copying), the appropriate feature module is triggered to determine what needs to change
+3. **Workbook updates** → Cell value or formatting changes in the data model
+4. **Calculate recalculates** (if applicable) → Dependent cells with formulas update in sequence
+5. **UI re-renders** → Changed cells display new values and updated styling
+
+This continuous flow ensures the UI always reflects the current state of the data model and all calculated values. Each step triggers the next, maintaining consistency across all layers.
+
+---
+
+## Part 2: Spreadsheet Rendering Architecture
+
+### How Rendering Works in the Browser
+
+Rendering in the Spreadsheet is optimized for performance and responsiveness. Rather than rendering every cell in a large dataset, the component uses **intelligent viewport-based rendering**.
+
+#### Rendering Layers
+
+**Viewport Rendering**  
+Instead of rendering every cell in a dataset, the Spreadsheet intelligently renders only the cells currently visible on screen. As users scroll, new cells come into view while off-screen cells are removed. This technique handles millions of rows smoothly without memory issues.
+
+```
+┌─────────────────┐
+│  OFF-SCREEN     │ (not rendered)
+├─────────────────┤
+│  VIEWPORT       │ (actively rendered)
+│  (visible area) │ (visible cells only)
+├─────────────────┤
+│  OFF-SCREEN     │ (not rendered)
+└─────────────────┘
+```
+
+**Cell Formatting**  
+Individual cells display content with applied formatting including colors, fonts, alignment, borders, wrapping, and hyperlinks. When users apply formatting (such as bold text, background colors, or text alignment), this information is stored in the data model. The renderer then converts these stored formatting rules into CSS styles and DOM attributes. This means formatting persists even when cells scroll out of view, and updates are immediately reflected on screen without data loss.
+
+**Headers and Frozen Areas**  
+Row and column headers remain visible when scrolling. When you freeze columns or rows, they stay visible while the rest of the sheet scrolls, providing a fixed reference point.
+
+#### How Rendering Happens
+
+The rendering process follows these steps:
+
+1. **Calculate**: Determine cell sizes based on content and formatting
+2. **Position**: Arrange cells, rows, and columns on the grid
+3. **Create**: Build DOM elements for visible cells only
+4. **Style**: Apply formatting (colors, fonts, borders)
+5. **Update**: Add or remove cells as user scrolls
+
+**Performance Benefits:**
+- Only visible cells occupy memory
+- Smooth scrolling on large datasets
+- Responsive interactions even with millions of cells
+- Efficient updates when data changes
+
+---
+
+## Part 3: Formula Calculation Engine Architecture
+
+### How Formulas Work
+
+The Calculate engine is independent from the UI, allowing formulas to be evaluated consistently whether in the browser or on the server.
+
+#### Calculation Workflow
+
+```
+Formula Input
+    ↓
+Parser (tokenizes formula)
+    ↓
+Dependency Analyzer (identifies cell references)
+    ↓
+Calculation Queue (processes in order)
+    ↓
+Formula Evaluator (executes function logic)
+    ↓
+Result Storage (updates cell value)
+    ↓
+Dependent Cell Update (recalculates dependent cells)
+```
+
+#### Key Capabilities
+
+**Formula Support**  
+The engine parses and evaluates Excel-like formulas. It supports 150+ Excel-compatible functions for mathematical calculations, text manipulation, dates, logic, lookups, and statistics.
+
+**Dependency Tracking**  
+The engine tracks which cells depend on which other cells. When a source cell changes, the engine automatically recalculates all cells that depend on it in the correct sequence.
+
+For example:
+- If cell B1 = 10
+- And B2 = B1 + 5 (depends on B1)
+- And B3 = B2 * 2 (depends on B2)
+- Then changing B1 automatically updates B2, then B3
+
+**Cross-Sheet Formulas**  
+Formulas can reference cells from other sheets in the same workbook, enabling complex calculations across multiple sheets.
+
+**Named Ranges**  
+You can assign meaningful names to cell ranges, making formulas more readable and self-documenting. For example, instead of writing `=SUM(A1:A100)`, you can define a named range called "SalesTotal" and use `=SUM(SalesTotal)` in your formulas. This approach makes spreadsheets easier to understand and maintain, reduces errors from mistyped cell references, and makes formulas read like English sentences rather than cryptic cell addresses.
+
+**Error Handling**  
+The engine detects and reports formula errors with specific information about what went wrong. Division by zero occurs when a formula attempts to divide a number by zero or an empty cell. Invalid references happen when a formula refers to a cell that no longer exists or has been deleted. Wrong data types occur when you try to perform mathematical operations on text values instead of numbers. Circular references are detected when a formula directly or indirectly refers to itself, which would create an infinite calculation loop. The engine prevents these errors from corrupting your spreadsheet and displays clear error indicators so you can identify and fix the issues.
+
+#### Calculation Modes
+
+**Automatic (Default)**  
+Formulas update immediately whenever their dependent cells change.
+
+**Manual**  
+Formulas update only when explicitly triggered, useful for large spreadsheets where recalculating every change would impact performance.
+
+---
+
+## Part 4: Data Binding Architecture
+
+### Local Data Binding
+
+When data originates in the application, it flows directly to the client-side Spreadsheet without server involvement.
+
+#### Local Data Flow
+
+```
+Application Data
+    ↓
+Convert to Workbook Model (JSON)
+    ↓
+Spreadsheet Component
+    ↓
+Render in Browser
+```
+
+**Example:**
+```typescript
+const data = [
+  { id: 1, name: 'Product A', price: 100 },
+  { id: 2, name: 'Product B', price: 200 }
+];
+
+<Spreadsheet dataSource={data} />
+```
+
+**When to use:**
+- Data already loaded in the application
+- Small to medium datasets (< 100K rows)
+- Real-time data updates from the app
+- No server-side processing needed
+
+**Characteristics:**
+- No server latency
+- All data held in memory
+- User edits update application state
+- Perfect for forms and data entry tools
+
+### Remote Data Binding
+
+When importing external files like Excel or CSV, a server-side step converts them to the workbook model.
+
+#### Remote Data Flow
+
+```
+User selects file
+    ↓
+Client sends file to server
+    ↓
+Server converts to internal format
+    ↓
+Client receives Workbook model
+    ↓
+Spreadsheet renders model
+```
+
+**Server Conversion:**
+The server parses Excel/CSV files and converts them into a format the Spreadsheet understands. This process preserves formatting, formulas, and structure from the original file.
+
+**When to use:**
+- Importing Excel files
+- Loading data from external sources
+- Sharing spreadsheets between systems
+- Preserving Excel formatting and formulas
+
+**Characteristics:**
+- Server handles file parsing
+- Maintains Excel formatting and formulas
+- Flexible import from multiple file types
+- Server endpoint required
+
+### Hybrid Data Binding (Local + Remote)
+
+The Spreadsheet supports flexible combinations of local and remote data, enabling you to design workflows that match your application's unique needs. You can start by loading initial data locally from your application, then later import updated datasets from the server when users need refreshed information. This allows you to control timing and minimize network requests while maintaining up-to-date data.
+
+Alternatively, you can start with a file imported from the server, allow users to edit it entirely on the client with full spreadsheet functionality, and then export the modified version back to the server for persistence or sharing. Another common pattern is binding specific cells or ranges to remote data sources (such as database queries) while keeping other cells as static local data entered by users. This hybrid approach gives you the flexibility to combine real-time data, user edits, and server operations in a single workflow. For example, a financial dashboard might load budget data from a database while allowing users to add their own projections and notes locally.
+
+---
+
+## Part 5: Client-Side and Server-Side Processing
+
+### Client-Side Processing
+
+Client-side processing handles operations that occur directly in the browser without requiring server involvement. The Spreadsheet performs formula calculations, sorting and filtering, cell formatting and styling, undo/redo history management, data validation checks, and cell editing all on the client. This approach offers several advantages: there is no server latency, the application works offline, users receive instant feedback for their actions, and server load is reduced.
+
+However, client-side processing does have limitations. It is constrained by browser memory capacity, so extremely large datasets may encounter performance issues. Security is also a consideration since formulas and data are visible to users in the browser. Additionally, calculation performance depends on the user's browser and device capabilities. A typical client-side operation follows this flow: when a user edits cell A1, validation checks occur immediately, formulas recalculate instantly, and the UI updates without any server communication.
+
+### Server-Side Processing
+
+Server-side processing handles operations that require backend infrastructure and computational resources. The server handles file import and export operations, converting between file formats like Excel and internal workbook models. It performs advanced report generation, loads data from external sources like databases, and executes secure computations that should not be exposed to the client. This approach excels at handling large files efficiently, processing sensitive data away from the client browser, maintaining consistency across different browsers and devices, and accessing external databases and services.
+
+However, server-side processing introduces network latency since every operation requires communication with the server. It also requires a backend infrastructure with appropriate endpoints configured, and uses more server resources since computations run on the server. A typical server-side operation follows this flow: when a user imports an Excel file, the client sends the file to the server, the server parses and converts it to the appropriate format, the client receives the converted data, users then edit locally, and when ready to export, the client sends the updated model back to the server where it converts to Excel format for download.
+
+### Decision Matrix
+
+| Scenario | Location | Reason |
+|----------|----------|--------|
+| Cell editing | Client | Immediate feedback |
+| Formula calculation | Client | No latency |
+| Excel import | Server | File parsing complexity |
+| Data export | Server | Format conversion |
+| Data validation | Client | Real-time feedback |
+| External data source | Server | Database access |
+| Sorting small dataset | Client | No latency |
+| Sorting large dataset | Either | Consider network vs. memory |
+| Protected calculations | Server | Security |
+
+---
+
+Understanding these layers helps you architect applications that leverage the Spreadsheet component effectively.
+
+## See Also
+
+- [Getting Started with React Spreadsheet](./getting-started)
+- [Data Binding](./data-binding)
+- [Formulas](./formulas)
+- [Events](./events)