diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 79389eb762..9a635d3713 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5515,6 +5515,7 @@
  • Get the filtered row data
  • Customize spreadsheet like a grid
  • 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 0000000000..d6eec678ae --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md @@ -0,0 +1,100 @@ +--- +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 + +### Use Spreadsheet inside Tab components + +The React Spreadsheet component is fully supported within [Syncfusion Tab component](https://ej2.syncfusion.com/react/documentation/api/tab/index-default). You can safely place and render the Spreadsheet inside a Tab item. + +The following sample shows how to render the Spreadsheet inside the Tab component. + +{% 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" %} + +### Use spreadsheet inside Dialog + +If the Spreadsheet is placed inside a dialog (for example, a Syncfusion Dialog), render or initialize the Spreadsheet only within the dialog’s open event. The parent container must be visible in the DOM for the Spreadsheet to correctly measure and compute its layout. + +And if the Spreadsheet is rendered while the dialog container is hidden and the container is made visible later, the Spreadsheet may not render correctly. In such cases, invoke the [resize](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#resize) method in the dialog's open event to re-render the Spreadsheet layout based on the currently visible parent container. + +The following sample shows how to render Spreadsheet inside the Dialog component. + +{% 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" %} + +### Use Spreadsheet inside collapsible sections + +When placing the Spreadsheet inside an accordion or any collapsible container (for example, within an AccordionItem), it is important to ensure that the Spreadsheet is rendered only when the corresponding section is visible. The Spreadsheet relies on the visibility of its parent container in the DOM to accurately measure dimensions and compute its layout. + +If the accordion item is initialized while it is in a collapsed (hidden) state, the Spreadsheet will not be able to calculate its layout correctly, which may result in improper rendering. To avoid this, you can either: + +- Render or initialize the Spreadsheet only when the accordion item becomes active (expanded), or +- If the Spreadsheet must be rendered while the accordion item is hidden, explicitly trigger a Spreadsheet's [resize](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#resize) method in the accordion's expanded event to re-render the Spreadsheet layout based on the current parent container. + +The following sample shows how to render the Spreadsheet inside the Accordion. + +{% 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" %} + +## Why visibility and height matter + +The Spreadsheet measures its parent container to calculate column widths, row heights and layout. If the parent container 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 the Spreadsheet when its parent container becomes visible (tab active, modal opened, accordion expanded) or invoke the [resize](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#resize) method of Spreadsheet once the parent container is visible to re-render the Spreadsheet based on the visible parent container's height and width. + +```js +setTimeout(() => { + spreadsheetRef.current.resize(); +}, 0); +``` + +> **Note**: Mount the Spreadsheet component only when the corresponding pane becomes visible. If the Spreadsheet must be mounted while hidden, call its [resize](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#resize) method after the pane is shown so that the layout is recalculated correctly. + +## 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) 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..a38cdf8ccf --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/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-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/app/app.tsx new file mode 100644 index 0000000000..e066f51ba9 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/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-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/index.html new file mode 100644 index 0000000000..2fb5b324fb --- /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 0000000000..2d4e880b4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs1/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/33.1.44/" + }, + 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-cs2/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx new file mode 100644 index 0000000000..49973c8192 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx @@ -0,0 +1,57 @@ +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 spreadsheetRef = useRef(null); +const openDialog = () => { + dialogRef.current.show(); +}; +const closeDialog = () => { + dialogRef.current.hide(); +}; +const onDialogOpen = useCallback(() => { + setTimeout(() => { + // Use resize method to recompute layout after panel becomes visible + spreadsheetRef.current.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-cs2/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx new file mode 100644 index 0000000000..9543892ea9 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx @@ -0,0 +1,57 @@ +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 spreadsheetRef = useRef(null); +const openDialog = () => { + dialogRef.current.show(); +}; +const closeDialog = () => { + dialogRef.current.hide(); +}; +const onDialogOpen = useCallback(() => { + setTimeout(() => { + // Use resize method to recompute layout after panel becomes visible + spreadsheetRef.current.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-cs2/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/index.html new file mode 100644 index 0000000000..2fb5b324fb --- /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 0000000000..88acf0b406 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/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/33.1.44/" + }, + 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-cs3/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx new file mode 100644 index 0000000000..a47f1354a6 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.jsx @@ -0,0 +1,72 @@ +import * as React 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(() => { + // Use resize method to recompute layout after panel becomes visible + spreadsheetRef.current.resize(); + }, 0); + }, []); + + const spreadsheetContent = () => ( +
    + (spreadsheetRef.current = spreadsheet)} + id="spreadsheetInAccordion" + height="100%" + width="100%" + /> +
    + ); + + 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-cs3/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx new file mode 100644 index 0000000000..005eeffbac --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/app/app.tsx @@ -0,0 +1,72 @@ +import * as React from 'react'; +import { useCallback, useRef } from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; +import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective, ExpandEventArgs } from '@syncfusion/ej2-react-navigations'; + +function App(): React.ReactElement { + const spreadsheetRef = useRef(null); + const onExpanded = useCallback((args: ExpandEventArgs) => { + setTimeout(() => { + // Use resize method to recompute layout after panel becomes visible + spreadsheetRef.current.resize(); + }, 0); + }, []); + + const spreadsheetContent = () => ( +
    + (spreadsheetRef.current = spreadsheet)} + id="spreadsheetInAccordion" + height="100%" + width="100%" + /> +
    + ); + + 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-cs3/index.html b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/index.html new file mode 100644 index 0000000000..2fb5b324fb --- /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 0000000000..2d4e880b4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs3/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/33.1.44/" + }, + 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