diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/README.md b/README.md index b035b46..5a2a2f6 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,29 @@ # Getting Started with the React Spreadsheet Component -A quick-start project that shows how to create and configure the Syncfusion React Spreadsheet component. This project also contains code example to configure a few of the control’s basic features like data-binding, importing, and exporting Excel documents. +A quick-start project that helps you create and configure the Syncfusion React Spreadsheet component. This project enables users to clone and run the app easily to explore Spreadsheet features. -Documentation: https://ej2.syncfusion.com/react/documentation/spreadsheet/getting-started/ +## Documentation -Online examples: https://ej2.syncfusion.com/react/demos/#/bootstrap5/spreadsheet/default +- Getting Started Guide: https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started +- Online Demo: https://document.syncfusion.com/demos/spreadsheet-editor/react/#/tailwind3/spreadsheet/default +- Tutorial Videos: https://www.syncfusion.com/tutorial-videos/react/spreadsheet -## Project prerequisites +## Project Prerequisites -Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project. +- Node.js(v14.15.0 or higher) +- npm or yarn +- React (latest stable) -### How to run this application? +## How to run this application? -To run this application, you need to clone the `getting-started-with-the-react-spreadsheet-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `npm start` command. +1. Clone the repository. +2. Open the project in Visual Studio Code. +3. Install the required dependencies using: + ``` + npm install + ``` +4. Run the application using: + ``` + npm start + ``` +5. Open http://localhost:3000 in your browser. diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 0000000..ea36dd3 --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,21 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import { defineConfig, globalIgnores } from 'eslint/config' + +export default defineConfig([ + globalIgnores(['dist']), + { + files: ['**/*.{js,jsx}'], + extends: [ + js.configs.recommended, + reactHooks.configs.flat.recommended, + reactRefresh.configs.vite, + ], + languageOptions: { + globals: globals.browser, + parserOptions: { ecmaFeatures: { jsx: true } }, + }, + }, +]) diff --git a/index.html b/index.html new file mode 100644 index 0000000..d268058 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + spreadsheet-app + + +
+ + + diff --git a/package.json b/package.json index 71179dd..158fc40 100644 --- a/package.json +++ b/package.json @@ -1,44 +1,28 @@ { - "name": "myreactapp", - "version": "0.1.0", + "name": "spreadsheet-app", "private": true, - "dependencies": { - "@syncfusion/ej2-react-spreadsheet": "^20.1.47", - "@testing-library/jest-dom": "^5.16.4", - "@testing-library/react": "^12.1.4", - "@testing-library/user-event": "^13.5.0", - "@types/jest": "^27.4.1", - "@types/node": "^16.11.26", - "@types/react": "^17.0.43", - "@types/react-dom": "^17.0.14", - "react": "^18.0.0", - "react-dom": "^18.0.0", - "react-scripts": "5.0.0", - "typescript": "^4.6.3", - "web-vitals": "^2.1.4" - }, + "version": "0.0.0", + "type": "module", "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "vite", + "build": "vite build", + "lint": "eslint .", + "preview": "vite preview" }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] + "dependencies": { + "@syncfusion/ej2-react-spreadsheet": "^33.2.3", + "react": "^19.2.5", + "react-dom": "^19.2.5" }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] + "devDependencies": { + "@eslint/js": "^10.0.1", + "@types/react": "^19.2.14", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^6.0.1", + "eslint": "^10.2.1", + "eslint-plugin-react-hooks": "^7.1.1", + "eslint-plugin-react-refresh": "^0.5.2", + "globals": "^17.5.0", + "vite": "^8.0.10" } } diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index a11777c..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..6893eb1 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons.svg b/public/icons.svg new file mode 100644 index 0000000..e952219 --- /dev/null +++ b/public/icons.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/index.html b/public/index.html deleted file mode 100644 index aa069f2..0000000 --- a/public/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - - - - - - - React App - - - -
- - - diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 080d6c7..0000000 --- a/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/public/robots.txt b/public/robots.txt deleted file mode 100644 index e9e57dc..0000000 --- a/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/src/App.css b/src/App.css index d997845..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +0,0 @@ -@import url("https://cdn.syncfusion.com/ej2/bootstrap5.css"); - -.App{ - margin: 2%; -} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..821ad0f --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,10 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; + +export default function App() { + return (); +} +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/src/App.test.tsx b/src/App.test.tsx deleted file mode 100644 index 2a68616..0000000 --- a/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index 0393a49..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import './App.css'; -import {RangeDirective, RangesDirective, SheetDirective, SheetsDirective, - SpreadsheetComponent} from '@syncfusion/ej2-react-spreadsheet'; -import {defaultData} from './data'; -function App() { - return ( -
- - - - - - - - - -
- ); -} - -export default App; diff --git a/src/assets/hero.png b/src/assets/hero.png new file mode 100644 index 0000000..02251f4 Binary files /dev/null and b/src/assets/hero.png differ diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/vite.svg b/src/assets/vite.svg new file mode 100644 index 0000000..5101b67 --- /dev/null +++ b/src/assets/vite.svg @@ -0,0 +1 @@ +Vite diff --git a/src/data.js b/src/data.js deleted file mode 100644 index 5bb8b10..0000000 --- a/src/data.js +++ /dev/null @@ -1,235 +0,0 @@ -Object.defineProperty(exports, "__esModule", { value: true }); -exports.defaultData = [ - { - "Customer Name": "Romona Heaslip", - "Model": "Taurus", - "Color": "Aquamarine", - "Payment Mode": "Debit Card", - "Delivery Date": "07/11/2015", - "Amount": "8529.22" - }, - { - "Customer Name": "Clare Batterton", - "Model": "Sparrow", - "Color": "Pink", - "Payment Mode": "Cash On Delivery", - "Delivery Date": "7/13/2016", - "Amount": "17866.19" - }, - { - "Customer Name": "Eamon Traise", - "Model": "Grand Cherokee", - "Color": "Blue", - "Payment Mode": "Net Banking", - "Delivery Date": "09/04/2015", - "Amount": "13853.09" - }, - { - "Customer Name": "Julius Gorner", - "Model": "GTO", - "Color": "Aquamarine", - "Payment Mode": "Credit Card", - "Delivery Date": "12/15/2017", - "Amount": "2338.74" - }, - { - "Customer Name": "Jenna Schoolfield", - "Model": "LX", - "Color": "Yellow", - "Payment Mode": "Credit Card", - "Delivery Date": "10/08/2014", - "Amount": "9578.45" - }, - { - "Customer Name": "Marylynne Harring", - "Model": "Catera", - "Color": "Green", - "Payment Mode": "Cash On Delivery", - "Delivery Date": "7/01/2017", - "Amount": "19141.62" - }, - { - "Customer Name": "Vilhelmina Leipelt", - "Model": "7 Series", - "Color": "Goldenrod", - "Payment Mode": "Credit Card", - "Delivery Date": "12/20/2015", - "Amount": "6543.30" - }, - { - "Customer Name": "Barby Heisler", - "Model": "Corvette", - "Color": "Red", - "Payment Mode": "Credit Card", - "Delivery Date": "11/24/2014", - "Amount": "13035.06" - }, - { - "Customer Name": "Karyn Boik", - "Model": "Regal", - "Color": "Indigo", - "Payment Mode": "Debit Card", - "Delivery Date": "05/12/2014", - "Amount": "18488.80" - }, - { - "Customer Name": "Jeanette Pamplin", - "Model": "S4", - "Color": "Fuscia", - "Payment Mode": "Net Banking", - "Delivery Date": "12/30/2014", - "Amount": "12317.04" - }, - { - "Customer Name": "Cristi Espinos", - "Model": "TL", - "Color": "Aquamarine", - "Payment Mode": "Credit Card", - "Delivery Date": "12/18/2013", - "Amount": "6230.13" - }, - { - "Customer Name": "Issy Humm", - "Model": "Club Wagon", - "Color": "Pink", - "Payment Mode": "Cash On Delivery", - "Delivery Date": "02/02/2015", - "Amount": "9709.49" - }, - { - "Customer Name": "Tuesday Fautly", - "Model": "V8 Vantage", - "Color": "Crimson", - "Payment Mode": "Debit Card", - "Delivery Date": "11/19/2014", - "Amount": "9766.10" - }, - { - "Customer Name": "Rosemaria Thomann", - "Model": "Caravan", - "Color": "Violet", - "Payment Mode": "Net Banking", - "Delivery Date": "02/08/2014", - "Amount": "7685.49" - }, - { - "Customer Name": "Lyell Fuentez", - "Model": "Bravada", - "Color": "Violet", - "Payment Mode": "Debit Card", - "Delivery Date": "08/05/2016", - "Amount": "18012.45" - }, - { - "Customer Name": "Raynell Layne", - "Model": "Colorado", - "Color": "Pink", - "Payment Mode": "Credit Card", - "Delivery Date": "05/30/2016", - "Amount": "2785.49" - }, - { - "Customer Name": "Raye Whines", - "Model": "4Runner", - "Color": "Red", - "Payment Mode": "Debit Card", - "Delivery Date": "12/10/2016", - "Amount": "9967.74" - }, - { - "Customer Name": "Virgina Aharoni", - "Model": "TSX", - "Color": "Pink", - "Payment Mode": "Cash On Delivery", - "Delivery Date": "10/23/2014", - "Amount": "5584.33" - }, - { - "Customer Name": "Peta Cheshir", - "Model": "Pathfinder", - "Color": "Red", - "Payment Mode": "Net Banking", - "Delivery Date": "12/24/2015", - "Amount": "5286.53" - }, - { - "Customer Name": "Jule Urion", - "Model": "Charger", - "Color": "Violet", - "Payment Mode": "Debit Card", - "Delivery Date": "11/20/2013", - "Amount": "13511.91" - }, - { - "Customer Name": "Lew Gilyatt", - "Model": "Bonneville", - "Color": "Crimson", - "Payment Mode": "Credit Card", - "Delivery Date": "11/19/2013", - "Amount": "6498.19" - }, - { - "Customer Name": "Jobey Fortun", - "Model": "B-Series", - "Color": "Blue", - "Payment Mode": "Net Banking", - "Delivery Date": "10/30/2014", - "Amount": "10359.67" - }, - { - "Customer Name": "Blondie Crump", - "Model": "Voyager", - "Color": "Turquoise", - "Payment Mode": "Credit Card", - "Delivery Date": "04/06/2018", - "Amount": "8118.39" - }, - { - "Customer Name": "Florentia Binns", - "Model": "Grand Prix", - "Color": "Orange", - "Payment Mode": "Cash On Delivery", - "Delivery Date": "10/13/2016", - "Amount": "10204.37" - }, - { - "Customer Name": "Jaquelin Galtone", - "Model": "Sunbird", - "Color": "Red", - "Payment Mode": "Net Banking", - "Delivery Date": "10/22/2013", - "Amount": "6528.06" - }, - { - "Customer Name": "Hakeem Easseby", - "Model": "Mirage", - "Color": "Crimson", - "Payment Mode": "Debit Card", - "Delivery Date": "9/12/2014", - "Amount": "5619.25" - }, - { - "Customer Name": "Nickolaus Gidman", - "Model": "XK", - "Color": "Orange", - "Payment Mode": "Debit Card", - "Delivery Date": "05/12/2016", - "Amount": "5091.43" - }, - { - "Customer Name": "Jenine Iglesia", - "Model": "Accord", - "Color": "Orange", - "Payment Mode": "Debit Card", - "Delivery Date": "09/03/2018", - "Amount": "14566.08" - }, - { - "Customer Name": "Fax Witherspoon", - "Model": "Range Rover Sport", - "Color": "Orange", - "Payment Mode": "Credit Card", - "Delivery Date": "2/22/2018", - "Amount": "5284.87" - } -]; \ No newline at end of file diff --git a/src/index.css b/src/index.css index ec2585e..c5f656f 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,10 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-grids/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/material.css'; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx deleted file mode 100644 index ef2edf8..0000000 --- a/src/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; - -ReactDOM.render( - - - , - document.getElementById('root') -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 0000000..b9a1a6d --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.jsx' + +createRoot(document.getElementById('root')).render( + + + , +) diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts deleted file mode 100644 index ece12df..0000000 --- a/src/react-app-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts deleted file mode 100644 index 49a2a16..0000000 --- a/src/reportWebVitals.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { ReportHandler } from 'web-vitals'; - -const reportWebVitals = (onPerfEntry?: ReportHandler) => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.ts b/src/setupTests.ts deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.ts +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/tsconfig.json b/tsconfig.json deleted file mode 100644 index 16fff78..0000000 --- a/tsconfig.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "allowJs": true, - "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noFallthroughCasesInSwitch": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" - }, - "include": [ - "src" - ] -} diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..8b0f57b --- /dev/null +++ b/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +})