The Default SpreadSheet Component only shows cells A1 with border. all the other cells do not have borders.
I am trying to render a basic sheet in react app, then advance it later. However this is the output.
React Version: 17.0.2
Attached is my package.json.
{
"name": "dfa_upgraded-ui",
"version": "0.1.0",
"private": true,
"homepage": "https://gcpdfa.rahisi.co/",
"dependencies": {
"@ag-grid-community/styles": "^28.2.1",
"@cloudinary/base": "^1.0.0-beta.4",
"@cloudinary/react": "^1.0.0-beta.8",
"@cyntler/react-doc-viewer": "^1.13.0",
"@date-io/date-fns": "^1.3.13",
"@faker-js/faker": "^6.3.1",
"@fortawesome/fontawesome-svg-core": "^6.2.0",
"@fortawesome/free-brands-svg-icons": "^6.3.0",
"@fortawesome/free-regular-svg-icons": "^6.2.0",
"@fortawesome/free-solid-svg-icons": "^6.2.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@fortune-sheet/react": "^0.18.3",
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.9.1",
"@popperjs/core": "^2.11.8",
"@react-pdf-viewer/core": "^2.4.2",
"@react-pdf-viewer/default-layout": "^2.4.2",
"@react-pdf-viewer/full-screen": "^2.4.2",
"@react-pdf-viewer/highlight": "^2.4.2",
"@react-pdf-viewer/open": "^2.4.2",
"@react-pdf-viewer/page-navigation": "^2.4.2",
"@react-pdf-viewer/print": "^2.4.2",
"@react-pdf-viewer/scroll-mode": "^2.4.2",
"@react-pdf-viewer/search": "^2.4.2",
"@react-pdf-viewer/toolbar": "^2.4.2",
"@react-pdf-viewer/zoom": "^2.4.2",
"@react-pdf/renderer": "^2.0.12",
"@sentry/react": "^6.13.3",
"@sentry/tracing": "^6.13.3",
"@syncfusion/ej2-base": "^28.2.9",
"@syncfusion/ej2-react-spreadsheet": "^28.2.11",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^13.2.1",
"@tinymce/tinymce-react": "^5.1.1",
"@uppy/aws-s3": "^2.0.7",
"@uppy/core": "^1.17.0",
"@uppy/dashboard": "^1.18.0",
"@uppy/drag-drop": "^1.4.31",
"@uppy/file-input": "^1.4.25",
"@uppy/progress-bar": "^1.3.30",
"@uppy/react": "^1.11.6",
"@uppy/webcam": "^1.8.9",
"africastalking-client": "^1.0.7",
"ag-grid-community": "^27.3.0",
"ag-grid-react": "^26.2.0",
"animate.css": "^3.7.2",
"antd": "^5.6.0",
"apexcharts": "^3.28.3",
"autoprefixer": "10.4.5",
"axios": "^0.21.1",
"babel-plugin-macros": "^3.1.0",
"bootstrap": "^4.6.0",
"buffer": "^6.0.3",
"caniuse-lite": "^1.0.30001589",
"chart.js": "^3.5.1",
"cloudinary": "^1.30.0",
"cloudinary-react": "^1.7.0",
"core-util-is": "^1.0.3",
"cra-append-sw": "^2.7.0",
"cron-parser": "^4.8.1",
"date-fns": "^2.28.0",
"dotenv": "^8.2.0",
"echarts": "^5.3.2",
"echarts-for-react": "^3.0.1",
"file-saver": "^2.0.5",
"firebase": "^9.23.0",
"font-awesome": "^4.7.0",
"google-map-react": "^2.1.10",
"html2pdf.js": "^0.10.2",
"i18next": "^21.8.5",
"i18next-browser-languagedetector": "^6.1.4",
"idb-keyval": "^6.0.2",
"install": "^0.13.0",
"jquery": "^3.6.0",
"jspdf": "^2.3.1",
"jspdf-autotable": "^3.5.14",
"material-table": "^1.63.0",
"mdbreact": "^4.6.1",
"moment": "^2.29.1",
"multiselect-react-dropdown": "^2.0.1",
"nodemailer": "^6.9.6",
"papaparse": "^5.3.2",
"pdfjs-dist": "^2.6.347",
"prop-types": "^15.7.2",
"quill": "^1.3.6",
"react": "^17.0.2",
"react-apexcharts": "^1.3.9",
"react-bootstrap": "^1.6.8",
"react-bootstrap-sweetalert": "^5.2.0",
"react-cron-generator": "^2.0.8",
"react-currency-format": "^1.0.0",
"react-data-grid": "^7.0.0-canary.49",
"react-datepicker": "^3.4.1",
"react-doc-viewer": "^0.1.5",
"react-dom": "^17.0.2",
"react-drag-drop-container": "^6.1.1",
"react-dropzone": "^14.2.10",
"react-feather": "^2.0.9",
"react-file-viewer": "^1.2.1",
"react-form-stepper": "^2.0.3",
"react-gauge-chart": "^0.4.1",
"react-hooks-paginator": "^0.5.0",
"react-icofont": "^1.0.19",
"react-icons": "^5.3.0",
"react-input-mask": "^2.0.4",
"react-js-cron": "^3.2.0",
"react-lightgallery": "^0.9.0",
"react-media": "^1.10.0",
"react-password-checklist": "^1.4.2",
"react-phone-input-2": "^2.14.0",
"react-popper": "^2.3.0",
"react-redux": "^7.1.3",
"react-refresh-webpack-plugin": "^0.1.0",
"react-router-dom": "^5.3.4",
"react-scripts": "^2.1.3",
"react-select": "^5.3.2",
"react-switch": "^7.0.0",
"react-text-mask": "^5.4.3",
"react-visibility-sensor": "^5.1.1",
"read-excel-file": "^5.2.8",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"sinon": "^13.0.2",
"text-mask-addons": "^3.8.0",
"web-vitals": "^1.0.1",
"workbox-background-sync": "^6.5.3",
"workbox-broadcast-update": "^6.5.3",
"workbox-cacheable-response": "^6.5.3",
"workbox-core": "^6.5.3",
"workbox-expiration": "^6.5.3",
"workbox-google-analytics": "^6.5.3",
"workbox-navigation-preload": "^6.5.3",
"workbox-precaching": "^6.5.3",
"workbox-range-requests": "^6.5.3",
"workbox-routing": "^6.5.3",
"workbox-strategies": "^6.5.3",
"workbox-streams": "^6.5.3",
"xlsx": "^0.17.1",
"xlsx-calc": "^0.9.2"
},
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "rm -rf build && mkdir build && set REACT_APP_HOST=https://app.rahisi.co&& react-scripts --openssl-legacy-provider build",
"dev-build": "rm -rf build && mkdir build && set REACT_APP_HOST=https://gcpdfa.rahisi.co/api2&& react-scripts --openssl-legacy-provider build",
"test": "react-scripts --openssl-legacy-provider test",
"eject": "react-scripts--openssl-legacy-provider eject",
"precypress:open": "yarn predev:cognito:ci",
"cypress:open": "cypress open",
"cypress:open:mobile": "cypress open --config viewportWidth=375,viewportHeight=667",
"cypress:run": "cypress run",
"cypress:run:mobile": "cypress run --config viewportWidth=375,viewportHeight=667",
"prepare": "husky install"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"eslintIgnore": [
"/public/custom-sw.js"
],
"browserslist": {
"production": [
">0.2%",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.19.3",
"@babel/eslint-parser": "^7.19.1",
"@cypress/react": "^5.12.4",
"@cypress/webpack-dev-server": "^1.8.4",
"@testing-library/cypress": "^8.0.0",
"@testing-library/user-event": "^13.2.1",
"babel-eslint": "^10.1.0",
"cypress": "^9.6.0",
"eslint": "^8.24.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^8.0.0",
"sass": "^1.55.0",
"webpack-dev-server": "^4.9.0"
}
}
here is my code snippet.
import React from 'react';
import './App.css';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
function CreateAppraisal() {
return (
<div style={{ margin: '20px' }}>
<SpreadsheetComponent />
</div>
);
}
export default CreateAppraisal;
App.css.
@import url("https://cdn.syncfusion.com/ej2/28.2.11/material.css");
SIGN IN To post a reply.
1 Reply
Hi Peter Njuguna,
We have reviewed your reported issue regarding the default spreadsheet not rendering in React version 17.0.2. To investigate, we created a local sample using React version 17.0.2, and it rendered without any issues.
For your convenience, we have attached the prepared local sample and a video demonstration below for your reference.
Sample: Please find the attachment below.
Video Demonstration: Please find the attachment below.
Output:
UG Link: https://ej2.syncfusion.com/react/documentation/spreadsheet/getting-started#run-the-application
Kindly check the above details, and if you are still encountering the issue on your end, please share the following information to help us validate the issue further and provide a more efficient solution:
- A detailed description of the issue, along with a video demonstration.
- If any custom styles you are using beyond those mentioned. Please share those details too.
- Kindly share the relevant code snippets, especially if you are rendering the spreadsheet based on conditional rendering.
Please let me know if have any concerns.
Regards,
Dinakar M
Attachment: sample__701680_44e60df8.zip
SIGN IN To post a reply.
