From a7662c82ec61da7f35532805272eb0be94518e94 Mon Sep 17 00:00:00 2001 From: NithishkumarRavikumar Date: Wed, 18 Mar 2026 11:15:40 +0530 Subject: [PATCH 1/3] 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 6c524c3d3..2981c2027 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5519,6 +5519,7 @@
  • Add an icon to the cell
  • Get the filtered row data
  • Paste only values without formatting and styles
    • +
  • Integrate spreadsheet into existing react layouts
  • Mobile Responsiveness
    • 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 000000000..1f35ecd54 --- /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 ( +
    + +
    + ); +} +{% 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 ( +
    +
    Header Content
    +
    +
    + +
    +
    +
    + ); +} +{% 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 ( +
    +
    +

    Dashboard

    +
    + +
    + + +
    + +
    +
    +
    + ); +}; + +const styles: Record = { + 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 ( +
    +
    + +
    +
    + ); + }; + + return ( +
    +
    +

    Spreadsheet in tab

    +
    + +
    + + + ( +
    +

    Overview

    +

    Put general dashboard content here.

    +
    + )} + /> + + ( +
    +

    Settings

    +

    Any settings or forms can go here.

    +
    + )} + /> +     +     +
    +
    + ); +}; +{% 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(null); + const openDialog = () => { + dialogRef.current!.show(); + }; + const closeDialog = () => { + dialogRef.current!.hide(); + }; + const onDialogOpen = useCallback(() => { + setTimeout(() => { + window.dispatchEvent(new Event('resize')); + }, 0); + }, []); + + return ( +
    +
    +

    Spreadsheet inside Dialog

    +
    + +
    +
    + (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} + > + + +
    + ); +}; +{% 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 ( +
    +
    +

    Spreadsheet inside an Accordion

    +
    +
    + + + ( +
    +

    Overview

    +

    Place any introductory content here.

    +
    + )} + /> + ( + + )} + /> + ( +
    +

    Settings

    +

    Your forms and other controls here.

    +
    + )} + /> +     +     +
    +
    + ); +}; +{% 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 Date: Wed, 18 Mar 2026 12:32:33 +0530 Subject: [PATCH 2/3] 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 1f35ecd54..b2d79a42f 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 ( -
    - -
    - ); -} -{% 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 ( -
    -
    Header Content
    -
    -
    - -
    -
    -
    - ); -} -{% 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 ( -
    -
    -

    Dashboard

    -
    - -
    - - -
    - -
    -
    -
    - ); -}; - -const styles: Record = { - 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 ( -
    -
    - -
    -
    - ); - }; - - return ( -
    -
    -

    Spreadsheet in tab

    -
    - -
    - - - ( -
    -

    Overview

    -

    Put general dashboard content here.

    -
    - )} - /> - - ( -
    -

    Settings

    -

    Any settings or forms can go here.

    -
    - )} - /> -     -     -
    -
    - ); -}; +{% 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(null); - const openDialog = () => { - dialogRef.current!.show(); - }; - const closeDialog = () => { - dialogRef.current!.hide(); - }; - const onDialogOpen = useCallback(() => { - setTimeout(() => { - window.dispatchEvent(new Event('resize')); - }, 0); - }, []); - - return ( -
    -
    -

    Spreadsheet inside Dialog

    -
    - -
    -
    - (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} - > - - -
    - ); -}; +{% 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 ( -
    -
    -

    Spreadsheet inside an Accordion

    -
    -
    - - - ( -
    -

    Overview

    -

    Place any introductory content here.

    -
    - )} - /> - ( - - )} - /> - ( -
    -

    Settings

    -

    Your forms and other controls here.

    -
    - )} - /> -     -     -
    -
    - ); -}; +{% 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 Date: Wed, 18 Mar 2026 12:33:23 +0530 Subject: [PATCH 3/3] 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 000000000..bc84613fe --- /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 ( +
    + +
    + ); +} + + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ 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 000000000..8f1de2fa3 --- /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 ( +
    + +
    + ); +} + + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ 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 000000000..8b6e01643 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ 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 000000000..4b4909d0f --- /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 000000000..f1857d52e --- /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 ( +
    +
    Header Content
    +
    +
    + +
    +
    +
    + ); +} + + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ 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 000000000..1f108e560 --- /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 ( +
    +
    Header Content
    +
    +
    + +
    +
    +
    + ); +} + + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ 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 000000000..8b6e01643 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ 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 000000000..4b4909d0f --- /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 000000000..1906b4730 --- /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 ( +
    +
    +

    Dashboard

    +
    + +
    + + +
    + +
    +
    +
    + ); +}; + +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(); \ 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 000000000..f485166ff --- /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 ( +
    +
    +

    Dashboard

    +
    + +
    + + +
    + +
    +
    +
    + ); +}; + +const styles: Record = { + 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(); \ 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 000000000..8b6e01643 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ 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 000000000..4b4909d0f --- /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 000000000..a38cdf8cc --- /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 ( +
    +
    + +
    +
    + ); + }; + + return ( +
    +
    +

    Spreadsheet in tab

    +
    + +
    + + + ( +
    +

    Overview

    +

    Put general dashboard content here.

    +
    + )} + /> + + ( +
    +

    Settings

    +

    Any settings or forms can go here.

    +
    + )} + /> +     +     +
    +
    + ); +}; + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ 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 000000000..e066f51ba --- /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 ( +
    +
    + +
    +
    + ); + }; + + return ( +
    +
    +

    Spreadsheet in tab

    +
    + +
    + + + ( +
    +

    Overview

    +

    Put general dashboard content here.

    +
    + )} + /> + + ( +
    +

    Settings

    +

    Any settings or forms can go here.

    +
    + )} + /> +     +     +
    +
    + ); +}; + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ 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 000000000..8b6e01643 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs4/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ 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 000000000..4d527a423 --- /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 000000000..eff204737 --- /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 ( +
    +
    +

    Spreadsheet inside Dialog

    +
    + +
    +
    + (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} + > + + +
    +); + +} + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ 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 000000000..2ce416785 --- /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(null); +const openDialog = () => { + dialogRef.current.show(); +}; +const closeDialog = () => { + dialogRef.current.hide(); +}; +const onDialogOpen = useCallback(() => { + setTimeout(() => { + window.dispatchEvent(new Event('resize')); + }, 0); +}, []); + +return ( +
    +
    +

    Spreadsheet inside Dialog

    +
    + +
    +
    + (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} + > + + +
    +); + +} + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ 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 000000000..8b6e01643 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs5/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ 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 000000000..694bf6ab2 --- /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 000000000..70556ca48 --- /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 ( +
    +
    +

    Spreadsheet inside an Accordion

    +
    +
    + + + ( +
    +

    Overview

    +

    Place any introductory content here.

    +
    + )} + /> + ( + + )} + /> + ( +
    +

    Settings

    +

    Your forms and other controls here.

    +
    + )} + /> +     +     +
    +
    + ); +} + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ 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 000000000..480d2644c --- /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 ( +
    +
    +

    Spreadsheet inside an Accordion

    +
    +
    + + + ( +
    +

    Overview

    +

    Place any introductory content here.

    +
    + )} + /> + ( + + )} + /> + ( +
    +

    Settings

    +

    Your forms and other controls here.

    +
    + )} + /> +     +     +
    +
    + ); +} + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ 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 000000000..8b6e01643 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs6/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ 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 000000000..4d527a423 --- /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