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
4
votes
1 answer

How to use a select dropdown in a virtualized list?

Im currently developing a react app which has a virtualized list (https://github.com/bvaughn/react-virtualized) in it. The items in the list may contain a select dropdown. The problem now: The virtualized list is hiding overflow. So the last items…
Marc Wissler
  • 134
  • 1
  • 8
4
votes
1 answer

How to use public method updatePosition of react-virtualized?

The docs: https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md#updateposition But I checkout the source: https://github.com/bvaughn/react-virtualized/blob/master/source/WindowScroller/WindowScroller.js It's not a public…
niko gu
  • 43
  • 3
4
votes
1 answer

How to make a list/grid with a responsive number of columns using react-virtualized?

I have a "card" component which presents data for an object in a set way. These card components have a pre-defined width and height. These card components will be presented in a list, and I would like that list to make use of the horizontal space…
user310988
4
votes
0 answers

Infinite Scroll with table - React Virtualized

I have been trying to implement Infinite scrolling with lists and table with react-virtualized. I implemented an Infinite Scrolling which is very similar to this example. loadMoreRows _loadMoreRows ({ startIndex, stopIndex }) { if(!completed){ …
user2193672
  • 217
  • 3
  • 16
4
votes
1 answer

How do I tell the Masonry component that its cells have changed their height?

I have a react component that displays a one-dimensional list of items in a grid pattern. Every item has the same width and height, and they are located within three columns. There can be a lot of these, so I decided to give react-virtualized a…
Martin Denk
  • 554
  • 3
  • 14
4
votes
0 answers

How to make a fixed (sticky) header, fixed column, sortable table in react-virtualized

I'm basically looking to do this with react-virtualized Table: https://bvaughn.github.io/react-virtualized/?component=ScrollSync#/components/ScrollSync That demo is perfect but it uses a List + Grid which aren't sortable. The table demo has fixed…
sontek
  • 12,111
  • 12
  • 49
  • 61
3
votes
1 answer

InfiniteLoader jumps when scrolling up after loadMoreRows completes

I have a react-virtualised InfiniteLoader consisting of single rows. The main issue I believe, is that each cell can vary in height and have to load in different images for each so the height is not static and changes as the images load in. But I am…
mcclosa
  • 943
  • 7
  • 29
  • 59
3
votes
3 answers

Prevent rerender flatlist React Native

I have custom created calendar using Flatlist. In the parent component I have a state with starting date and ending date and Press handler function to update state when user presses on the date. The problem is every time when I press the date render…
Exoriri
  • 327
  • 3
  • 21
3
votes
1 answer

How to make responsive image grid using react-virtualize

I am trying to render the responsive image grid, which might have images of different sizes. It sounds like the Masonry component is good fit for this case, but not sure that I am able to use this example in my application? It looks fully coupled to…
nowiko
  • 2,507
  • 6
  • 38
  • 82
3
votes
0 answers

react-virtualized table row width will not change on resizing window

When i resize window, header resizes too but rows keep same width unless i scroll. Is there a way to resize rows immediatelly after window changes size ? {({ height, width }) => (
marek
  • 39
  • 4
3
votes
0 answers

React Virtualized Multigrid performance issues

I am trying to make a nice Result View for looking at results from an SQL query. These results might contain thousands of results so React Virtualized was chosen to avoid rendering all the rows. The MultiGrid component was chosen so that the column…
Tobias Ingebrigt Ørstad
  • 127
  • 7
3
votes
1 answer

How to show the index the user is currently with react-window List + Infinte Loader

I came to this problem when I wanted to show my user at which point he/she was on the list when they were scrolling. In short, I wanted to have a counter indicating the current index of the visible Row. This can be achieved with…
GeorgeCodeHub
  • 131
  • 1
  • 10
3
votes
1 answer

React Virtualized - Screen going blank after scrolling a long list of itsm

I'm working on a long list of items. For that I'm using react-virtualized (https://github.com/bvaughn/react-virtualized). But I'm facing the below issue. When I try scrolling to the bottom for 2 seconds, it's blank then data is loading. It's not…
Lucifer
  • 1,069
  • 4
  • 16
  • 26
3
votes
0 answers

Custom scroll element in react-window

I would like to create virtualized list. I have 100 000 items, but only e. g. 20 items (depends on window height) will be rendered. When user scrolls, no new items will be added, it only changes the props to those that are off the screen. So user…
Michal
  • 1,755
  • 3
  • 21
  • 53
3
votes
1 answer

How to click unrendered virtualized element in TestCafe

I'm using react-virtualized for a lengthy (1000+) list of items to select from. And I'm trying to set up an end to end test that requires clicking on one of the elements that are not currently rendered. Ordinarily, I'd simply use something…
ArrayKnight
  • 6,956
  • 4
  • 17
  • 20
1 2 3
…
34 35