diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 557bd1cbaf..4654ee79cd 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5528,6 +5528,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..06109ebb63 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/how-to/existing-react-layout.md @@ -0,0 +1,91 @@ +--- +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 supported inside Syncfusion Tab components. + +{% 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 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-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 + +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-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 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 + +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(() => { + spreadsheetRef.current.resize(); +}, 0); +``` + +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 + +- 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) \ No newline at end of file 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..93d0bc3fb5 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.jsx @@ -0,0 +1,56 @@ +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(() => { + 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..439bf9cfde --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/integrate-into-layouts-cs2/app/app.tsx @@ -0,0 +1,56 @@ +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(() => { + 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..5b43c32e4b --- /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 { 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(() => { + 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..f62fa04322 --- /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 { 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(() => { + 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