`VariableSizeGrid` does not respond to `columnWidth` prop changes
See original GitHub issueI have a need for VariableSizeGrid
to update cell styles when I change the columnWidth
function (there’s a chance this also affects rowHeight
, but I have not explored that yet). Right now, the width remains the same despite props changing because of https://github.com/bvaughn/react-window/blob/d80bef25fe706d0c73fc801674c086f681811190/src/VariableSizeGrid.js#L484
I have a codesandbox demonstrating the issue here: https://codesandbox.io/s/sweet-ellis-0ot7p
So far, my workaround is to add a key
to VariableSizeGrid
and make the key
change with the props that affect columnWidth
to force an update.
Issue Analytics
- State:
- Created 3 years ago
- Comments:7
Top Results From Across the Web
React - Update 2d array in local state without ...
I am using the VariableSizeGrid of react-window to display a grid. ... That part does not seem to work well on CodeSandbox, but...
Read more >How to virtualize large lists using react-window
Here's how React Window's virtualization can efficiently display large data sets to meet your DOM performance targets.
Read more >React Data Grid: Column Sizing
The first column is fixed width (i.e. suppressSizeToFit = true ), which means its size does not change when sizeColumnsToFit is called. The...
Read more >Virtualizing Large Data Lists with react-window
VariableSizeGrid — This component is as FixedSizeGrid , with additional props: columnWidth & rowHeight which accepts functions as their prop ...
Read more >Virtual Scrolling and How It Can Enhance Your React ...
Required props include columnCount, columnWidth, rowCount, rowWidth, height & width. VariableSizeGrid — same as FixedSizeGrid, with the ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
A colleague and I have found another workaround that makes use of the
resetAfter*
methods. Here’s a sandbox with a solution for Grids: https://codesandbox.io/s/laughing-noyce-sigw9?file=/src/App.jsThe gist is you track the props that will change the item’s size, and force a reset of the cache based on those props. You can put that into a hook that returns a ref, such as I have in the sandbox above.
I still think that it’s odd that I have to be responsible for forcing a cache update on something that seems like it should bust the cache by default. I’m not sure whether this issue should remain open based on the facts that:
resetAfter*
methods are the intended work aroundI’d think the cache should bust when the itemData prop changes.