From a7662c82ec61da7f35532805272eb0be94518e94 Mon Sep 17 00:00:00 2001
From: NithishkumarRavikumar <kumarnithish357@gmail.com>
Date: Wed, 18 Mar 2026 11:15:40 +0530
Subject: [PATCH 1/6] 1015310: added content for integrating spreadsheet into
 existing layouts in react spreadsheet ug documentation

---
 Document-Processing-toc.html                  |   1 +
 .../React/how-to/existing-react-layout.md     | 319 ++++++++++++++++++
 2 files changed, 320 insertions(+)
 create mode 100644 Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md

diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index 6c524c3d37..2981c20272 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -5519,6 +5519,7 @@
 									<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>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/paste-only-values-without-formatting">Paste only values without formatting and styles</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/how-to/existing-react-layout">Integrate spreadsheet into existing react layouts</a></li>
 								</ul>
 							</li>
 							<li><a href="/document-processing/excel/spreadsheet/react/mobile-responsiveness">Mobile Responsiveness</a></li>
diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md b/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md
new file mode 100644
index 0000000000..1f35ecd548
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md
@@ -0,0 +1,319 @@
+--- 
+layout: post
+title: Integrating Spreadsheet into existing React layouts | Syncfusion
+description: Guidance on embedding the Spreadsheet into react layouts using the Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet 
+platform: document-processing
+documentation: ug
+---
+
+# Integrating Spreadsheet into Existing React Layouts
+
+## Overview
+
+The React Spreadsheet component can be embedded into dashboards, admin panels, split‑screen views, tabs, dialogs, collapsible/accordion sections, sidebars, and multi‑column layouts. This guide provides concise layout patterns and minimal code examples to ensure the Spreadsheet renders correctly, resizes properly, and refreshes when hosted inside common layout containers.
+
+## How‑To
+
+### Place the Spreadsheet inside basic divs
+
+Insert the Spreadsheet inside a container with a defined height. The Spreadsheet automatically fills the available space within its parent element.
+
+{% tabs %} 
+{% highlight ts tabtitle="App.tsx" %} 
+import React from 'react';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+export default function App() {
+    return (
+        <div style={{ height: '80vh' }}>
+            <SpreadsheetComponent height="100%" width="100%" />
+        </div>
+    );
+}
+{% endhighlight %} 
+{% endtabs %}
+
+### Place the Spreadsheet inside a flex layout
+
+When placing the Spreadsheet inside a flex container, ensure the flex item has min-height: 0 so the component can grow and shrink correctly. The parent container must have a defined height.
+
+{% tabs %} 
+{% highlight ts tabtitle="App.tsx" %} 
+import React from 'react'; 
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+export function App() {
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+            <header style={{ height: '100px', textAlign: 'center' }}>Header Content</header>
+            <main style={{ flex: 1, minHeight: 0 }}>
+                <div style={{ height: '100%' }}>
+                    <SpreadsheetComponent height="100%" width="100%" />
+                </div>
+            </main>
+        </div>
+    );
+}
+{% endhighlight %} 
+{% endtabs %}
+
+### Place the Spreadsheet inside a CSS grid
+
+Define explicit row or column sizes using grid-template-rows or grid-template-columns. This ensures the grid cell has a measurable height for the Spreadsheet to render correctly.
+
+{% tabs %} 
+{% highlight ts tabtitle="App.tsx" %} 
+import React from 'react'; 
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+export const App: React.FC = () => {
+    return (
+        <div style={styles.page}>
+            <header style={styles.header}>
+                <h3 style={{ margin: 0 }}>Dashboard</h3>
+            </header>
+
+            <main style={styles.grid}>
+                <aside style={styles.sidebar}>
+                    <div style={{ padding: 12 }}>
+                        <h4 style={{ marginTop: 0 }}>Filters</h4>
+                        <p>Put other controls here</p>
+                    </div>
+                </aside>
+
+                <section style={styles.viewerArea}>
+                    <SpreadsheetComponent height="100%" width="100%" />
+                </section>
+            </main>
+        </div>
+    );
+};
+
+const styles: Record<string, React.CSSProperties> = {
+    page: {
+        height: '100vh',
+        display: 'grid',
+        gridTemplateRows: '56px 1fr',
+        background: '#fafafa'
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 16px',
+        background: '#fff',
+        borderBottom: '1px solid #e5e5e5'
+    },
+    grid: {
+        display: 'grid',
+        gridTemplateColumns: '280px 1fr',
+        gap: 16,
+        padding: 16,
+        minHeight: 0 // lets children use available height
+    },
+    sidebar: {
+        background: '#fff',
+        border: '1px solid #e5e5e5',
+        borderRadius: 8,
+        overflow: 'auto'
+    },
+    viewerArea: {
+        background: '#fff',
+        border: '1px solid #e5e5e5',
+        borderRadius: 8,
+        padding: 8,
+        display: 'grid',
+        gridTemplateRows: '1fr',
+        minHeight: 0 // critical so the viewer can grow/shrink
+    }
+};
+
+{% endhighlight %} 
+{% endtabs %}
+
+### Use Spreadsheet inside Tab components
+
+The React Spreadsheet component is supported inside Syncfusion Tab components.
+
+{% tabs %} 
+{% highlight ts tabtitle="App.tsx" %}
+import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
+
+export default function App() {
+
+    const SpreadsheetTabContent: React.FC = () => {
+    return (
+            <div className="spreadsheet-pane">
+                <div>
+                    <SpreadsheetComponent height="100%" width="100%" />
+                </div> 
+            </div>
+        );
+    };
+
+    return (
+        <div className="page">
+            <header className="header">
+                <h3 style={{ margin: 0 }}>Spreadsheet in tab</h3>
+            </header>
+
+            <div className="tab-host">
+                <TabComponent height="100%">
+                    <TabItemsDirective>
+                        <TabItemDirective
+                            header={{ text: 'Overview' }}
+                            content={() => (
+                                <div className="panel">
+                                    <h4>Overview</h4>
+                                    <p>Put general dashboard content here.</p>
+                                </div>
+                            )}
+                        />
+                        <TabItemDirective
+                            header={{ text: 'Spreadsheet' }}
+                            content={SpreadsheetTabContent}
+                        />
+                        <TabItemDirective
+                            header={{ text: 'Settings' }}
+                            content={() => (
+                                <div className="panel">
+                                    <h4>Settings</h4>
+                                    <p>Any settings or forms can go here.</p>
+                                </div>
+                            )}
+                        />
+                    </TabItemsDirective>
+                </TabComponent>
+            </div>
+        </div>
+    );
+};
+{% endhighlight %}
+{% endtabs %}
+
+### Use spreadsheet inside Dialog
+
+If the spreadsheet sits inside a dialog, for example Syncfusion Dialog, render or initialize the spreadsheet after the dialog open events. The DOM must be visible for the spreadsheet to measure layout.
+
+{% tabs %} 
+{% highlight ts tabtitle="App.tsx" %} 
+import { useRef, useCallback } from 'react';
+import { DialogComponent } from '@syncfusion/ej2-react-popups';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import "./App.css"
+
+export default function App() {
+    const dialogRef = useRef<DialogComponent | null>(null);
+    const openDialog = () => {
+        dialogRef.current!.show();
+    };
+    const closeDialog = () => {
+        dialogRef.current!.hide();
+    };
+    const onDialogOpen = useCallback(() => {
+        setTimeout(() => {
+            window.dispatchEvent(new Event('resize'));
+        }, 0);
+    }, []);
+
+    return (
+        <div className="page">
+            <header className="header">
+                <h3 style={{ margin: 0 }}>Spreadsheet inside Dialog</h3>
+                <div style={{ marginLeft: 'auto' }}>
+                    <button onClick={openDialog}>Open Spreadsheet</button>
+                </div>
+            </header>
+            <DialogComponent
+                ref={(dlg: any) => (dialogRef.current = dlg)}
+                isModal={true}
+                visible={false}
+                header="Spreadsheet"
+                showCloseIcon={true}
+                minHeight="80vh"
+                width="80vw"
+                height="80vh"
+                allowDragging={true}
+                closeOnEscape={true}
+                target={document.body as any}
+                overlayClick={closeDialog}
+                open={onDialogOpen}
+            >
+                <SpreadsheetComponent height="100%" width="100%" />
+            </DialogComponent>
+        </div>
+    );
+};
+{% endhighlight %}
+{% endtabs %}
+
+### Use Spreadsheet inside collapsible sections
+
+For accordions or collapsible containers, you can render the Spreadsheet inside an `AccordionItem`. If the item is rendered while hidden, trigger a resize event when the section becomes active so the component can recalculate its layout.
+
+{% tabs %} 
+{% highlight ts tabtitle="App.tsx" %} 
+import { useCallback } from 'react';
+import {
+    AccordionComponent, AccordionItemsDirective, AccordionItemDirective
+} from '@syncfusion/ej2-react-navigations';
+import type { ExpandEventArgs } from '@syncfusion/ej2-react-navigations';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+export default function App() {
+
+    const onExpanded = useCallback((args: ExpandEventArgs) => {
+        setTimeout(() => {
+            window.dispatchEvent(new Event('resize'));
+        }, 0);
+    }, []);
+
+    return (
+        <div className="page">
+            <header className="header">
+                <h3 style={{ margin: 0 }}>Spreadsheet inside an Accordion</h3>
+            </header>
+            <main className="content">
+                <AccordionComponent
+                    expandMode="Single"
+                    expanding={onExpanded}
+                    expanded={onExpanded}
+                >
+                    <AccordionItemsDirective>
+                        <AccordionItemDirective
+                            header="Overview"
+                            content={() => (
+                                <div className="panel">
+                                    <h4>Overview</h4>
+                                    <p>Place any introductory content here.</p>
+                                </div>
+                            )}
+                        />
+                        <AccordionItemDirective
+                            header="Spreadsheet"
+                            expanded={true}
+                            content={() => (
+                                <SpreadsheetComponent height="100%" width="100%" />
+                            )}
+                        />
+                        <AccordionItemDirective
+                            header="Settings"
+                            content={() => (
+                                <div className="panel">
+                                    <h4>Settings</h4>
+                                    <p>Your forms and other controls here.</p>
+                                </div>
+                            )}
+                        />
+                    </AccordionItemsDirective>
+                </AccordionComponent>
+            </main>
+        </div>
+    );
+};
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Overview of Syncfusion React Tab component](https://ej2.syncfusion.com/react/documentation/tab/getting-started)
+- [Overview of Syncfusion React Dialog component](https://ej2.syncfusion.com/react/documentation/dialog/getting-started)
+- [Overview of Syncfusion React Accordion component](https://ej2.syncfusion.com/react/documentation/accordion/getting-started)

From cf0726deee785f26eac0c74081d8db9d52233afc Mon Sep 17 00:00:00 2001
From: NithishkumarRavikumar <kumarnithish357@gmail.com>
Date: Wed, 18 Mar 2026 12:32:33 +0530
Subject: [PATCH 2/6] 1015310: added content for integrating spreadsheet into
 existing layouts in react spreadsheet ug documentation

---
 .../React/how-to/existing-react-layout.md     | 309 +++---------------
 1 file changed, 51 insertions(+), 258 deletions(-)

diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md b/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md
index 1f35ecd548..b2d79a42f1 100644
--- a/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md
+++ b/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md
@@ -19,299 +19,92 @@ The React Spreadsheet component can be embedded into dashboards, admin panels, s
 
 Insert the Spreadsheet inside a container with a defined height. The Spreadsheet automatically fills the available space within its parent element.
 
-{% tabs %} 
-{% highlight ts tabtitle="App.tsx" %} 
-import React from 'react';
-import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-
-export default function App() {
-    return (
-        <div style={{ height: '80vh' }}>
-            <SpreadsheetComponent height="100%" width="100%" />
-        </div>
-    );
-}
-{% endhighlight %} 
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.tsx %}
+{% endhighlight %}
 {% endtabs %}
 
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1" %}
+
 ### Place the Spreadsheet inside a flex layout
 
 When placing the Spreadsheet inside a flex container, ensure the flex item has min-height: 0 so the component can grow and shrink correctly. The parent container must have a defined height.
 
-{% tabs %} 
-{% highlight ts tabtitle="App.tsx" %} 
-import React from 'react'; 
-import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-export function App() {
-    return (
-        <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
-            <header style={{ height: '100px', textAlign: 'center' }}>Header Content</header>
-            <main style={{ flex: 1, minHeight: 0 }}>
-                <div style={{ height: '100%' }}>
-                    <SpreadsheetComponent height="100%" width="100%" />
-                </div>
-            </main>
-        </div>
-    );
-}
-{% endhighlight %} 
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx %}
+{% endhighlight %}
 {% endtabs %}
 
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2" %}
+
 ### Place the Spreadsheet inside a CSS grid
 
 Define explicit row or column sizes using grid-template-rows or grid-template-columns. This ensures the grid cell has a measurable height for the Spreadsheet to render correctly.
 
-{% tabs %} 
-{% highlight ts tabtitle="App.tsx" %} 
-import React from 'react'; 
-import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-export const App: React.FC = () => {
-    return (
-        <div style={styles.page}>
-            <header style={styles.header}>
-                <h3 style={{ margin: 0 }}>Dashboard</h3>
-            </header>
-
-            <main style={styles.grid}>
-                <aside style={styles.sidebar}>
-                    <div style={{ padding: 12 }}>
-                        <h4 style={{ marginTop: 0 }}>Filters</h4>
-                        <p>Put other controls here</p>
-                    </div>
-                </aside>
-
-                <section style={styles.viewerArea}>
-                    <SpreadsheetComponent height="100%" width="100%" />
-                </section>
-            </main>
-        </div>
-    );
-};
-
-const styles: Record<string, React.CSSProperties> = {
-    page: {
-        height: '100vh',
-        display: 'grid',
-        gridTemplateRows: '56px 1fr',
-        background: '#fafafa'
-    },
-    header: {
-        display: 'flex',
-        alignItems: 'center',
-        padding: '0 16px',
-        background: '#fff',
-        borderBottom: '1px solid #e5e5e5'
-    },
-    grid: {
-        display: 'grid',
-        gridTemplateColumns: '280px 1fr',
-        gap: 16,
-        padding: 16,
-        minHeight: 0 // lets children use available height
-    },
-    sidebar: {
-        background: '#fff',
-        border: '1px solid #e5e5e5',
-        borderRadius: 8,
-        overflow: 'auto'
-    },
-    viewerArea: {
-        background: '#fff',
-        border: '1px solid #e5e5e5',
-        borderRadius: 8,
-        padding: 8,
-        display: 'grid',
-        gridTemplateRows: '1fr',
-        minHeight: 0 // critical so the viewer can grow/shrink
-    }
-};
-
-{% endhighlight %} 
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx %}
+{% endhighlight %}
 {% endtabs %}
 
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3" %}
+
 ### Use Spreadsheet inside Tab components
 
 The React Spreadsheet component is supported inside Syncfusion Tab components.
 
-{% tabs %} 
-{% highlight ts tabtitle="App.tsx" %}
-import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
-
-export default function App() {
-
-    const SpreadsheetTabContent: React.FC = () => {
-    return (
-            <div className="spreadsheet-pane">
-                <div>
-                    <SpreadsheetComponent height="100%" width="100%" />
-                </div> 
-            </div>
-        );
-    };
-
-    return (
-        <div className="page">
-            <header className="header">
-                <h3 style={{ margin: 0 }}>Spreadsheet in tab</h3>
-            </header>
-
-            <div className="tab-host">
-                <TabComponent height="100%">
-                    <TabItemsDirective>
-                        <TabItemDirective
-                            header={{ text: 'Overview' }}
-                            content={() => (
-                                <div className="panel">
-                                    <h4>Overview</h4>
-                                    <p>Put general dashboard content here.</p>
-                                </div>
-                            )}
-                        />
-                        <TabItemDirective
-                            header={{ text: 'Spreadsheet' }}
-                            content={SpreadsheetTabContent}
-                        />
-                        <TabItemDirective
-                            header={{ text: 'Settings' }}
-                            content={() => (
-                                <div className="panel">
-                                    <h4>Settings</h4>
-                                    <p>Any settings or forms can go here.</p>
-                                </div>
-                            )}
-                        />
-                    </TabItemsDirective>
-                </TabComponent>
-            </div>
-        </div>
-    );
-};
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.tsx %}
 {% endhighlight %}
 {% endtabs %}
 
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4" %}
+
 ### Use spreadsheet inside Dialog
 
 If the spreadsheet sits inside a dialog, for example Syncfusion Dialog, render or initialize the spreadsheet after the dialog open events. The DOM must be visible for the spreadsheet to measure layout.
 
-{% tabs %} 
-{% highlight ts tabtitle="App.tsx" %} 
-import { useRef, useCallback } from 'react';
-import { DialogComponent } from '@syncfusion/ej2-react-popups';
-import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-import "./App.css"
-
-export default function App() {
-    const dialogRef = useRef<DialogComponent | null>(null);
-    const openDialog = () => {
-        dialogRef.current!.show();
-    };
-    const closeDialog = () => {
-        dialogRef.current!.hide();
-    };
-    const onDialogOpen = useCallback(() => {
-        setTimeout(() => {
-            window.dispatchEvent(new Event('resize'));
-        }, 0);
-    }, []);
-
-    return (
-        <div className="page">
-            <header className="header">
-                <h3 style={{ margin: 0 }}>Spreadsheet inside Dialog</h3>
-                <div style={{ marginLeft: 'auto' }}>
-                    <button onClick={openDialog}>Open Spreadsheet</button>
-                </div>
-            </header>
-            <DialogComponent
-                ref={(dlg: any) => (dialogRef.current = dlg)}
-                isModal={true}
-                visible={false}
-                header="Spreadsheet"
-                showCloseIcon={true}
-                minHeight="80vh"
-                width="80vw"
-                height="80vh"
-                allowDragging={true}
-                closeOnEscape={true}
-                target={document.body as any}
-                overlayClick={closeDialog}
-                open={onDialogOpen}
-            >
-                <SpreadsheetComponent height="100%" width="100%" />
-            </DialogComponent>
-        </div>
-    );
-};
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.tsx %}
 {% endhighlight %}
 {% endtabs %}
 
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5" %}
+
 ### Use Spreadsheet inside collapsible sections
 
 For accordions or collapsible containers, you can render the Spreadsheet inside an `AccordionItem`. If the item is rendered while hidden, trigger a resize event when the section becomes active so the component can recalculate its layout.
 
-{% tabs %} 
-{% highlight ts tabtitle="App.tsx" %} 
-import { useCallback } from 'react';
-import {
-    AccordionComponent, AccordionItemsDirective, AccordionItemDirective
-} from '@syncfusion/ej2-react-navigations';
-import type { ExpandEventArgs } from '@syncfusion/ej2-react-navigations';
-import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-
-export default function App() {
-
-    const onExpanded = useCallback((args: ExpandEventArgs) => {
-        setTimeout(() => {
-            window.dispatchEvent(new Event('resize'));
-        }, 0);
-    }, []);
-
-    return (
-        <div className="page">
-            <header className="header">
-                <h3 style={{ margin: 0 }}>Spreadsheet inside an Accordion</h3>
-            </header>
-            <main className="content">
-                <AccordionComponent
-                    expandMode="Single"
-                    expanding={onExpanded}
-                    expanded={onExpanded}
-                >
-                    <AccordionItemsDirective>
-                        <AccordionItemDirective
-                            header="Overview"
-                            content={() => (
-                                <div className="panel">
-                                    <h4>Overview</h4>
-                                    <p>Place any introductory content here.</p>
-                                </div>
-                            )}
-                        />
-                        <AccordionItemDirective
-                            header="Spreadsheet"
-                            expanded={true}
-                            content={() => (
-                                <SpreadsheetComponent height="100%" width="100%" />
-                            )}
-                        />
-                        <AccordionItemDirective
-                            header="Settings"
-                            content={() => (
-                                <div className="panel">
-                                    <h4>Settings</h4>
-                                    <p>Your forms and other controls here.</p>
-                                </div>
-                            )}
-                        />
-                    </AccordionItemsDirective>
-                </AccordionComponent>
-            </main>
-        </div>
-    );
-};
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.tsx %}
 {% endhighlight %}
 {% endtabs %}
 
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6" %}
+
 ## See also
 
 - [Overview of Syncfusion React Tab component](https://ej2.syncfusion.com/react/documentation/tab/getting-started)

From c8bec29275232bc64993e0ed0518627ef5e5508b Mon Sep 17 00:00:00 2001
From: NithishkumarRavikumar <kumarnithish357@gmail.com>
Date: Wed, 18 Mar 2026 12:33:23 +0530
Subject: [PATCH 3/6] 1015310: added code samples for integrating spreadsheet
 into existing layouts in react spreadsheet ug documentation

---
 .../integrate-into-layouts-cs1/app/app.jsx    | 18 +++++
 .../integrate-into-layouts-cs1/app/app.tsx    | 18 +++++
 .../integrate-into-layouts-cs1/index.html     | 36 ++++++++++
 .../systemjs.config.js                        | 55 ++++++++++++++
 .../integrate-into-layouts-cs2/app/app.jsx    | 23 ++++++
 .../integrate-into-layouts-cs2/app/app.tsx    | 23 ++++++
 .../integrate-into-layouts-cs2/index.html     | 36 ++++++++++
 .../systemjs.config.js                        | 55 ++++++++++++++
 .../integrate-into-layouts-cs3/app/app.jsx    | 71 +++++++++++++++++++
 .../integrate-into-layouts-cs3/app/app.tsx    | 71 +++++++++++++++++++
 .../integrate-into-layouts-cs3/index.html     | 36 ++++++++++
 .../systemjs.config.js                        | 55 ++++++++++++++
 .../integrate-into-layouts-cs4/app/app.jsx    | 59 +++++++++++++++
 .../integrate-into-layouts-cs4/app/app.tsx    | 59 +++++++++++++++
 .../integrate-into-layouts-cs4/index.html     | 36 ++++++++++
 .../systemjs.config.js                        | 56 +++++++++++++++
 .../integrate-into-layouts-cs5/app/app.jsx    | 55 ++++++++++++++
 .../integrate-into-layouts-cs5/app/app.tsx    | 55 ++++++++++++++
 .../integrate-into-layouts-cs5/index.html     | 36 ++++++++++
 .../systemjs.config.js                        | 56 +++++++++++++++
 .../integrate-into-layouts-cs6/app/app.jsx    | 62 ++++++++++++++++
 .../integrate-into-layouts-cs6/app/app.tsx    | 62 ++++++++++++++++
 .../integrate-into-layouts-cs6/index.html     | 36 ++++++++++
 .../systemjs.config.js                        | 56 +++++++++++++++
 24 files changed, 1125 insertions(+)
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.jsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.tsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/index.html
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/systemjs.config.js
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/index.html
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/systemjs.config.js
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/index.html
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/systemjs.config.js
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.jsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.tsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/index.html
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/systemjs.config.js
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.jsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.tsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/index.html
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/systemjs.config.js
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.jsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.tsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/index.html
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/systemjs.config.js

diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.jsx
new file mode 100644
index 0000000000..bc84613fed
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.jsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App() {
+
+  return (
+        <div style={{ height: '80vh' }}>
+            <SpreadsheetComponent height="100%" width="100%" />
+        </div>
+    );
+}
+
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.tsx
new file mode 100644
index 0000000000..8f1de2fa33
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App(): React.ReactElement {
+
+  return (
+        <div style={{ height: '80vh' }}>
+            <SpreadsheetComponent height="100%" width="100%" />
+        </div>
+    );
+}
+
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/index.html
new file mode 100644
index 0000000000..8b6e016434
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-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>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/systemjs.config.js
new file mode 100644
index 0000000000..4b4909d0f5
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+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');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx
new file mode 100644
index 0000000000..f1857d52ea
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App() {
+
+  return (
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+            <header style={{ height: '100px', textAlign: 'center' }}>Header Content</header>
+            <main style={{ flex: 1, minHeight: 0 }}>
+                <div style={{ height: '100%' }}>
+                    <SpreadsheetComponent height="100%" width="100%" />
+                </div>
+            </main>
+        </div>
+    );
+}
+
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx
new file mode 100644
index 0000000000..1f108e5605
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App(): React.ReactElement {
+
+  return (
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+            <header style={{ height: '100px', textAlign: 'center' }}>Header Content</header>
+            <main style={{ flex: 1, minHeight: 0 }}>
+                <div style={{ height: '100%' }}>
+                    <SpreadsheetComponent height="100%" width="100%" />
+                </div>
+            </main>
+        </div>
+    );
+}
+
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/index.html
new file mode 100644
index 0000000000..8b6e016434
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/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>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/systemjs.config.js
new file mode 100644
index 0000000000..4b4909d0f5
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+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');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx
new file mode 100644
index 0000000000..1906b47307
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App() {
+
+return (
+        <div style={styles.page}>
+            <header style={styles.header}>
+                <h3 style={{ margin: 0 }}>Dashboard</h3>
+            </header>
+
+            <main style={styles.grid}>
+                <aside style={styles.sidebar}>
+                    <div style={{ padding: 12 }}>
+                        <h4 style={{ marginTop: 0 }}>Filters</h4>
+                        <p>Put other controls here</p>
+                    </div>
+                </aside>
+
+                <section style={styles.viewerArea}>
+                    <SpreadsheetComponent height="100%" width="100%" />
+                </section>
+            </main>
+        </div>
+    );
+};
+
+const styles = {
+    page: {
+        height: '100vh',
+        display: 'grid',
+        gridTemplateRows: '56px 1fr',
+        background: '#fafafa'
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 16px',
+        background: '#fff',
+        borderBottom: '1px solid #e5e5e5'
+    },
+    grid: {
+        display: 'grid',
+        gridTemplateColumns: '280px 1fr',
+        gap: 16,
+        padding: 16,
+        minHeight: 0 // lets children use available height
+    },
+    sidebar: {
+        background: '#fff',
+        border: '1px solid #e5e5e5',
+        borderRadius: 8,
+        overflow: 'auto'
+    },
+    viewerArea: {
+        background: '#fff',
+        border: '1px solid #e5e5e5',
+        borderRadius: 8,
+        padding: 8,
+        display: 'grid',
+        gridTemplateRows: '1fr',
+        minHeight: 0 // critical so the viewer can grow/shrink
+    }
+};
+
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx
new file mode 100644
index 0000000000..f485166ffb
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App(): React.ReactElement {
+
+return (
+        <div style={styles.page}>
+            <header style={styles.header}>
+                <h3 style={{ margin: 0 }}>Dashboard</h3>
+            </header>
+
+            <main style={styles.grid}>
+                <aside style={styles.sidebar}>
+                    <div style={{ padding: 12 }}>
+                        <h4 style={{ marginTop: 0 }}>Filters</h4>
+                        <p>Put other controls here</p>
+                    </div>
+                </aside>
+
+                <section style={styles.viewerArea}>
+                    <SpreadsheetComponent height="100%" width="100%" />
+                </section>
+            </main>
+        </div>
+    );
+};
+
+const styles: Record<string, React.CSSProperties> = {
+    page: {
+        height: '100vh',
+        display: 'grid',
+        gridTemplateRows: '56px 1fr',
+        background: '#fafafa'
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 16px',
+        background: '#fff',
+        borderBottom: '1px solid #e5e5e5'
+    },
+    grid: {
+        display: 'grid',
+        gridTemplateColumns: '280px 1fr',
+        gap: 16,
+        padding: 16,
+        minHeight: 0 // lets children use available height
+    },
+    sidebar: {
+        background: '#fff',
+        border: '1px solid #e5e5e5',
+        borderRadius: 8,
+        overflow: 'auto'
+    },
+    viewerArea: {
+        background: '#fff',
+        border: '1px solid #e5e5e5',
+        borderRadius: 8,
+        padding: 8,
+        display: 'grid',
+        gridTemplateRows: '1fr',
+        minHeight: 0 // critical so the viewer can grow/shrink
+    }
+};
+
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/index.html
new file mode 100644
index 0000000000..8b6e016434
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/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>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/systemjs.config.js
new file mode 100644
index 0000000000..4b4909d0f5
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/systemjs.config.js
@@ -0,0 +1,55 @@
+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');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.jsx
new file mode 100644
index 0000000000..a38cdf8ccf
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.jsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
+
+function App() {
+
+const SpreadsheetTabContent = () => {
+    return (
+            <div className="spreadsheet-pane">
+                <div>
+                    <SpreadsheetComponent height="100%" width="100%" />
+                </div> 
+            </div>
+        );
+    };
+
+    return (
+        <div className="page">
+            <header className="header">
+                <h3 style={{ margin: 0 }}>Spreadsheet in tab</h3>
+            </header>
+
+            <div className="tab-host">
+                <TabComponent height="100%">
+                    <TabItemsDirective>
+                        <TabItemDirective
+                            header={{ text: 'Overview' }}
+                            content={() => (
+                                <div className="panel">
+                                    <h4>Overview</h4>
+                                    <p>Put general dashboard content here.</p>
+                                </div>
+                            )}
+                        />
+                        <TabItemDirective
+                            header={{ text: 'Spreadsheet' }}
+                            content={SpreadsheetTabContent}
+                        />
+                        <TabItemDirective
+                            header={{ text: 'Settings' }}
+                            content={() => (
+                                <div className="panel">
+                                    <h4>Settings</h4>
+                                    <p>Any settings or forms can go here.</p>
+                                </div>
+                            )}
+                        />
+                    </TabItemsDirective>
+                </TabComponent>
+            </div>
+        </div>
+    );
+};
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.tsx
new file mode 100644
index 0000000000..e066f51ba9
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
+
+function App(): React.ReactElement {
+
+const SpreadsheetTabContent: any = () => {
+    return (
+            <div className="spreadsheet-pane">
+                <div>
+                    <SpreadsheetComponent height="100%" width="100%" />
+                </div> 
+            </div>
+        );
+    };
+
+    return (
+        <div className="page">
+            <header className="header">
+                <h3 style={{ margin: 0 }}>Spreadsheet in tab</h3>
+            </header>
+
+            <div className="tab-host">
+                <TabComponent height="100%">
+                    <TabItemsDirective>
+                        <TabItemDirective
+                            header={{ text: 'Overview' }}
+                            content={() => (
+                                <div className="panel">
+                                    <h4>Overview</h4>
+                                    <p>Put general dashboard content here.</p>
+                                </div>
+                            )}
+                        />
+                        <TabItemDirective
+                            header={{ text: 'Spreadsheet' }}
+                            content={SpreadsheetTabContent}
+                        />
+                        <TabItemDirective
+                            header={{ text: 'Settings' }}
+                            content={() => (
+                                <div className="panel">
+                                    <h4>Settings</h4>
+                                    <p>Any settings or forms can go here.</p>
+                                </div>
+                            )}
+                        />
+                    </TabItemsDirective>
+                </TabComponent>
+            </div>
+        </div>
+    );
+};
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/index.html
new file mode 100644
index 0000000000..8b6e016434
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/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>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/systemjs.config.js
new file mode 100644
index 0000000000..4d527a4237
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/systemjs.config.js
@@ -0,0 +1,56 @@
+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",
+        "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.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');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.jsx
new file mode 100644
index 0000000000..eff204737a
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.jsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { useRef, useCallback } from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { DialogComponent } from '@syncfusion/ej2-react-popups';
+
+function App() {
+
+const dialogRef = useRef(null);
+const openDialog = () => {
+    dialogRef.current.show();
+};
+const closeDialog = () => {
+    dialogRef.current.hide();
+};
+const onDialogOpen = useCallback(() => {
+    setTimeout(() => {
+        window.dispatchEvent(new Event('resize'));
+    }, 0);
+}, []);
+
+return (
+    <div className="page">
+        <header className="header">
+            <h3 style={{ margin: 0 }}>Spreadsheet inside Dialog</h3>
+            <div style={{ marginLeft: 'auto' }}>
+                <button onClick={openDialog}>Open Spreadsheet</button>
+            </div>
+        </header>
+        <DialogComponent
+            ref={(dlg) => (dialogRef.current = dlg)}
+            isModal={true}
+            visible={false}
+            header="Spreadsheet"
+            showCloseIcon={true}
+            minHeight="80vh"
+            width="80vw"
+            height="80vh"
+            allowDragging={true}
+            closeOnEscape={true}
+            target={document.body}
+            overlayClick={closeDialog}
+            open={onDialogOpen}
+        >
+            <SpreadsheetComponent height="100%" width="100%" />
+        </DialogComponent>
+    </div>
+);
+
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.tsx
new file mode 100644
index 0000000000..2ce4167850
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { useRef, useCallback } from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { DialogComponent } from '@syncfusion/ej2-react-popups';
+
+function App(): React.ReactElement {
+
+const dialogRef = useRef<DialogComponent | null>(null);
+const openDialog = () => {
+    dialogRef.current.show();
+};
+const closeDialog = () => {
+    dialogRef.current.hide();
+};
+const onDialogOpen = useCallback(() => {
+    setTimeout(() => {
+        window.dispatchEvent(new Event('resize'));
+    }, 0);
+}, []);
+
+return (
+    <div className="page">
+        <header className="header">
+            <h3 style={{ margin: 0 }}>Spreadsheet inside Dialog</h3>
+            <div style={{ marginLeft: 'auto' }}>
+                <button onClick={openDialog}>Open Spreadsheet</button>
+            </div>
+        </header>
+        <DialogComponent
+            ref={(dlg: any) => (dialogRef.current = dlg)}
+            isModal={true}
+            visible={false}
+            header="Spreadsheet"
+            showCloseIcon={true}
+            minHeight="80vh"
+            width="80vw"
+            height="80vh"
+            allowDragging={true}
+            closeOnEscape={true}
+            target={document.body as any}
+            overlayClick={closeDialog}
+            open={onDialogOpen}
+        >
+            <SpreadsheetComponent height="100%" width="100%" />
+        </DialogComponent>
+    </div>
+);
+
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/index.html
new file mode 100644
index 0000000000..8b6e016434
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/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>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/systemjs.config.js
new file mode 100644
index 0000000000..694bf6ab23
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/systemjs.config.js
@@ -0,0 +1,56 @@
+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",
+        "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.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');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.jsx
new file mode 100644
index 0000000000..70556ca48c
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.jsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
+
+function App() {
+
+    const onExpanded = useCallback((args) => {
+      setTimeout(() => {
+          window.dispatchEvent(new Event('resize'));
+      }, 0);
+    }, []);
+
+  return (
+      <div className="page">
+          <header className="header">
+              <h3 style={{ margin: 0 }}>Spreadsheet inside an Accordion</h3>
+          </header>
+          <main className="content">
+              <AccordionComponent
+                  expandMode="Single"
+                  expanding={onExpanded}
+                  expanded={onExpanded}
+              >
+                  <AccordionItemsDirective>
+                      <AccordionItemDirective
+                          header="Overview"
+                          content={() => (
+                              <div className="panel">
+                                  <h4>Overview</h4>
+                                  <p>Place any introductory content here.</p>
+                              </div>
+                          )}
+                      />
+                      <AccordionItemDirective
+                          header="Spreadsheet"
+                          expanded={true}
+                          content={() => (
+                              <SpreadsheetComponent height="100%" width="100%" /> 
+                          )}
+                      />
+                      <AccordionItemDirective
+                          header="Settings"
+                          content={() => (
+                              <div className="panel">
+                                  <h4>Settings</h4>
+                                  <p>Your forms and other controls here.</p>
+                              </div>
+                          )}
+                      />
+                  </AccordionItemsDirective>
+              </AccordionComponent>
+          </main>
+      </div>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.tsx
new file mode 100644
index 0000000000..480d2644c9
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
+
+function App(): React.ReactElement {
+
+    const onExpanded = useCallback((args: any) => {
+      setTimeout(() => {
+          window.dispatchEvent(new Event('resize'));
+      }, 0);
+    }, []);
+
+  return (
+      <div className="page">
+          <header className="header">
+              <h3 style={{ margin: 0 }}>Spreadsheet inside an Accordion</h3>
+          </header>
+          <main className="content">
+              <AccordionComponent
+                  expandMode="Single"
+                  expanding={onExpanded}
+                  expanded={onExpanded}
+              >
+                  <AccordionItemsDirective>
+                      <AccordionItemDirective
+                          header="Overview"
+                          content={() => (
+                              <div className="panel">
+                                  <h4>Overview</h4>
+                                  <p>Place any introductory content here.</p>
+                              </div>
+                          )}
+                      />
+                      <AccordionItemDirective
+                          header="Spreadsheet"
+                          expanded={true}
+                          content={() => (
+                              <SpreadsheetComponent height="100%" width="100%" /> 
+                          )}
+                      />
+                      <AccordionItemDirective
+                          header="Settings"
+                          content={() => (
+                              <div className="panel">
+                                  <h4>Settings</h4>
+                                  <p>Your forms and other controls here.</p>
+                              </div>
+                          )}
+                      />
+                  </AccordionItemsDirective>
+              </AccordionComponent>
+          </main>
+      </div>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/index.html
new file mode 100644
index 0000000000..8b6e016434
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/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>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/systemjs.config.js
new file mode 100644
index 0000000000..4d527a4237
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/systemjs.config.js
@@ -0,0 +1,56 @@
+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",
+        "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.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');
\ No newline at end of file

From bb4668a916a69bbcd3ec08a1a9811965aa2d9e04 Mon Sep 17 00:00:00 2001
From: NithishkumarRavikumar <kumarnithish357@gmail.com>
Date: Mon, 30 Mar 2026 13:32:36 +0530
Subject: [PATCH 4/6] 1015310: added code samples for integrating spreadsheet
 into existing layouts in react spreadsheet ug documentation

---
 .../React/how-to/existing-react-layout.md     |  57 +--------
 .../integrate-into-layouts-cs1/app/app.jsx    |  51 +++++++-
 .../integrate-into-layouts-cs1/app/app.tsx    |  51 +++++++-
 .../integrate-into-layouts-cs1/index.html     |   2 +-
 .../systemjs.config.js                        |   3 +-
 .../integrate-into-layouts-cs2/app/app.jsx    |  54 +++++++--
 .../integrate-into-layouts-cs2/app/app.tsx    |  54 +++++++--
 .../integrate-into-layouts-cs2/index.html     |   2 +-
 .../systemjs.config.js                        |   3 +-
 .../integrate-into-layouts-cs3/app/app.jsx    | 111 ++++++++----------
 .../integrate-into-layouts-cs3/app/app.tsx    | 111 ++++++++----------
 .../integrate-into-layouts-cs3/index.html     |   2 +-
 .../systemjs.config.js                        |   3 +-
 .../integrate-into-layouts-cs4/app/app.jsx    |  59 ----------
 .../integrate-into-layouts-cs4/app/app.tsx    |  59 ----------
 .../integrate-into-layouts-cs4/index.html     |  36 ------
 .../systemjs.config.js                        |  56 ---------
 .../integrate-into-layouts-cs5/app/app.jsx    |  55 ---------
 .../integrate-into-layouts-cs5/app/app.tsx    |  55 ---------
 .../integrate-into-layouts-cs5/index.html     |  36 ------
 .../systemjs.config.js                        |  56 ---------
 .../integrate-into-layouts-cs6/app/app.jsx    |  62 ----------
 .../integrate-into-layouts-cs6/app/app.tsx    |  62 ----------
 .../integrate-into-layouts-cs6/index.html     |  36 ------
 .../systemjs.config.js                        |  56 ---------
 25 files changed, 295 insertions(+), 837 deletions(-)
 delete mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.jsx
 delete mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.tsx
 delete mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/index.html
 delete mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/systemjs.config.js
 delete mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.jsx
 delete mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.tsx
 delete mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/index.html
 delete mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/systemjs.config.js
 delete mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.jsx
 delete mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.tsx
 delete mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/index.html
 delete mode 100644 Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/systemjs.config.js

diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md b/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md
index b2d79a42f1..2d385ac29a 100644
--- a/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md
+++ b/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md
@@ -15,9 +15,9 @@ The React Spreadsheet component can be embedded into dashboards, admin panels, s
 
 ## How‑To
 
-### Place the Spreadsheet inside basic divs
+### Use Spreadsheet inside Tab components
 
-Insert the Spreadsheet inside a container with a defined height. The Spreadsheet automatically fills the available space within its parent element.
+The React Spreadsheet component is supported inside Syncfusion Tab components.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}
@@ -30,9 +30,9 @@ Insert the Spreadsheet inside a container with a defined height. The Spreadsheet
 
 {% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1" %}
 
-### Place the Spreadsheet inside a flex layout
+### Use spreadsheet inside Dialog
 
-When placing the Spreadsheet inside a flex container, ensure the flex item has min-height: 0 so the component can grow and shrink correctly. The parent container must have a defined height.
+If the spreadsheet sits inside a dialog, for example Syncfusion Dialog, render or initialize the spreadsheet after the dialog open events. The DOM must be visible for the spreadsheet to measure layout.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}
@@ -45,9 +45,9 @@ When placing the Spreadsheet inside a flex container, ensure the flex item has m
 
 {% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2" %}
 
-### Place the Spreadsheet inside a CSS grid
+### Use Spreadsheet inside collapsible sections
 
-Define explicit row or column sizes using grid-template-rows or grid-template-columns. This ensures the grid cell has a measurable height for the Spreadsheet to render correctly.
+For accordions or collapsible containers, you can render the Spreadsheet inside an `AccordionItem`. If the item is rendered while hidden, trigger a resize event when the section becomes active so the component can recalculate its layout.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}
@@ -60,51 +60,6 @@ Define explicit row or column sizes using grid-template-rows or grid-template-co
 
 {% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3" %}
 
-### Use Spreadsheet inside Tab components
-
-The React Spreadsheet component is supported inside Syncfusion Tab components.
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4" %}
-
-### Use spreadsheet inside Dialog
-
-If the spreadsheet sits inside a dialog, for example Syncfusion Dialog, render or initialize the spreadsheet after the dialog open events. The DOM must be visible for the spreadsheet to measure layout.
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5" %}
-
-### Use Spreadsheet inside collapsible sections
-
-For accordions or collapsible containers, you can render the Spreadsheet inside an `AccordionItem`. If the item is rendered while hidden, trigger a resize event when the section becomes active so the component can recalculate its layout.
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6" %}
-
 ## See also
 
 - [Overview of Syncfusion React Tab component](https://ej2.syncfusion.com/react/documentation/tab/getting-started)
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.jsx
index bc84613fed..a38cdf8ccf 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.jsx
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.jsx
@@ -1,16 +1,57 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
 
 function App() {
 
-  return (
-        <div style={{ height: '80vh' }}>
-            <SpreadsheetComponent height="100%" width="100%" />
+const SpreadsheetTabContent = () => {
+    return (
+            <div className="spreadsheet-pane">
+                <div>
+                    <SpreadsheetComponent height="100%" width="100%" />
+                </div> 
+            </div>
+        );
+    };
+
+    return (
+        <div className="page">
+            <header className="header">
+                <h3 style={{ margin: 0 }}>Spreadsheet in tab</h3>
+            </header>
+
+            <div className="tab-host">
+                <TabComponent height="100%">
+                    <TabItemsDirective>
+                        <TabItemDirective
+                            header={{ text: 'Overview' }}
+                            content={() => (
+                                <div className="panel">
+                                    <h4>Overview</h4>
+                                    <p>Put general dashboard content here.</p>
+                                </div>
+                            )}
+                        />
+                        <TabItemDirective
+                            header={{ text: 'Spreadsheet' }}
+                            content={SpreadsheetTabContent}
+                        />
+                        <TabItemDirective
+                            header={{ text: 'Settings' }}
+                            content={() => (
+                                <div className="panel">
+                                    <h4>Settings</h4>
+                                    <p>Any settings or forms can go here.</p>
+                                </div>
+                            )}
+                        />
+                    </TabItemsDirective>
+                </TabComponent>
+            </div>
         </div>
     );
-}
-
+};
 
 export default App;
 
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.tsx
index 8f1de2fa33..e066f51ba9 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.tsx
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.tsx
@@ -1,16 +1,57 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
 
 function App(): React.ReactElement {
 
-  return (
-        <div style={{ height: '80vh' }}>
-            <SpreadsheetComponent height="100%" width="100%" />
+const SpreadsheetTabContent: any = () => {
+    return (
+            <div className="spreadsheet-pane">
+                <div>
+                    <SpreadsheetComponent height="100%" width="100%" />
+                </div> 
+            </div>
+        );
+    };
+
+    return (
+        <div className="page">
+            <header className="header">
+                <h3 style={{ margin: 0 }}>Spreadsheet in tab</h3>
+            </header>
+
+            <div className="tab-host">
+                <TabComponent height="100%">
+                    <TabItemsDirective>
+                        <TabItemDirective
+                            header={{ text: 'Overview' }}
+                            content={() => (
+                                <div className="panel">
+                                    <h4>Overview</h4>
+                                    <p>Put general dashboard content here.</p>
+                                </div>
+                            )}
+                        />
+                        <TabItemDirective
+                            header={{ text: 'Spreadsheet' }}
+                            content={SpreadsheetTabContent}
+                        />
+                        <TabItemDirective
+                            header={{ text: 'Settings' }}
+                            content={() => (
+                                <div className="panel">
+                                    <h4>Settings</h4>
+                                    <p>Any settings or forms can go here.</p>
+                                </div>
+                            )}
+                        />
+                    </TabItemsDirective>
+                </TabComponent>
+            </div>
         </div>
     );
-}
-
+};
 
 export default App;
 
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/index.html
index 8b6e016434..2fb5b324fb 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/index.html
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/index.html
@@ -7,7 +7,7 @@
     <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://cdn.syncfusion.com/ej2/33.1.44/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>
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/systemjs.config.js
index 4b4909d0f5..2d4e880b4b 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/systemjs.config.js
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/systemjs.config.js
@@ -14,7 +14,7 @@ System.config({
         }
     },
     paths: {
-        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/"
     },
     map: {
         app: 'app',
@@ -41,6 +41,7 @@ System.config({
         "@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",
+        "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.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",
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx
index f1857d52ea..eff204737a 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx
@@ -1,21 +1,53 @@
 import * as React from 'react';
+import { useRef, useCallback } from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { DialogComponent } from '@syncfusion/ej2-react-popups';
 
 function App() {
 
-  return (
-        <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
-            <header style={{ height: '100px', textAlign: 'center' }}>Header Content</header>
-            <main style={{ flex: 1, minHeight: 0 }}>
-                <div style={{ height: '100%' }}>
-                    <SpreadsheetComponent height="100%" width="100%" />
-                </div>
-            </main>
-        </div>
-    );
-}
+const dialogRef = useRef(null);
+const openDialog = () => {
+    dialogRef.current.show();
+};
+const closeDialog = () => {
+    dialogRef.current.hide();
+};
+const onDialogOpen = useCallback(() => {
+    setTimeout(() => {
+        window.dispatchEvent(new Event('resize'));
+    }, 0);
+}, []);
+
+return (
+    <div className="page">
+        <header className="header">
+            <h3 style={{ margin: 0 }}>Spreadsheet inside Dialog</h3>
+            <div style={{ marginLeft: 'auto' }}>
+                <button onClick={openDialog}>Open Spreadsheet</button>
+            </div>
+        </header>
+        <DialogComponent
+            ref={(dlg) => (dialogRef.current = dlg)}
+            isModal={true}
+            visible={false}
+            header="Spreadsheet"
+            showCloseIcon={true}
+            minHeight="80vh"
+            width="80vw"
+            height="80vh"
+            allowDragging={true}
+            closeOnEscape={true}
+            target={document.body}
+            overlayClick={closeDialog}
+            open={onDialogOpen}
+        >
+            <SpreadsheetComponent height="100%" width="100%" />
+        </DialogComponent>
+    </div>
+);
 
+}
 
 export default App;
 
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx
index 1f108e5605..2ce4167850 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx
@@ -1,21 +1,53 @@
 import * as React from 'react';
+import { useRef, useCallback } from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { DialogComponent } from '@syncfusion/ej2-react-popups';
 
 function App(): React.ReactElement {
 
-  return (
-        <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
-            <header style={{ height: '100px', textAlign: 'center' }}>Header Content</header>
-            <main style={{ flex: 1, minHeight: 0 }}>
-                <div style={{ height: '100%' }}>
-                    <SpreadsheetComponent height="100%" width="100%" />
-                </div>
-            </main>
-        </div>
-    );
-}
+const dialogRef = useRef<DialogComponent | null>(null);
+const openDialog = () => {
+    dialogRef.current.show();
+};
+const closeDialog = () => {
+    dialogRef.current.hide();
+};
+const onDialogOpen = useCallback(() => {
+    setTimeout(() => {
+        window.dispatchEvent(new Event('resize'));
+    }, 0);
+}, []);
+
+return (
+    <div className="page">
+        <header className="header">
+            <h3 style={{ margin: 0 }}>Spreadsheet inside Dialog</h3>
+            <div style={{ marginLeft: 'auto' }}>
+                <button onClick={openDialog}>Open Spreadsheet</button>
+            </div>
+        </header>
+        <DialogComponent
+            ref={(dlg: any) => (dialogRef.current = dlg)}
+            isModal={true}
+            visible={false}
+            header="Spreadsheet"
+            showCloseIcon={true}
+            minHeight="80vh"
+            width="80vw"
+            height="80vh"
+            allowDragging={true}
+            closeOnEscape={true}
+            target={document.body as any}
+            overlayClick={closeDialog}
+            open={onDialogOpen}
+        >
+            <SpreadsheetComponent height="100%" width="100%" />
+        </DialogComponent>
+    </div>
+);
 
+}
 
 export default App;
 
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/index.html
index 8b6e016434..2fb5b324fb 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/index.html
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/index.html
@@ -7,7 +7,7 @@
     <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://cdn.syncfusion.com/ej2/33.1.44/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>
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/systemjs.config.js
index 4b4909d0f5..88acf0b406 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/systemjs.config.js
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/systemjs.config.js
@@ -14,7 +14,7 @@ System.config({
         }
     },
     paths: {
-        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/"
     },
     map: {
         app: 'app',
@@ -41,6 +41,7 @@ System.config({
         "@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",
+        "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.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",
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx
index 1906b47307..70556ca48c 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx
@@ -1,69 +1,60 @@
 import * as React from 'react';
+import { useCallback } from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
 
 function App() {
 
-return (
-        <div style={styles.page}>
-            <header style={styles.header}>
-                <h3 style={{ margin: 0 }}>Dashboard</h3>
-            </header>
-
-            <main style={styles.grid}>
-                <aside style={styles.sidebar}>
-                    <div style={{ padding: 12 }}>
-                        <h4 style={{ marginTop: 0 }}>Filters</h4>
-                        <p>Put other controls here</p>
-                    </div>
-                </aside>
-
-                <section style={styles.viewerArea}>
-                    <SpreadsheetComponent height="100%" width="100%" />
-                </section>
-            </main>
-        </div>
-    );
-};
-
-const styles = {
-    page: {
-        height: '100vh',
-        display: 'grid',
-        gridTemplateRows: '56px 1fr',
-        background: '#fafafa'
-    },
-    header: {
-        display: 'flex',
-        alignItems: 'center',
-        padding: '0 16px',
-        background: '#fff',
-        borderBottom: '1px solid #e5e5e5'
-    },
-    grid: {
-        display: 'grid',
-        gridTemplateColumns: '280px 1fr',
-        gap: 16,
-        padding: 16,
-        minHeight: 0 // lets children use available height
-    },
-    sidebar: {
-        background: '#fff',
-        border: '1px solid #e5e5e5',
-        borderRadius: 8,
-        overflow: 'auto'
-    },
-    viewerArea: {
-        background: '#fff',
-        border: '1px solid #e5e5e5',
-        borderRadius: 8,
-        padding: 8,
-        display: 'grid',
-        gridTemplateRows: '1fr',
-        minHeight: 0 // critical so the viewer can grow/shrink
-    }
-};
-
+    const onExpanded = useCallback((args) => {
+      setTimeout(() => {
+          window.dispatchEvent(new Event('resize'));
+      }, 0);
+    }, []);
+
+  return (
+      <div className="page">
+          <header className="header">
+              <h3 style={{ margin: 0 }}>Spreadsheet inside an Accordion</h3>
+          </header>
+          <main className="content">
+              <AccordionComponent
+                  expandMode="Single"
+                  expanding={onExpanded}
+                  expanded={onExpanded}
+              >
+                  <AccordionItemsDirective>
+                      <AccordionItemDirective
+                          header="Overview"
+                          content={() => (
+                              <div className="panel">
+                                  <h4>Overview</h4>
+                                  <p>Place any introductory content here.</p>
+                              </div>
+                          )}
+                      />
+                      <AccordionItemDirective
+                          header="Spreadsheet"
+                          expanded={true}
+                          content={() => (
+                              <SpreadsheetComponent height="100%" width="100%" /> 
+                          )}
+                      />
+                      <AccordionItemDirective
+                          header="Settings"
+                          content={() => (
+                              <div className="panel">
+                                  <h4>Settings</h4>
+                                  <p>Your forms and other controls here.</p>
+                              </div>
+                          )}
+                      />
+                  </AccordionItemsDirective>
+              </AccordionComponent>
+          </main>
+      </div>
+  );
+}
 
 export default App;
 
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx
index f485166ffb..480d2644c9 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx
@@ -1,69 +1,60 @@
 import * as React from 'react';
+import { useCallback } from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
 
 function App(): React.ReactElement {
 
-return (
-        <div style={styles.page}>
-            <header style={styles.header}>
-                <h3 style={{ margin: 0 }}>Dashboard</h3>
-            </header>
-
-            <main style={styles.grid}>
-                <aside style={styles.sidebar}>
-                    <div style={{ padding: 12 }}>
-                        <h4 style={{ marginTop: 0 }}>Filters</h4>
-                        <p>Put other controls here</p>
-                    </div>
-                </aside>
-
-                <section style={styles.viewerArea}>
-                    <SpreadsheetComponent height="100%" width="100%" />
-                </section>
-            </main>
-        </div>
-    );
-};
-
-const styles: Record<string, React.CSSProperties> = {
-    page: {
-        height: '100vh',
-        display: 'grid',
-        gridTemplateRows: '56px 1fr',
-        background: '#fafafa'
-    },
-    header: {
-        display: 'flex',
-        alignItems: 'center',
-        padding: '0 16px',
-        background: '#fff',
-        borderBottom: '1px solid #e5e5e5'
-    },
-    grid: {
-        display: 'grid',
-        gridTemplateColumns: '280px 1fr',
-        gap: 16,
-        padding: 16,
-        minHeight: 0 // lets children use available height
-    },
-    sidebar: {
-        background: '#fff',
-        border: '1px solid #e5e5e5',
-        borderRadius: 8,
-        overflow: 'auto'
-    },
-    viewerArea: {
-        background: '#fff',
-        border: '1px solid #e5e5e5',
-        borderRadius: 8,
-        padding: 8,
-        display: 'grid',
-        gridTemplateRows: '1fr',
-        minHeight: 0 // critical so the viewer can grow/shrink
-    }
-};
-
+    const onExpanded = useCallback((args: any) => {
+      setTimeout(() => {
+          window.dispatchEvent(new Event('resize'));
+      }, 0);
+    }, []);
+
+  return (
+      <div className="page">
+          <header className="header">
+              <h3 style={{ margin: 0 }}>Spreadsheet inside an Accordion</h3>
+          </header>
+          <main className="content">
+              <AccordionComponent
+                  expandMode="Single"
+                  expanding={onExpanded}
+                  expanded={onExpanded}
+              >
+                  <AccordionItemsDirective>
+                      <AccordionItemDirective
+                          header="Overview"
+                          content={() => (
+                              <div className="panel">
+                                  <h4>Overview</h4>
+                                  <p>Place any introductory content here.</p>
+                              </div>
+                          )}
+                      />
+                      <AccordionItemDirective
+                          header="Spreadsheet"
+                          expanded={true}
+                          content={() => (
+                              <SpreadsheetComponent height="100%" width="100%" /> 
+                          )}
+                      />
+                      <AccordionItemDirective
+                          header="Settings"
+                          content={() => (
+                              <div className="panel">
+                                  <h4>Settings</h4>
+                                  <p>Your forms and other controls here.</p>
+                              </div>
+                          )}
+                      />
+                  </AccordionItemsDirective>
+              </AccordionComponent>
+          </main>
+      </div>
+  );
+}
 
 export default App;
 
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/index.html
index 8b6e016434..2fb5b324fb 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/index.html
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/index.html
@@ -7,7 +7,7 @@
     <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://cdn.syncfusion.com/ej2/33.1.44/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>
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/systemjs.config.js
index 4b4909d0f5..2d4e880b4b 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/systemjs.config.js
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/systemjs.config.js
@@ -14,7 +14,7 @@ System.config({
         }
     },
     paths: {
-        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/"
     },
     map: {
         app: 'app',
@@ -41,6 +41,7 @@ System.config({
         "@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",
+        "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.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",
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.jsx
deleted file mode 100644
index a38cdf8ccf..0000000000
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
-
-function App() {
-
-const SpreadsheetTabContent = () => {
-    return (
-            <div className="spreadsheet-pane">
-                <div>
-                    <SpreadsheetComponent height="100%" width="100%" />
-                </div> 
-            </div>
-        );
-    };
-
-    return (
-        <div className="page">
-            <header className="header">
-                <h3 style={{ margin: 0 }}>Spreadsheet in tab</h3>
-            </header>
-
-            <div className="tab-host">
-                <TabComponent height="100%">
-                    <TabItemsDirective>
-                        <TabItemDirective
-                            header={{ text: 'Overview' }}
-                            content={() => (
-                                <div className="panel">
-                                    <h4>Overview</h4>
-                                    <p>Put general dashboard content here.</p>
-                                </div>
-                            )}
-                        />
-                        <TabItemDirective
-                            header={{ text: 'Spreadsheet' }}
-                            content={SpreadsheetTabContent}
-                        />
-                        <TabItemDirective
-                            header={{ text: 'Settings' }}
-                            content={() => (
-                                <div className="panel">
-                                    <h4>Settings</h4>
-                                    <p>Any settings or forms can go here.</p>
-                                </div>
-                            )}
-                        />
-                    </TabItemsDirective>
-                </TabComponent>
-            </div>
-        </div>
-    );
-};
-
-export default App;
-
-const root = createRoot(document.getElementById('root'));
-root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.tsx
deleted file mode 100644
index e066f51ba9..0000000000
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/app/app.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
-
-function App(): React.ReactElement {
-
-const SpreadsheetTabContent: any = () => {
-    return (
-            <div className="spreadsheet-pane">
-                <div>
-                    <SpreadsheetComponent height="100%" width="100%" />
-                </div> 
-            </div>
-        );
-    };
-
-    return (
-        <div className="page">
-            <header className="header">
-                <h3 style={{ margin: 0 }}>Spreadsheet in tab</h3>
-            </header>
-
-            <div className="tab-host">
-                <TabComponent height="100%">
-                    <TabItemsDirective>
-                        <TabItemDirective
-                            header={{ text: 'Overview' }}
-                            content={() => (
-                                <div className="panel">
-                                    <h4>Overview</h4>
-                                    <p>Put general dashboard content here.</p>
-                                </div>
-                            )}
-                        />
-                        <TabItemDirective
-                            header={{ text: 'Spreadsheet' }}
-                            content={SpreadsheetTabContent}
-                        />
-                        <TabItemDirective
-                            header={{ text: 'Settings' }}
-                            content={() => (
-                                <div className="panel">
-                                    <h4>Settings</h4>
-                                    <p>Any settings or forms can go here.</p>
-                                </div>
-                            )}
-                        />
-                    </TabItemsDirective>
-                </TabComponent>
-            </div>
-        </div>
-    );
-};
-
-export default App;
-
-const root = createRoot(document.getElementById('root')!);
-root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/index.html
deleted file mode 100644
index 8b6e016434..0000000000
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!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>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/systemjs.config.js
deleted file mode 100644
index 4d527a4237..0000000000
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/systemjs.config.js
+++ /dev/null
@@ -1,56 +0,0 @@
-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",
-        "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.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');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.jsx
deleted file mode 100644
index eff204737a..0000000000
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { useRef, useCallback } from 'react';
-import { createRoot } from 'react-dom/client';
-import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-import { DialogComponent } from '@syncfusion/ej2-react-popups';
-
-function App() {
-
-const dialogRef = useRef(null);
-const openDialog = () => {
-    dialogRef.current.show();
-};
-const closeDialog = () => {
-    dialogRef.current.hide();
-};
-const onDialogOpen = useCallback(() => {
-    setTimeout(() => {
-        window.dispatchEvent(new Event('resize'));
-    }, 0);
-}, []);
-
-return (
-    <div className="page">
-        <header className="header">
-            <h3 style={{ margin: 0 }}>Spreadsheet inside Dialog</h3>
-            <div style={{ marginLeft: 'auto' }}>
-                <button onClick={openDialog}>Open Spreadsheet</button>
-            </div>
-        </header>
-        <DialogComponent
-            ref={(dlg) => (dialogRef.current = dlg)}
-            isModal={true}
-            visible={false}
-            header="Spreadsheet"
-            showCloseIcon={true}
-            minHeight="80vh"
-            width="80vw"
-            height="80vh"
-            allowDragging={true}
-            closeOnEscape={true}
-            target={document.body}
-            overlayClick={closeDialog}
-            open={onDialogOpen}
-        >
-            <SpreadsheetComponent height="100%" width="100%" />
-        </DialogComponent>
-    </div>
-);
-
-}
-
-export default App;
-
-const root = createRoot(document.getElementById('root'));
-root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.tsx
deleted file mode 100644
index 2ce4167850..0000000000
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/app/app.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { useRef, useCallback } from 'react';
-import { createRoot } from 'react-dom/client';
-import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-import { DialogComponent } from '@syncfusion/ej2-react-popups';
-
-function App(): React.ReactElement {
-
-const dialogRef = useRef<DialogComponent | null>(null);
-const openDialog = () => {
-    dialogRef.current.show();
-};
-const closeDialog = () => {
-    dialogRef.current.hide();
-};
-const onDialogOpen = useCallback(() => {
-    setTimeout(() => {
-        window.dispatchEvent(new Event('resize'));
-    }, 0);
-}, []);
-
-return (
-    <div className="page">
-        <header className="header">
-            <h3 style={{ margin: 0 }}>Spreadsheet inside Dialog</h3>
-            <div style={{ marginLeft: 'auto' }}>
-                <button onClick={openDialog}>Open Spreadsheet</button>
-            </div>
-        </header>
-        <DialogComponent
-            ref={(dlg: any) => (dialogRef.current = dlg)}
-            isModal={true}
-            visible={false}
-            header="Spreadsheet"
-            showCloseIcon={true}
-            minHeight="80vh"
-            width="80vw"
-            height="80vh"
-            allowDragging={true}
-            closeOnEscape={true}
-            target={document.body as any}
-            overlayClick={closeDialog}
-            open={onDialogOpen}
-        >
-            <SpreadsheetComponent height="100%" width="100%" />
-        </DialogComponent>
-    </div>
-);
-
-}
-
-export default App;
-
-const root = createRoot(document.getElementById('root')!);
-root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/index.html
deleted file mode 100644
index 8b6e016434..0000000000
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!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>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/systemjs.config.js
deleted file mode 100644
index 694bf6ab23..0000000000
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/systemjs.config.js
+++ /dev/null
@@ -1,56 +0,0 @@
-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",
-        "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.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');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.jsx
deleted file mode 100644
index 70556ca48c..0000000000
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from 'react';
-import { useCallback } from 'react';
-import { createRoot } from 'react-dom/client';
-import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
-
-function App() {
-
-    const onExpanded = useCallback((args) => {
-      setTimeout(() => {
-          window.dispatchEvent(new Event('resize'));
-      }, 0);
-    }, []);
-
-  return (
-      <div className="page">
-          <header className="header">
-              <h3 style={{ margin: 0 }}>Spreadsheet inside an Accordion</h3>
-          </header>
-          <main className="content">
-              <AccordionComponent
-                  expandMode="Single"
-                  expanding={onExpanded}
-                  expanded={onExpanded}
-              >
-                  <AccordionItemsDirective>
-                      <AccordionItemDirective
-                          header="Overview"
-                          content={() => (
-                              <div className="panel">
-                                  <h4>Overview</h4>
-                                  <p>Place any introductory content here.</p>
-                              </div>
-                          )}
-                      />
-                      <AccordionItemDirective
-                          header="Spreadsheet"
-                          expanded={true}
-                          content={() => (
-                              <SpreadsheetComponent height="100%" width="100%" /> 
-                          )}
-                      />
-                      <AccordionItemDirective
-                          header="Settings"
-                          content={() => (
-                              <div className="panel">
-                                  <h4>Settings</h4>
-                                  <p>Your forms and other controls here.</p>
-                              </div>
-                          )}
-                      />
-                  </AccordionItemsDirective>
-              </AccordionComponent>
-          </main>
-      </div>
-  );
-}
-
-export default App;
-
-const root = createRoot(document.getElementById('root'));
-root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.tsx
deleted file mode 100644
index 480d2644c9..0000000000
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/app/app.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from 'react';
-import { useCallback } from 'react';
-import { createRoot } from 'react-dom/client';
-import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
-
-function App(): React.ReactElement {
-
-    const onExpanded = useCallback((args: any) => {
-      setTimeout(() => {
-          window.dispatchEvent(new Event('resize'));
-      }, 0);
-    }, []);
-
-  return (
-      <div className="page">
-          <header className="header">
-              <h3 style={{ margin: 0 }}>Spreadsheet inside an Accordion</h3>
-          </header>
-          <main className="content">
-              <AccordionComponent
-                  expandMode="Single"
-                  expanding={onExpanded}
-                  expanded={onExpanded}
-              >
-                  <AccordionItemsDirective>
-                      <AccordionItemDirective
-                          header="Overview"
-                          content={() => (
-                              <div className="panel">
-                                  <h4>Overview</h4>
-                                  <p>Place any introductory content here.</p>
-                              </div>
-                          )}
-                      />
-                      <AccordionItemDirective
-                          header="Spreadsheet"
-                          expanded={true}
-                          content={() => (
-                              <SpreadsheetComponent height="100%" width="100%" /> 
-                          )}
-                      />
-                      <AccordionItemDirective
-                          header="Settings"
-                          content={() => (
-                              <div className="panel">
-                                  <h4>Settings</h4>
-                                  <p>Your forms and other controls here.</p>
-                              </div>
-                          )}
-                      />
-                  </AccordionItemsDirective>
-              </AccordionComponent>
-          </main>
-      </div>
-  );
-}
-
-export default App;
-
-const root = createRoot(document.getElementById('root')!);
-root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/index.html
deleted file mode 100644
index 8b6e016434..0000000000
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!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>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/systemjs.config.js
deleted file mode 100644
index 4d527a4237..0000000000
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/systemjs.config.js
+++ /dev/null
@@ -1,56 +0,0 @@
-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",
-        "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.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');
\ No newline at end of file

From deff49483f42561d6a9690927827b689247fb368 Mon Sep 17 00:00:00 2001
From: NithishkumarRavikumar <kumarnithish357@gmail.com>
Date: Fri, 10 Apr 2026 17:23:56 +0530
Subject: [PATCH 5/6] 1015310: added code samples for integrate spreadsheet
 into existing layouts

---
 .../React/how-to/existing-react-layout.md     | 33 ++++++++++++++++++-
 .../integrate-into-layouts-cs3/app/app.jsx    | 30 ++++++++++++-----
 .../integrate-into-layouts-cs3/app/app.tsx    | 30 +++++++++++------
 3 files changed, 73 insertions(+), 20 deletions(-)

diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md b/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md
index 2d385ac29a..60975f9f62 100644
--- a/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md
+++ b/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md
@@ -60,8 +60,39 @@ For accordions or collapsible containers, you can render the Spreadsheet inside
 
 {% previewsample "/document-processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3" %}
 
+## Why visibility and height matter
+
+The Spreadsheet measures its host container to calculate column widths, row heights and layout. If the host element has no height (collapsed, `display:none`, or not yet mounted) measurements will be zero and the Spreadsheet may render incorrectly, be clipped, or not display at all.
+
+Initialize or refresh the Spreadsheet when its host becomes visible (tab active, modal opened, accordion expanded) so internal layout code can compute sizes.
+
+## Resize & visibility tips
+
+Dispatch a global resize right after the container becomes visible:
+
+```js
+setTimeout(() => window.dispatchEvent(new Event('resize')), 0);
+```
+
+Use a `ResizeObserver` when the host size may change frequently — this forwards size changes into the global resize event so the Spreadsheet can re-measure:
+
+```js
+const observer = new ResizeObserver(() => {
+	window.dispatchEvent(new Event('resize'));
+});
+observer.observe(document.querySelector('#spreadsheet')!);
+```
+
+Lazy-render inside tabs/dialogs/accordions: only mount the Spreadsheet when the pane is visible. If you must mount while hidden, call a refresh after showing (for example, call `window.dispatchEvent(new Event('resize'))` or the component's refresh method) so the Spreadsheet recomputes layout.
+
+## When to use these patterns
+
+- Use Dialogs for temporary or isolated spreadsheet previews.
+- Use Tabs/Accordion patterns for multi-pane UIs — ensure a resize/refresh is triggered when a pane becomes active.
+- Avoid placing the Spreadsheet in invisible containers without a resize/refresh strategy; otherwise measurements will be zero and layout will break.
+
 ## See also
 
 - [Overview of Syncfusion React Tab component](https://ej2.syncfusion.com/react/documentation/tab/getting-started)
 - [Overview of Syncfusion React Dialog component](https://ej2.syncfusion.com/react/documentation/dialog/getting-started)
-- [Overview of Syncfusion React Accordion component](https://ej2.syncfusion.com/react/documentation/accordion/getting-started)
+- [Overview of Syncfusion React Accordion component](https://ej2.syncfusion.com/react/documentation/accordion/getting-started)
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx
index 70556ca48c..876d6b460c 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx
@@ -1,16 +1,30 @@
 import * as React from 'react';
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
 import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
 
 function App() {
+        const spreadsheetRef = useRef(null);
+        const onExpanded = useCallback((args) => {
+              setTimeout(() => {
+                  window.dispatchEvent(new Event('resize'));
+                  if (spreadsheetRef.current && typeof spreadsheetRef.current.refresh === 'function') {
+                      spreadsheetRef.current.refresh();
+                  }
+              }, 0);
+        }, []);
 
-    const onExpanded = useCallback((args) => {
-      setTimeout(() => {
-          window.dispatchEvent(new Event('resize'));
-      }, 0);
-    }, []);
+        const spreadsheetContent = () => (
+            <div className="sheet-pane">
+                <SpreadsheetComponent
+                    ref={(spreadsheet) => (spreadsheetRef.current = spreadsheet)}
+                    id="spreadsheetInAccordion"
+                    height="100%"
+                    width="100%"
+                />
+            </div>
+        );
 
   return (
       <div className="page">
@@ -36,9 +50,7 @@ function App() {
                       <AccordionItemDirective
                           header="Spreadsheet"
                           expanded={true}
-                          content={() => (
-                              <SpreadsheetComponent height="100%" width="100%" /> 
-                          )}
+                          content={spreadsheetContent}
                       />
                       <AccordionItemDirective
                           header="Settings"
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx
index 480d2644c9..f018ac5eea 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx
@@ -1,16 +1,28 @@
 import * as React from 'react';
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
+import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective, ExpandEventArgs } from '@syncfusion/ej2-react-navigations';
 
 function App(): React.ReactElement {
+        const spreadsheetRef = useRef<SpreadsheetComponent | null>(null);
+        const onExpanded = useCallback((args: ExpandEventArgs) => {
+              setTimeout(() => {
+                  window.dispatchEvent(new Event('resize'));
+                  (spreadsheetRef.current as any).refresh();
+              }, 0);
+        }, []);
 
-    const onExpanded = useCallback((args: any) => {
-      setTimeout(() => {
-          window.dispatchEvent(new Event('resize'));
-      }, 0);
-    }, []);
+        const spreadsheetContent = () => (
+            <div className="sheet-pane">
+                <SpreadsheetComponent
+                    ref={(spreadsheet: any) => (spreadsheetRef.current = spreadsheet)}
+                    id="spreadsheetInAccordion"
+                    height="100%"
+                    width="100%"
+                />
+            </div>
+        );
 
   return (
       <div className="page">
@@ -36,9 +48,7 @@ function App(): React.ReactElement {
                       <AccordionItemDirective
                           header="Spreadsheet"
                           expanded={true}
-                          content={() => (
-                              <SpreadsheetComponent height="100%" width="100%" /> 
-                          )}
+                          content={spreadsheetContent}
                       />
                       <AccordionItemDirective
                           header="Settings"

From d4ff0aff8bc93ae50a016d2fc34c6ec9e9dc9d44 Mon Sep 17 00:00:00 2001
From: NithishkumarRavikumar <kumarnithish357@gmail.com>
Date: Thu, 16 Apr 2026 16:12:01 +0530
Subject: [PATCH 6/6] 1015310: added code samples for integrate spreadsheet
 into existing layouts

---
 .../React/how-to/existing-react-layout.md       | 17 +++++------------
 .../integrate-into-layouts-cs2/app/app.jsx      |  3 ++-
 .../integrate-into-layouts-cs2/app/app.tsx      |  3 ++-
 .../integrate-into-layouts-cs3/app/app.jsx      |  5 +----
 .../integrate-into-layouts-cs3/app/app.tsx      |  3 +--
 5 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md b/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md
index 60975f9f62..06109ebb63 100644
--- a/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md
+++ b/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md
@@ -68,22 +68,15 @@ Initialize or refresh the Spreadsheet when its host becomes visible (tab active,
 
 ## Resize & visibility tips
 
-Dispatch a global resize right after the container becomes visible:
+After the host becomes visible, call the Spreadsheet instance's [resize](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#resize) method so it can recompute layout:
 
 ```js
-setTimeout(() => window.dispatchEvent(new Event('resize')), 0);
+setTimeout(() => {
+	spreadsheetRef.current.resize();
+}, 0);
 ```
 
-Use a `ResizeObserver` when the host size may change frequently — this forwards size changes into the global resize event so the Spreadsheet can re-measure:
-
-```js
-const observer = new ResizeObserver(() => {
-	window.dispatchEvent(new Event('resize'));
-});
-observer.observe(document.querySelector('#spreadsheet')!);
-```
-
-Lazy-render inside tabs/dialogs/accordions: only mount the Spreadsheet when the pane is visible. If you must mount while hidden, call a refresh after showing (for example, call `window.dispatchEvent(new Event('resize'))` or the component's refresh method) so the Spreadsheet recomputes layout.
+Lazy-render inside tabs/dialogs/accordions: only mount the Spreadsheet when the pane is visible. If you must mount while hidden, call `spreadsheetRef.current.resize()` after showing so the Spreadsheet recomputes layout.
 
 ## When to use these patterns
 
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx
index eff204737a..93d0bc3fb5 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx
@@ -7,6 +7,7 @@ import { DialogComponent } from '@syncfusion/ej2-react-popups';
 function App() {
 
 const dialogRef = useRef(null);
+const spreadsheetRef = useRef(null);
 const openDialog = () => {
     dialogRef.current.show();
 };
@@ -15,7 +16,7 @@ const closeDialog = () => {
 };
 const onDialogOpen = useCallback(() => {
     setTimeout(() => {
-        window.dispatchEvent(new Event('resize'));
+        spreadsheetRef.current.resize();
     }, 0);
 }, []);
 
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx
index 2ce4167850..439bf9cfde 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx
@@ -7,6 +7,7 @@ import { DialogComponent } from '@syncfusion/ej2-react-popups';
 function App(): React.ReactElement {
 
 const dialogRef = useRef<DialogComponent | null>(null);
+const spreadsheetRef = useRef<SpreadsheetComponent | null>(null);
 const openDialog = () => {
     dialogRef.current.show();
 };
@@ -15,7 +16,7 @@ const closeDialog = () => {
 };
 const onDialogOpen = useCallback(() => {
     setTimeout(() => {
-        window.dispatchEvent(new Event('resize'));
+        spreadsheetRef.current.resize();
     }, 0);
 }, []);
 
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx
index 876d6b460c..5b43c32e4b 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx
@@ -8,10 +8,7 @@ function App() {
         const spreadsheetRef = useRef(null);
         const onExpanded = useCallback((args) => {
               setTimeout(() => {
-                  window.dispatchEvent(new Event('resize'));
-                  if (spreadsheetRef.current && typeof spreadsheetRef.current.refresh === 'function') {
-                      spreadsheetRef.current.refresh();
-                  }
+                  spreadsheetRef.current.resize();
               }, 0);
         }, []);
 
diff --git a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx
index f018ac5eea..f62fa04322 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx
+++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx
@@ -8,8 +8,7 @@ function App(): React.ReactElement {
         const spreadsheetRef = useRef<SpreadsheetComponent | null>(null);
         const onExpanded = useCallback((args: ExpandEventArgs) => {
               setTimeout(() => {
-                  window.dispatchEvent(new Event('resize'));
-                  (spreadsheetRef.current as any).refresh();
+                  spreadsheetRef.current.resize();
               }, 0);
         }, []);