1011888: added the data binding samples

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,2 +1,109 @@
-# syncfusion-react-spreadsheet-data-binding
-A comprehensive set of samples demonstrating data binding in the Syncfusion React Spreadsheet component. These examples show how to bind data from JSON, remote services, and dynamic APIs for real-time data visualization and editing in modern web applications.
+# Syncfusion React Spreadsheet Data Binding
+
+A comprehensive sample demonstrating various data binding techniques in Syncfusion React Spreadsheet. It covers local data binding, remote data sources, custom column mapping, cell-level binding, and dynamic data updates for real-time data visualization and editing.
+
+## 📁 Project Structure
+
+```
+├── samples/localDataBinding
+├── samples/cellDataBinding
+├── samples/customColumn
+├── samples/remoteDataBinding
+├── samples/oDataRemoteDataBinding
+├── samples/webApiRemoteDataBinding
+├── samples/dynamicDataBinding
+└── samples/updateRangeDynamicDataBinding
+```
+
+## ✨ Features
+
+- **Local Data Binding**: Bind JSON data directly to spreadsheet ranges for static datasets.
+- **Cell Data Binding**: Populate individual cells with specific data values programmatically.
+- **Custom Column Mapping**: Map custom field names from your data source to spreadsheet columns.
+- **Remote Data Binding**: Fetch and bind data from remote REST APIs dynamically.
+- **OData Remote Binding**: Connect to OData services for enterprise data integration.
+- **Web API Integration**: Bind data from ASP.NET Core Web APIs with real-time synchronization.
+- **Dynamic Data Binding**: Update spreadsheet data dynamically based on user interactions or events.
+- **Update Range Binding**: Programmatically update specific ranges with new data without full reload.
+
+## 🧩 Technologies Used
+
+- React + Syncfusion Spreadsheet
+- React Router (for sample navigation)
+- REST APIs / OData / Web APIs
+
+## 🚀 Getting Started
+
+### 1. Clone the Repository
+
+```bash
+git clone https://github.com/SyncfusionExamples/syncfusion-react-spreadsheet-data-binding
+```
+
+### 2. Install Dependencies
+
+Install the Syncfusion React Spreadsheet package as a dependency
+
+```bash
+npm install @syncfusion/ej2-react-spreadsheet --save
+```
+
+### 3. Run the Application
+
+Run the project and explore different data binding samples using the dropdown
+
+```bash
+npm run dev
+```
+
+## 📋 Sample Descriptions
+
+### Local Data Binding
+Bind an array of JSON objects directly to the spreadsheet using the `dataSource` property within sheet configuration.
+
+### Cell Data Binding
+Use the `updateCell()` method to bind data to individual cells for granular control over cell values.
+
+### Custom Column Mapping
+Define custom field mappings when your data model field names differ from the desired column headers in the spreadsheet.
+
+### Remote Data Binding
+Fetch data from remote REST APIs using fetch or axios and bind it to the spreadsheet for live data scenarios.
+
+### OData Remote Data Binding
+Connect to OData services for standardized enterprise data access with filtering, sorting, and pagination support.
+
+### Web API Remote Data Binding
+Integrate with ASP.NET Core Web APIs to fetch, update, and synchronize data between the spreadsheet and backend services.
+
+### Dynamic Data Binding
+Implement real-time data updates based on user actions, timers, or external events to keep the spreadsheet data current.
+
+### Update Range Dynamic Data Binding
+Use the `updateRange()` method to programmatically update specific cell ranges with new data without refreshing the entire sheet.
+
+## 🔗 Resources
+
+- [Syncfusion React Spreadsheet - Getting Started](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started)
+- [Syncfusion React Spreadsheet - Data Binding](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/data-binding)
+- [Syncfusion React Spreadsheet - API Reference](https://ej2.syncfusion.com/react/documentation/spreadsheet/api-spreadsheet)
+
+## ✅ Benefits
+
+- **Flexible Data Integration**: Connect to local JSON, REST APIs, OData, or Web APIs seamlessly.
+- **Real-Time Updates**: Support dynamic data binding for live dashboards and collaborative applications.
+- **Custom Mapping**: Adapt any data structure to your spreadsheet layout with custom column mapping.
+- **Improved Performance**: Update only specific ranges instead of reloading entire datasets.
+- **Enterprise Ready**: Built-in support for OData and Web API standards for enterprise-grade applications.
+
+## 📣 Try It Out
+
+Clone the repo, run the samples, and explore how to implement various data binding techniques in your React application!
+
+## 📄 License and Copyright
+
+> This is a commercial product and requires a paid license for possession or use. Syncfusion<sup>®</sup> licensed software, including this control, is subject to the terms and conditions of Syncfusion<sup>®</sup> [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+
+> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+
+See [LICENSE FILE](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=javascript-spreadsheet-npm) for more info.

eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>my-app</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "my-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@syncfusion/ej2-buttons": "*",
+    "@syncfusion/ej2-dropdowns": "*",
+    "@syncfusion/ej2-grids": "*",
+    "@syncfusion/ej2-inputs": "*",
+    "@syncfusion/ej2-lists": "*",
+    "@syncfusion/ej2-navigations": "*",
+    "@syncfusion/ej2-popups": "*",
+    "@syncfusion/ej2-react-base": "*",
+    "@syncfusion/ej2-react-splitbuttons": "*",
+    "@syncfusion/ej2-react-spreadsheet": "^32.2.9",
+    "@syncfusion/ej2-splitbuttons": "*",
+    "@syncfusion/ej2-spreadsheet": "*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.12.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "vite": "^7.3.1"
+  }
+}

samples/cellDataBinding.jsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent, SheetsDirective, SheetDirective, RowsDirective, CellsDirective, RowDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
+import { ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
+
+function CellDataBinding() {
+    const spreadsheetRef = React.useRef(null);
+    React.useEffect(() => {
+      let spreadsheet = spreadsheetRef.current;
+      if (spreadsheet) {
+        spreadsheet.cellFormat(
+          { fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' },
+          'A1:H1'
+        );
+      }
+    }, []);    
+    return (
+        <SpreadsheetComponent ref={spreadsheetRef}>
+            <SheetsDirective>
+                <SheetDirective selectedRange='D13' name='PriceDetails'>
+                    <RowsDirective>
+                        <RowDirective>
+                            <CellsDirective>
+                                <CellDirective value='Item Name' ></CellDirective>
+                                <CellDirective value='Quantity' ></CellDirective>
+                                <CellDirective value='Price' ></CellDirective>
+                                <CellDirective value='Amount' ></CellDirective>
+                                <CellDirective value='Stock Detail' ></CellDirective>
+                                <CellDirective value='Website' ></CellDirective>
+                            </CellsDirective>
+                        </RowDirective>
+                        <RowDirective>
+                            <CellsDirective>
+                                <CellDirective value='Casual Shoes' ></CellDirective>
+                                <CellDirective value='10' ></CellDirective>
+                                <CellDirective value='$20' ></CellDirective>
+                                <CellDirective value='$200' ></CellDirective>
+                                <CellDirective value='OUT OF STOCK' ></CellDirective>
+                                <CellDirective value='Amazon'></CellDirective>
+                            </CellsDirective>
+                        </RowDirective>
+                        <RowDirective>
+                            <CellsDirective>
+                                <CellDirective value='Sports Shoes' ></CellDirective>
+                                <CellDirective value='20' ></CellDirective>
+                                <CellDirective value='$30' ></CellDirective>
+                                <CellDirective value='$600'></CellDirective>
+                                <CellDirective value='IN STOCK'></CellDirective>
+                                <CellDirective value='Overstack'></CellDirective>
+                            </CellsDirective>
+                        </RowDirective>
+                        <RowDirective>
+                            <CellsDirective>
+                                <CellDirective value='Formal Shoes' ></CellDirective>
+                                <CellDirective value='20' ></CellDirective>
+                                <CellDirective value='$15' ></CellDirective>
+                                <CellDirective value='$300'></CellDirective>
+                                <CellDirective value='IN STOCK'></CellDirective>
+                                <CellDirective value='AliExpress'></CellDirective>
+                            </CellsDirective>
+                        </RowDirective>
+                        <RowDirective>
+                            <CellsDirective>
+                                <CellDirective value='Sandals & Floaters' ></CellDirective>
+                                <CellDirective value='15' ></CellDirective>
+                                <CellDirective value='$20' ></CellDirective>
+                                <CellDirective value='$300' ></CellDirective>
+                                <CellDirective value='OUT OF STOCK' ></CellDirective>
+                                <CellDirective value='AliBaba'></CellDirective>
+                            </CellsDirective>
+                        </RowDirective>
+                        <RowDirective>
+                            <CellsDirective>
+                                <CellDirective value='Flip-Flops & Slippers' ></CellDirective>
+                                <CellDirective value='30' ></CellDirective>
+                                <CellDirective value='$10' ></CellDirective>
+                                <CellDirective value='$300'></CellDirective>
+                                <CellDirective value='IN STOCK' ></CellDirective>
+                                <CellDirective value='Taobao'></CellDirective>
+                            </CellsDirective>
+                        </RowDirective>
+                    </RowsDirective>
+                    <ColumnsDirective>
+                        <ColumnDirective width={110}></ColumnDirective>
+                        <ColumnDirective width={115}></ColumnDirective>
+                        <ColumnDirective width={110}></ColumnDirective>
+                        <ColumnDirective width={100}></ColumnDirective>
+                        <ColumnDirective width={110}></ColumnDirective>
+                        <ColumnDirective width={100}></ColumnDirective>
+                    </ColumnsDirective>
+                </SheetDirective>
+            </SheetsDirective>
+        </SpreadsheetComponent>
+    );
+};
+export default CellDataBinding;