this.cache = new CellMeasurerCache({
fixedWidth: true,
defaultHeight: 100
});
fixedWidth: true,
defaultHeight: 100
});
CellMeasurerCache {_cellHeightCache: {…}, _cellWidthCache: {…}, _columnWidthCache: {…}, _rowHeightCache: {…}, _columnCount: 0, …}
columnWidth: ƒ (_ref)
rowHeight: ƒ (_ref2)
_cellHeightCache: {0-0: 120, 1-0: 69, 2-0: 69, 3-0: 120, 4-0: 69, …}
_cellWidthCache: {0-0: 660, 1-0: 660, 2-0: 660, 3-0: 660, 4-0: 660, …}
_columnCount: 1
_columnWidthCache: {}
_defaultHeight: 100
_defaultWidth: 100
_hasFixedHeight: false
_hasFixedWidth: true
_keyMapper: ƒ defaultKeyMapper(rowIndex, columnIndex)
_minHeight: 0
_minWidth: 0
_rowCount: 7
_rowHeightCache: {0-0: 120, 1-0: 69, 2-0: 69, 3-0: 120, 4-0: 69, …}
defaultHeight: (...)
defaultWidth: (...)
proto: Object
columnWidth: ƒ (_ref)
rowHeight: ƒ (_ref2)
_cellHeightCache: {0-0: 120, 1-0: 69, 2-0: 69, 3-0: 120, 4-0: 69, …}
_cellWidthCache: {0-0: 660, 1-0: 660, 2-0: 660, 3-0: 660, 4-0: 660, …}
_columnCount: 1
_columnWidthCache: {}
_defaultHeight: 100
_defaultWidth: 100
_hasFixedHeight: false
_hasFixedWidth: true
_keyMapper: ƒ defaultKeyMapper(rowIndex, columnIndex)
_minHeight: 0
_minWidth: 0
_rowCount: 7
_rowHeightCache: {0-0: 120, 1-0: 69, 2-0: 69, 3-0: 120, 4-0: 69, …}
defaultHeight: (...)
defaultWidth: (...)
proto: Object
I've got a MultiGrid that needs to be updated when the component is updated.
Calling cellMeasurerCache.clearAll() and gridRef.current.forceUpdateGrids() in shouldComponentUpdate works.
Doing the same in componentDidUpdate does not. I don't shouldComponentUpdate to have side effects - any ideas why it doesn't work from componentDidUpdate? @bvaughn
Could it be because shouldComponentUpdated is happening before render is called, while componentDidUpdate happens afterwards?
Should my CellMeasurerCache be part of the components state?
Can someone help me with this: https://stackoverflow.com/questions/58446144/react-virtualized-returns-incorrect-scrolltop-when-new-items-are-added
Can someone take a look at my react-virtualized layout, I'm sure it's designed improperly because cell heights are not being measured properly.
I am brand new to React.js (this is my first project in React) so some of the bad design is attributable to that
I pass measure into the ChatHistoryCell, which passes it into the sub various components who inevitably call it upon componentDidMount
I have basically three major bugs with this.
1) I want it to scroll to the bottom immediately after it loads the first time. Not sure how to do this?
2) The computed row heights are often dramatically wrong
3) If I resize the width of the window , and then I call these methods:
selectedConversation.cellMeasurerCache.clearAll();
selectedConversation.cellMeasurer.resetMeasurements();
selectedConversation.listRef.recomputeRowHeights();
selectedConversation.listRef.forceUpdateGrid();after the resizing, it looks bad. but then if i scroll out of view, and then back in view, it looks nice and adjusted to the new width
Praying for some help 🙏
Question: I am using cell measure cache to render a dynamic list. This all works. The problem that I have at the moment is that there is an interaction on the list item, which expands the item. This in affect should move the items down. How do I trigger this kind of action?
I am trying to use an AutoResizer on a Grid, where the column count is tied to the length of a MobX array variable. Without AutoResizer (hardcoded width), my grid properly rerenders with more columns when the MobX array length is increased. However, with AutoResizer, the width is not recalculated. Any guidance would be greatly appreciated!
Update: Fixed by setting columnCount in the <AutoSizer /> component.
AutoSizer columnCount={store.dates.length}>
{({ columnCount, width }) => (
<Grid cellRenderer={cellRenderer} columnCount={store.dates.length} ..... )} </AutoSizer>
AutoSizer columnCount={store.dates.length}>
{({ columnCount, width }) => (
<Grid cellRenderer={cellRenderer} columnCount={store.dates.length} ..... )} </AutoSizer>
Hello guys thanks for the awesome work, i am using virtualized list with autosizer and window scroller, the only issue i am facing is that the scroll position is changed whenever i am changing the page, any suggestion how i can persist the scroll position when i navigate the page?
Hi everybody, I just wanted to say hello and what I am working on. I came across react-virtualized as it seems like the best choice for navigating large sets of tabular data, but of course Im being asked to do things with it that it might not have been designed for, like smoothly animate row heights on multi-grid tables and drag and drop columns. If anyone has experience with either of these feel free to hit me up. I've had some moderate success with the animation of row heights using requestAnimationFrame, but it's still a little choppy and a work in progress.
if anyone has a solution for https://stackoverflow.com/questions/67257590/infinite-scroll-keeps-calling-instead-of-when-scrolled-to-bottom
that would be great
i want to hover the row and highlight it
WindwoScroller -> AutoSizer -> List -> Cellmeasurer
anyone have solution to fix this mismatch rows please?
it happens when scrollbar stay at bottom of right grid