Merge pull request #2339 from syncfusion-content/EJ2-1012637-ug

documentation(EJ2-1012637): Added How to session for react spreadsheet in ug documentation

Author: sridhar-alagirisamy

Document-Processing-toc.html

@@ -5331,6 +5331,10 @@
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/create-a-object-structure">Create a object structure </a></li>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/change-active-sheet">Changing the active sheet while importing a file</a></li>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/identify-the-context-menu-opened">Identify the context menu opened</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/how-to/find-replace-in-range">Find and replace the text within the selected range of cells</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/how-to/add-dynamic-cell-template">Add dynamic cell templates</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/how-to/add-cell-icon">Add an icon to the cell</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/how-to/get-filtered-data">Get the filtered row data</a></li>
 								</ul>
 							</li>
 							<li><a href="/document-processing/excel/spreadsheet/react/mobile-responsiveness">Mobile Responsiveness</a></li>

Document-Processing/Excel/Spreadsheet/React/how-to/add-cell-icon.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: Add icons inside cells in React Spreadsheet component | Syncfusion
+description: Learn here all about adding icon inside cells using a custom template in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet 
+platform: document-processing
+documentation: ug
+---
+
+# Add Custom Icons to Cells in React Spreadsheet
+
+In the Syncfusion Spreadsheet, you can render custom icons inside specific cells by defining a custom template property within the cell model. During the [beforeCellRender](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforecellrender) event, the icon element can be appended to the corresponding table cell (td) by checking whether the cell contains this template property.
+
+The following sample demonstrates how to add icons to cells by assigning the template property in the cell definition. Additionally, a custom ribbon item named "Add Icon" is included under a new "Template" ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts an icon into the currently active cell.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1" %}

Document-Processing/Excel/Spreadsheet/React/how-to/add-dynamic-cell-template.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: Dynamic cell template in React Spreadsheet component | Syncfusion
+description: Render dropdown templates inside cells in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet 
+platform: document-processing
+documentation: ug
+---
+
+# Create Dynamic Cell Templates with Dropdowns in React Spreadsheet
+
+You can add templates to cells in the Syncfusion Spreadsheet component by dynamically assigning a custom template property directly to individual cells. When a cell has this custom template property, you can use the [beforeCellRender](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforecellrender) event to append the desired template element to the cell.
+
+The following sample demonstrates how to insert a [Syncfusion Dropdown component](https://www.npmjs.com/package/@syncfusion/ej2-dropdowns) into Spreadsheet cells using this custom template property. Additionally, a custom ribbon item named "DropDown List" is included under a new "Template" ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts a dropdown into the currently active cell.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1" %}

Document-Processing/Excel/Spreadsheet/React/how-to/find-replace-in-range.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: Find and replace in range in React Spreadsheet component | Syncfusion
+description: Learn here all about performing find and replace limited to the range in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet 
+platform: document-processing
+documentation: ug
+---
+
+# Find and replace the text within the selected range of cells
+
+In Syncfusion Spreadsheet, the "Replace All" action by default searches and replaces a text throughout the entire sheet, regardless of the selected range. To limit "Replace All" to only the selected range, you can customize the addressCollection based on the selectedRange in the [actionBegin](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#actionbegin) event when the action is `beforeReplaceAll`.
+
+The following sample demonstrates how to limit the "Replace All" operation to the currently selected range.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/find-and-replace-cs1" %}

Document-Processing/Excel/Spreadsheet/React/how-to/get-filtered-data.md

@@ -0,0 +1,31 @@
+---
+layout: post
+title: Retrieve filtered row data in React Spreadsheet component | Syncfusion
+description: Learn here all about getting filtered row data in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet 
+platform: document-processing
+documentation: ug
+---
+
+# Get filtered row data in React Spreadsheet
+
+Filtering in the Syncfusion Spreadsheet allows you to display only the rows that match your criteria, hiding all others. You can enable filtering by setting the [allowFiltering](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowfiltering) property, and apply filters either through the UI or programmatically using the [applyFilter](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#applyfilter) method. To identify which rows are filtered, iterate through the sheet's row collection and check the `isFiltered` property of each row object. This flag indicates whether a row is currently hidden due to filtering.
+
+The following example shows how to get the filtered rows from the Spreadsheet:
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/filter-cs2/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/filter-cs2/app/app.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/spreadsheet/react/filter-cs2/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/spreadsheet/react/filter-cs2/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/filter-cs2" %}

Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.jsx

@@ -0,0 +1,68 @@
+import React, { useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App() {
+  const spreadsheetRef = useRef(null);
+
+  // To create plus icon wrapper.
+  const createPlusIconWrapper = () => {
+    const wrapperDiv = document.createElement('div');
+    wrapperDiv.className = 'e-custom-wrapper';
+    const iconSpan = document.createElement('span');
+    iconSpan.className = 'e-icons e-plus e-custom-icon';
+    wrapperDiv.appendChild(iconSpan);
+    return wrapperDiv;
+  };
+
+  // Triggers after the component is created
+  const handleCreated = () => {
+    if (!spreadsheetRef.current) return;
+    // Initialize icons in the cells when the spreadsheet loads.
+    spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'A1');
+    spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'B1');
+    spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'C1');
+    spreadsheetRef.current.resize();
+    // This is to Add a header Ribbon tab with a button to initialize everything on click.
+    spreadsheetRef.current.addRibbonTabs([
+      {
+        header: { text: 'Template' },
+        content: [
+          {
+            text: 'Add Icon',
+            tooltipText: 'Initialize',
+            click: () => {
+              if (!spreadsheetRef.current) return;
+              // Add the plus icon template to the selected cell
+              const sheet = spreadsheetRef.current.getActiveSheet();
+              spreadsheetRef.current.updateCell({ template: 'plus-icon' }, sheet.activeCell);
+              spreadsheetRef.current.resize();
+            },
+          },
+        ],
+      },
+    ]);
+  };
+
+  // Triggers before the cell is appended to DOM
+  const handleBeforeCellRender = (args) => {
+    if (args.cell && args.cell.template === 'plus-icon') {
+      // Pass the rowIndex to the wrapper to make the click handler reliable.
+      const wrapperDiv = createPlusIconWrapper();
+      args.element.insertBefore(wrapperDiv, args.element.firstChild);
+    }
+  };
+
+  return (
+    <div>
+      <SpreadsheetComponent
+        ref={spreadsheetRef}
+        created={handleCreated}
+        beforeCellRender={handleBeforeCellRender}
+      />
+    </div>
+  );
+}
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);

Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.tsx

@@ -0,0 +1,70 @@
+import React, { useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App(): React.ReactElement {
+  const spreadsheetRef = useRef<SpreadsheetComponent | null>(null);
+
+  // To create plus icon wrapper.
+  const createPlusIconWrapper = (): HTMLElement => {
+    const wrapperDiv: HTMLDivElement = document.createElement('div');
+    wrapperDiv.className = 'e-custom-wrapper';
+    const iconSpan: HTMLSpanElement = document.createElement('span');
+    iconSpan.className = 'e-icons e-plus e-custom-icon';
+    wrapperDiv.appendChild(iconSpan);
+    return wrapperDiv;
+  };
+
+  // Triggers after the component is created
+  const handleCreated = (): void => {
+    if (!spreadsheetRef.current) return;
+    // Initialize icons in the cells when the spreadsheet loads.
+    spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'A1');
+    spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'B1');
+    spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'C1');
+    spreadsheetRef.current.resize();
+    // This is to Add a header Ribbon tab with a button to initialize everything on click.
+    spreadsheetRef.current.addRibbonTabs([
+      {
+        header: { text: 'Template' },
+        content: [
+          {
+            text: 'Add Icon',
+            tooltipText: 'Initialize',
+            click: () => {
+              if (!spreadsheetRef.current) return;
+              // Add the plus icon template to the selected cell
+              const sheet: any = spreadsheetRef.current.getActiveSheet();
+              spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, (sheet as any).activeCell);
+              spreadsheetRef.current.resize();
+            },
+          },
+        ],
+      },
+    ]);
+  };
+
+  // Triggers before the cell is appended to DOM
+  const handleBeforeCellRender = (args: any) => {
+    if (args.cell && args.cell.template === 'plus-icon') {
+      // Pass the rowIndex to the wrapper to make the click handler reliable.
+      const wrapperDiv: HTMLElement = createPlusIconWrapper();
+      args.element.insertBefore(wrapperDiv, args.element.firstChild);
+    }
+  };
+
+  return (
+    <div>
+      <SpreadsheetComponent
+        ref={spreadsheetRef}
+        created={handleCreated}
+        beforeCellRender={handleBeforeCellRender}
+      />
+    </div>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);

Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Spreadsheet</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+    <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+
+        body {
+            overflow: hidden;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='root'>
+        <div id='loader'>Loading....</div>
+    </div>
+</body>
+
+</html>

Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/systemjs.config.js

@@ -0,0 +1,58 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        app: 'app',
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js",
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+        "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js",
+        "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+    },
+    packages: {
+        'app': { main: 'app', defaultExtension: 'tsx' },
+    }
+
+});
+
+System.import('app');
+
+
+