search

glideapps / glide-data-grid

🚀 Glide Data Grid is a no compromise, outrageously react fast data grid with rich rendering, first class accessibility, and full TypeScript support.
https://grid.glideapps.com
MIT License
4.07k stars 301 forks source link

Getting blank view while rendering more than 480 rows #944

Closed samya-ak closed 5 months ago

samya-ak commented 7 months ago

Issue:

I'm getting blank view in firefox when trying to render more than 480 rows. Chrome seems to be able to render around 965 rows.

image

Cells are editable though.

Screenshot 2024-04-15 at 9 11 59 PM

Error in Firefox:

[Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: ".../node_modules/@glideapps/glide-data-grid/dist/cjs/internal/data-grid/render/data-grid-render.js :: drawGrid :: line 131" data: no]

Code Sandbox:

https://codesandbox.io/p/sandbox/xenodochial-rubin-mwj46c?file=%2Fsrc%2FGlide.tsx%3A101%2C35

Node version: 20.12.1 React version: 18.2.0 Glide data grid version: 6.0.3

I'm trying to render thousands of rows from an excel file. I've tried using the hook useAsyncData from here. But, I'm getting the blank view when number of rows cross said threshold.

I would appreciate if someone could point out the right way to render huge number of rows.

Thanks!

JYeeRen commented 5 months ago

I tested your code and I suspect that it's because the canvas is too large, which caused issues. After setting a height, it worked normally <DataEditor height={500} ... />. Alternatively, <DataEditor height={window.innerHeight} ... /> also works. Additionally, I think that when the table height exceeds the screen height, the excess part doesn't make sense, as it can't be seen outside of the screen anyway.

A canvas with a height of 44,000px（1000x44） may be too large for the browser.