From 6e9705f422b15969642c1a5954f05722f17e9891 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Fri, 13 Mar 2026 20:00:39 +0530 Subject: [PATCH 1/5] 1015792: Added content for spreadsheet architecture overview. --- .../React/architecture/overview.md | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 Document-Processing/Excel/Spreadsheet/React/architecture/overview.md diff --git a/Document-Processing/Excel/Spreadsheet/React/architecture/overview.md b/Document-Processing/Excel/Spreadsheet/React/architecture/overview.md new file mode 100644 index 000000000..3fa15f476 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/architecture/overview.md @@ -0,0 +1,58 @@ +--- +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 Overview + +A spreadsheet application is a powerful tool designed to organize, analyze, and visualize data in a tabular format. Its architecture is typically modular, ensuring scalability, maintainability, and efficient performance. Below is an overview of the core components and their interactions: + +## 1. User Interface (UI) Layer + +- **Grid Display:** Renders rows and columns, allowing users to view and interact with cell data. +- **Toolbar & Ribbon:** Provides access to formatting, formulas, and other spreadsheet features. +- **Dialogs & Popups:** Used for advanced operations like find/replace, sorting, filtering, and chart insertion. + +## 2. Data Model Layer + +- **Cell Model:** Represents individual cells, storing values, formulas, formatting, and metadata. +- **Sheet Model:** Manages a collection of cells, rows, columns, and sheet-level properties. +- **Workbook Model:** Handles multiple sheets, global settings, and document-level metadata. + +## 3. Formula Engine + +- **Parser:** Interprets and validates user-entered formulas. +- **Evaluator:** Calculates formula results, supporting dependencies and recalculation logic. +- **Function Library:** Provides built-in mathematical, logical, and text functions. + +## 4. Data Management + +- **Data Binding:** Connects spreadsheet cells to external data sources for dynamic updates. +- **Import/Export:** Supports reading and writing various file formats (e.g., XLSX, CSV, PDF). +- **Undo/Redo Stack:** Tracks user actions for reversible operations. + +## 5. Rendering Engine + +- **Virtualization:** Efficiently renders only visible rows and columns for large datasets. +- **Styling Engine:** Applies formatting, themes, and conditional styles to cells and ranges. + +## 6. Event Handling & Scripting + +- **Event System:** Captures user actions (editing, selection, drag-and-drop) and triggers appropriate responses. +- **Custom Scripting:** Allows automation and extension through macros or embedded scripts. + +## 7. Security & Permissions + +- **Protection:** Supports sheet and cell locking, password protection, and access control. +- **Validation:** Ensures data integrity through input validation and error checking. + +## 8. Integration Layer + +- **APIs:** Exposes interfaces for embedding, automation, and integration with other applications. +- **Add-ins/Plugins:** Supports extensibility for custom features and third-party integrations. + +This modular architecture ensures that spreadsheet applications are robust, flexible, and capable of handling complex data processing tasks while providing a user-friendly experience. From 3460b4e87b6f5ade37e8f6f849a964b477d92033 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Mon, 16 Mar 2026 19:45:21 +0530 Subject: [PATCH 2/5] 1015792: Added content for spreadsheet architecture overview. --- .../Excel/Spreadsheet/React/architecture.md | 81 +++++++++++++++++++ .../React/architecture/overview.md | 58 ------------- 2 files changed, 81 insertions(+), 58 deletions(-) create mode 100644 Document-Processing/Excel/Spreadsheet/React/architecture.md delete mode 100644 Document-Processing/Excel/Spreadsheet/React/architecture/overview.md diff --git a/Document-Processing/Excel/Spreadsheet/React/architecture.md b/Document-Processing/Excel/Spreadsheet/React/architecture.md new file mode 100644 index 000000000..080f4bc18 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/architecture.md @@ -0,0 +1,81 @@ +--- +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 +--- + +# Syncfusion React Spreadsheet: Architecture Guide + +This guide provides a clear overview of the Syncfusion React Spreadsheet architecture, including its system organization, rendering process, formula engine, data binding strategies, and the division of responsibilities between client and server. + +## Table of Contents + +1. Architecture of Syncfusion React Spreadsheet +2. How Spreadsheet Rendering Works in Browser +3. Formula Calculation Engine Architecture +4. Data Binding Architecture (Local vs Remote) +5. Server-Side vs Client-Side Processing + +## Architecture of Syncfusion React Spreadsheet + +The Syncfusion React Spreadsheet is designed with a robust three-layer architecture, ensuring clear separation of concerns and optimal performance: + +- **User Interface Layer:** Handles all visual elements and user interactions, such as cell selection, editing, and formatting. +- **Data Model Layer:** Manages the workbook’s structure, including sheets, rows, columns, cell values, and formatting details. +- **Formula Engine Layer:** Responsible for parsing and evaluating formulas, tracking dependencies, and recalculating results as needed. + +This layered approach enhances scalability, testability, and reusability, allowing each part of the system to be optimized independently. + + +### Spreadsheet Architecture Overview + +``` +┌───────────────────────────────┐ +│ Application Layer │ +│ (Angular/React/Vue/TS/JS) │ +└──────────────┬────────────────┘ + │ + ▼ +┌───────────────────────────────┐ +│ Spreadsheet UI Layer │ +│ (Public API, UI Shell, │ +│ Rendering, Feature Modules) │ +└──────────────┬────────────────┘ + │ + ▼ +┌───────────────────────────────┐ +│ Workbook Model Layer │ +│ (Data Model, Actions, │ +│ Integrations, Services) │ +└──────────────┬────────────────┘ + │ + ▼ +┌───────────────────────────────┐ +│ Calculate Engine Layer │ +│ (Formula Parser, Functions, │ +│ Dependency Graph) │ +└───────────────────────────────┘ +``` + +## How Spreadsheet Rendering Works in Browser + +To deliver a smooth and responsive experience, the spreadsheet uses virtual scrolling. Only the rows and columns visible on the screen, along with a small buffer above and below, are rendered in the browser at any time. As users scroll, new rows are dynamically rendered while those that move out of view are removed from the DOM. This approach keeps memory usage low and ensures fast performance, even with very large datasets. Batch DOM updates, caching of row heights and column widths, and efficient rendering techniques further optimize the user experience. + +## Formula Calculation Engine Architecture + +The formula engine operates in three main steps: parsing, evaluation, and dependency tracking. When a formula is entered, it is first parsed and validated, then evaluated by retrieving referenced cell values and executing functions. The engine maintains a dependency graph to track which formulas depend on which cells. When a cell changes, only the affected formulas are recalculated, ensuring efficient updates. The engine supports a wide range of Excel-compatible functions and provides clear error codes for issues like invalid references or division by zero. + +For more information, you can refer to the formula documentation section. + +## Data Binding Architecture (Local vs Remote) + +The spreadsheet supports both local and remote data binding. With local data binding, all data is loaded into browser memory as a JavaScript array, enabling instant access and offline support for small to medium datasets. Remote data binding is designed for large datasets, where data is fetched from a server in small batches as needed. The browser requests only the visible rows and a buffer, minimizing memory usage and network traffic. Sorting and filtering operations are handled on the server, allowing the spreadsheet to efficiently manage millions of rows. + +For more information, you can refer to the data-binding documentation section. + +## Server-Side vs Client-Side Processing + +The spreadsheet intelligently divides processing tasks between the client (browser) and the server. Client-side processing handles tasks that require immediate feedback, such as UI rendering, cell editing, formula calculation, and small-scale sorting or filtering. Server-side processing is used for operations involving large datasets, data persistence, advanced calculations, and security validation. This division ensures a responsive user experience while maintaining scalability, data integrity, and security. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/React/architecture/overview.md b/Document-Processing/Excel/Spreadsheet/React/architecture/overview.md deleted file mode 100644 index 3fa15f476..000000000 --- a/Document-Processing/Excel/Spreadsheet/React/architecture/overview.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -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 Overview - -A spreadsheet application is a powerful tool designed to organize, analyze, and visualize data in a tabular format. Its architecture is typically modular, ensuring scalability, maintainability, and efficient performance. Below is an overview of the core components and their interactions: - -## 1. User Interface (UI) Layer - -- **Grid Display:** Renders rows and columns, allowing users to view and interact with cell data. -- **Toolbar & Ribbon:** Provides access to formatting, formulas, and other spreadsheet features. -- **Dialogs & Popups:** Used for advanced operations like find/replace, sorting, filtering, and chart insertion. - -## 2. Data Model Layer - -- **Cell Model:** Represents individual cells, storing values, formulas, formatting, and metadata. -- **Sheet Model:** Manages a collection of cells, rows, columns, and sheet-level properties. -- **Workbook Model:** Handles multiple sheets, global settings, and document-level metadata. - -## 3. Formula Engine - -- **Parser:** Interprets and validates user-entered formulas. -- **Evaluator:** Calculates formula results, supporting dependencies and recalculation logic. -- **Function Library:** Provides built-in mathematical, logical, and text functions. - -## 4. Data Management - -- **Data Binding:** Connects spreadsheet cells to external data sources for dynamic updates. -- **Import/Export:** Supports reading and writing various file formats (e.g., XLSX, CSV, PDF). -- **Undo/Redo Stack:** Tracks user actions for reversible operations. - -## 5. Rendering Engine - -- **Virtualization:** Efficiently renders only visible rows and columns for large datasets. -- **Styling Engine:** Applies formatting, themes, and conditional styles to cells and ranges. - -## 6. Event Handling & Scripting - -- **Event System:** Captures user actions (editing, selection, drag-and-drop) and triggers appropriate responses. -- **Custom Scripting:** Allows automation and extension through macros or embedded scripts. - -## 7. Security & Permissions - -- **Protection:** Supports sheet and cell locking, password protection, and access control. -- **Validation:** Ensures data integrity through input validation and error checking. - -## 8. Integration Layer - -- **APIs:** Exposes interfaces for embedding, automation, and integration with other applications. -- **Add-ins/Plugins:** Supports extensibility for custom features and third-party integrations. - -This modular architecture ensures that spreadsheet applications are robust, flexible, and capable of handling complex data processing tasks while providing a user-friendly experience. From f22d01ed976f1d11641ce058793247f6eaefba5c Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Mon, 16 Mar 2026 19:49:49 +0530 Subject: [PATCH 3/5] 1015792: Added content for spreadsheet architecture overview. --- Document-Processing-toc.html | 1 + 1 file changed, 1 insertion(+) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 7816b464a..43dd661b6 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5477,6 +5477,7 @@
  • Publish Spreadsheet Server to Azure App Service using Visual Studio
    • +
  • Architecture
  • Worksheet
  • Cell Range
  • Editing
    • From 98a0065da3dd931d0e25d22a278e9265e43c07fe Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Mon, 16 Mar 2026 19:51:09 +0530 Subject: [PATCH 4/5] 1015792: Added content for spreadsheet architecture overview. --- Document-Processing/Excel/Spreadsheet/React/architecture.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/architecture.md b/Document-Processing/Excel/Spreadsheet/React/architecture.md index 080f4bc18..e78de47c4 100644 --- a/Document-Processing/Excel/Spreadsheet/React/architecture.md +++ b/Document-Processing/Excel/Spreadsheet/React/architecture.md @@ -68,13 +68,13 @@ To deliver a smooth and responsive experience, the spreadsheet uses virtual scro The formula engine operates in three main steps: parsing, evaluation, and dependency tracking. When a formula is entered, it is first parsed and validated, then evaluated by retrieving referenced cell values and executing functions. The engine maintains a dependency graph to track which formulas depend on which cells. When a cell changes, only the affected formulas are recalculated, ensuring efficient updates. The engine supports a wide range of Excel-compatible functions and provides clear error codes for issues like invalid references or division by zero. -For more information, you can refer to the formula documentation section. +For more information, you can refer to the [formula](./formulas) documentation section. ## Data Binding Architecture (Local vs Remote) The spreadsheet supports both local and remote data binding. With local data binding, all data is loaded into browser memory as a JavaScript array, enabling instant access and offline support for small to medium datasets. Remote data binding is designed for large datasets, where data is fetched from a server in small batches as needed. The browser requests only the visible rows and a buffer, minimizing memory usage and network traffic. Sorting and filtering operations are handled on the server, allowing the spreadsheet to efficiently manage millions of rows. -For more information, you can refer to the data-binding documentation section. +For more information, you can refer to the [data-binding](./data-binding) documentation section. ## Server-Side vs Client-Side Processing From 31df3c5cbc309daddb5e1c7e2bdd384d4da0d9b7 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Fri, 27 Mar 2026 11:43:13 +0530 Subject: [PATCH 5/5] 1015792: Added content for spreadsheet architecture overview. --- .../Excel/Spreadsheet/React/architecture.md | 308 +++++++++++++++--- 1 file changed, 258 insertions(+), 50 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/architecture.md b/Document-Processing/Excel/Spreadsheet/React/architecture.md index e78de47c4..8838d2373 100644 --- a/Document-Processing/Excel/Spreadsheet/React/architecture.md +++ b/Document-Processing/Excel/Spreadsheet/React/architecture.md @@ -7,75 +7,283 @@ platform: document-processing documentation: ug --- -# Syncfusion React Spreadsheet: Architecture Guide +# Spreadsheet Architecture Guide -This guide provides a clear overview of the Syncfusion React Spreadsheet architecture, including its system organization, rendering process, formula engine, data binding strategies, and the division of responsibilities between client and server. +## Introduction -## Table of Contents +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. -1. Architecture of Syncfusion React Spreadsheet -2. How Spreadsheet Rendering Works in Browser -3. Formula Calculation Engine Architecture -4. Data Binding Architecture (Local vs Remote) -5. Server-Side vs Client-Side Processing +--- + +## 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 -## Architecture of Syncfusion React Spreadsheet +**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. -The Syncfusion React Spreadsheet is designed with a robust three-layer architecture, ensuring clear separation of concerns and optimal performance: +**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. -- **User Interface Layer:** Handles all visual elements and user interactions, such as cell selection, editing, and formatting. -- **Data Model Layer:** Manages the workbook’s structure, including sheets, rows, columns, cell values, and formatting details. -- **Formula Engine Layer:** Responsible for parsing and evaluating formulas, tracking dependencies, and recalculating results as needed. +**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. -This layered approach enhances scalability, testability, and reusability, allowing each part of the system to be optimized independently. +**Data Flow: User Action to Update** +When a user edits a cell: -### Spreadsheet Architecture Overview +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. ``` -┌───────────────────────────────┐ -│ Application Layer │ -│ (Angular/React/Vue/TS/JS) │ -└──────────────┬────────────────┘ - │ - ▼ -┌───────────────────────────────┐ -│ Spreadsheet UI Layer │ -│ (Public API, UI Shell, │ -│ Rendering, Feature Modules) │ -└──────────────┬────────────────┘ - │ - ▼ -┌───────────────────────────────┐ -│ Workbook Model Layer │ -│ (Data Model, Actions, │ -│ Integrations, Services) │ -└──────────────┬────────────────┘ - │ - ▼ -┌───────────────────────────────┐ -│ Calculate Engine Layer │ -│ (Formula Parser, Functions, │ -│ Dependency Graph) │ -└───────────────────────────────┘ +┌─────────────────┐ +│ OFF-SCREEN │ (not rendered) +├─────────────────┤ +│ VIEWPORT │ (actively rendered) +│ (visible area) │ (visible cells only) +├─────────────────┤ +│ OFF-SCREEN │ (not rendered) +└─────────────────┘ ``` -## How Spreadsheet Rendering Works in Browser +**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. -To deliver a smooth and responsive experience, the spreadsheet uses virtual scrolling. Only the rows and columns visible on the screen, along with a small buffer above and below, are rendered in the browser at any time. As users scroll, new rows are dynamically rendered while those that move out of view are removed from the DOM. This approach keeps memory usage low and ensures fast performance, even with very large datasets. Batch DOM updates, caching of row heights and column widths, and efficient rendering techniques further optimize the user experience. +#### How Rendering Happens -## Formula Calculation Engine Architecture +The rendering process follows these steps: -The formula engine operates in three main steps: parsing, evaluation, and dependency tracking. When a formula is entered, it is first parsed and validated, then evaluated by retrieving referenced cell values and executing functions. The engine maintains a dependency graph to track which formulas depend on which cells. When a cell changes, only the affected formulas are recalculated, ensuring efficient updates. The engine supports a wide range of Excel-compatible functions and provides clear error codes for issues like invalid references or division by zero. +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 -For more information, you can refer to the [formula](./formulas) documentation section. +**Performance Benefits:** +- Only visible cells occupy memory +- Smooth scrolling on large datasets +- Responsive interactions even with millions of cells +- Efficient updates when data changes + +--- -## Data Binding Architecture (Local vs Remote) +## 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. + +--- -The spreadsheet supports both local and remote data binding. With local data binding, all data is loaded into browser memory as a JavaScript array, enabling instant access and offline support for small to medium datasets. Remote data binding is designed for large datasets, where data is fetched from a server in small batches as needed. The browser requests only the visible rows and a buffer, minimizing memory usage and network traffic. Sorting and filtering operations are handled on the server, allowing the spreadsheet to efficiently manage millions of rows. +## 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 } +]; + + +``` + +**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 | + +--- -For more information, you can refer to the [data-binding](./data-binding) documentation section. +Understanding these layers helps you architect applications that leverage the Spreadsheet component effectively. -## Server-Side vs Client-Side Processing +## See Also -The spreadsheet intelligently divides processing tasks between the client (browser) and the server. Client-side processing handles tasks that require immediate feedback, such as UI rendering, cell editing, formula calculation, and small-scale sorting or filtering. Server-side processing is used for operations involving large datasets, data persistence, advanced calculations, and security validation. This division ensures a responsive user experience while maintaining scalability, data integrity, and security. \ No newline at end of file +- [Getting Started with React Spreadsheet](./getting-started) +- [Data Binding](./data-binding) +- [Formulas](./formulas) +- [Events](./events) \ No newline at end of file