React-data-grid: Extremely slow over 50 columns editable

[joe-vh]

HAVE YOU ALREADY SEARCHED FOR SIMILAR ISSUES? PLEASE HELP US OUT AND DOUBLE-CHECK FIRST!

ALSO, PLEASE DON'T BE THAT PERSON WHO DELETES THIS TEMPLATE. IT'S HERE FOR A REASON.

THANKS!

WHICH VERSION OF REACT ARE YOU USING?

Officially Supported:
[x] v0.14.x

Community Supported:
[ ] v15.0.x

WHICH BROWSER ARE YOU USING?

Officially Supported:
[ ] IE 9 / IE 10 / IE 11
[ ] Edge
[x] Chrome

Should work:
[ ] Firefox
[ ] Safari

---

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

I am using this with redux/seamless-immutable and it is unbearably slow with a large amount of columns. Is there any way I can improve the performance? It is extremely slow to load, to resize, and to propagate edits. There should be a warning about the limitations of the grid as it is not ready for use on a commercial project. Any help would be greatly appreciated.

[csvan]

How is performance if you disable editable?

[cfblaeb]

I have the same issue and disabling editable did not seem to make a big difference.

[SirGandal]

Stumbled on the same issue today. I created a bare bones example starting from the One Million Rows example here. The example uses 50 columns and 250 rows but even with 25 columns performance suffer.

[charleyw]

I have the same problem, we need support up to 200 columns, but i found when increase to 20 columns, the scroll will be very laggy

[qili26]

it has nothing to do with editors. With those more columns and rows, it means more cells will be rendered in the view, which will result in js / dom manipulation bottleneck. I think you can try to reduce the number of cells in View in your RDG wrapper, but I don't see any better design to handle this yet inside RDG.

if you try this in Firefox and IE Edge, you will see blank for a short time, and then the grid will render.
if you try this in IE <=11, you will find it stuck.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[revelict]

Hi, I render 40 rows x 16 columns, each cell was empty so it was pure RDG components, and its was very laggy when vertical scrolling, even when 10 columns are not displayed (rest is hidden, overflow-x:hidden). On slower computer the grid is no usable. Is any solution exist to fix this problem? or RDG can by used to render max 7 columns?
I think it not related with number of rows because only visible are rendered, and all columns are always visible. And i see a lot of calculations are made during scrolling:(

[gibo]

This isn't down to editable columns, the laggy issue still occurs even with a basic data grid with 15 - 20 + columns.

[America-first-melon]

I have the same problem, we need support up to 200 columns, but i found when increase to 20 columns, the scroll will be very laggy

Then this plugin can solve ?

[charleyw]

I have the same problem, we need support up to 200 columns, but i found when increase to 20 columns, the scroll will be very laggy

Then this plugin can solve ?

It's the problem this plugin have. No sure is there any improvement.

[gibo]

This grid is great for features and ease of use - but not the best for performance.