Stack Overflow
Stack Overflow

Questions tagged [react-virtualized]

React components for efficiently rendering large lists and tabular data

React Virtualized helps to efficiently render large lists and tabular data by only rendering items that are visible.

Useful links:

525 questions
0
votes
1 answer

React-virtualized Cellmeasurer defaulting to 'minHeight' of the CellMeasurerCache

I'm using a react-virtualized List component, which uses height data from CellMeasurerCache: const cache = new CellMeasurerCache({fixedWidth: true, rowHeight: 150, minHeight: 50 }); This is the code for the list: return (
user17299932
  • 1
  • 2
0
votes
1 answer

React virtualized doesn't work with auto sizer and infinite loader

I'd like to virtualize a large list in my react application and use react-virtualized-auto-sizer and react-window-infinite-loader packages. Below is how I did it. import { FixedSizeList as List } from 'react-window' import InfiniteLoader from…
Tu Le Thanh
  • 542
  • 1
  • 6
  • 18
0
votes
1 answer

react-window-infinite-loader prefetching extra data

I am not sure why this is happening but the InfiniteLoader makes calls to fetch items twice(one for items from 0-8 and then from 8-16) when I am just loading the page and not scrolling at all. Also, even if I scroll only a couple of rows after 16…
Aakash Verma
  • 3,705
  • 5
  • 29
  • 66
0
votes
1 answer

onSectionRendered in react-window

In react-virtualized, there is a prop called "onSectionRendered" to define a function which will be called after cells have been rendered. What way is there to achieve this with react-window?
user3601578
  • 1,310
  • 1
  • 18
  • 29
0
votes
0 answers

React virtualized infiniteLoader scrolling to top on load using List

I am currently using react-virtualized InfiniteLoader component to scroll over a List of elements that could be variable all the time. This is my component now:
Levi D.
  • 176
  • 8
0
votes
0 answers

At what point does it make sense to start using virtualization to render data?

I'm using React to build a simple website and I often hear people say that they use virtualization to render lists of items (eg. products on a retail website). When I ask them why they use it they say that they can more efficiently render large…
PlsWork
  • 1,958
  • 1
  • 19
  • 31
0
votes
1 answer

React virtualized list keep scroll position on window resize

I have a list of contacts. If the user scrolled down to "Simon" and then resized the window, the scroll position jumps to the top (equal to 0) and i want it to stay at the same position. I tryied saving the scroll position to the state using…
YTG
  • 956
  • 2
  • 6
  • 19
0
votes
2 answers

React Virtualized List - How do you use the measureAllRows method on a List?

I'm trying to render my list of data using the WindowScroller and List from react-virtualized, but for some reason, only a portion of my data is rendering. I've read over the docs and I believe I have all the necessary props...help is…
user2387766
0
votes
1 answer

Clear cache of react-window list that is used with react-window-infinite-loader on resize of browser window

I am using VariableSizedList along with the InfiniteLoader and AutoSizer in the following manner {({ width, height }) => (
Saurav Seth
  • 301
  • 3
  • 9
0
votes
0 answers

Why is SectionList ref.current always undefined?

I am trying to use the scrollToOffset and scrollToIndex that SectionList provides. However, the SectionList ref I am using is always undefined when using ref.current. In my class component I have the following: private sectionListRef:…
pfinferno
  • 1,779
  • 3
  • 34
  • 62
0
votes
1 answer

How to implement Portal for a dropdown that isn't clipped inside react-virtualized

Thanks for taking a look at my question. The answer to this question by @bvaughn creator of react virtualized suggests that you can you can use a portal to create a dropdown inside a virtualized list that can overflow its row without getting…
Benjamin Lee
  • 1,014
  • 10
  • 24
0
votes
1 answer

React Virtualized Lists padded list items

I'm trying have list items that have padding horizontally so that the scrollbar sits perfectly on the furthest right of the container. I've come with 3 less than ideal solutions, is there any other way to do…
daee kang
  • 285
  • 1
  • 3
  • 9
0
votes
3 answers

How to scroll to React element which is rendered via react-virtualized?

I am using react-virtualized to prevent items in a long list being loaded when out of view port. However, I have a button at the top of the page that when clicked, scrollsTo an item that is rendered with react-virtualized. It uses React.createRef()…
Stretch0
  • 8,362
  • 13
  • 71
  • 133
0
votes
4 answers

React window how to iterate your data?

import { FixedSizeList as List } from 'react-window' import AutoSizer from 'react-virtualized-auto-sizer' const TrackTable = ({ tracks }) => { const Row = ({ index, style }) => (
angry kiwi
  • 10,730
  • 26
  • 115
  • 161
0
votes
1 answer

when does react apply change on real dom?

As we know react works on virtual Dom, not real Dom. When state or props changed،،،،، this change is in the virtual Dom. Can we consider when the call setstate() method this change applies on the real Dom?
Mohammad Eslahi
  • 7
  • 4
1 2 3
…
34 35