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

How to render whole Grid in DOM if I need in react-virtualized?

I am building a React application, I have multiple Grid components, combined with ScrollSync, like this: ... ... It looks something like this: They are scrolling correctly, one is following…
Tinmar
  • 370
  • 4
  • 23
3
votes
1 answer

Add padding-top in react-virtualized

I have a component where I want to add an initial padding-top to the wrapper. Since all the elements are absolute positioned I found this solution but I wonder if it's right or is there another solution less expensive: const rowRenderer =…
Lionel T
  • 1,559
  • 1
  • 13
  • 30
3
votes
1 answer

Using collapsible panels within react-virtualized List

I've managed to render a react-virtulized List to which I passed an array of react-bootstrap Panels. I've measured each of my rows, and via children callback, each time one of the child panels are clicked, an attribute in the parent state is…
Ramiro Rivera
  • 33
  • 4
3
votes
3 answers

React virtualized - Padding bottom on List

I was wondering if there is any way to add a padding bottom at the end of the list. I need this because I have a material floating button over the list, at the bottom. So if the user goes to the end of the list, that padding will save the last item…
Ayoze Barrera
  • 126
  • 2
  • 9
3
votes
1 answer

react-virtualized and react-custom-scrollbars integration

I am trying to integrate a custom scrollbar (using react-custom-scrollbars: https://github.com/malte-wessel/react-custom-scrollbars) for a Grid component (using react-virtualized). I have tried to follow instruction from this github issue…
make2514
  • 43
  • 1
  • 7
3
votes
1 answer

React Virtualized - how to scroll to div within row with dynamic height

I'm using RV List to load a large document with custom formatting. It has worked like a charm, but I am running into the following 2 issues: I currently set up a list within a cellmeasurer based on this to calculate the dynamic heights of rows…
akraines
  • 1,965
  • 2
  • 12
  • 27
3
votes
1 answer

React Virtualized - Changing the height of a List Row post render

I'm using a List inside and AutoSizer with a dynamic height using a function for rowHeight. The row in my use case needs to render with ellipsis and expand upon clicking on it. I'm wondering how to go about dynamically setting the rowHeight once the…
Anshuul Kai
  • 3,876
  • 2
  • 27
  • 48
3
votes
1 answer

How to render a List / Grid row as if it were sticky?

I've got a component making use of react-virtualized's List for its virtualized scrolling, where each row is either a category header, or actual content belonging to that category. So something like: Fruits - Strawberry - Blueberry - Mango -…
wisew
  • 2,672
  • 3
  • 23
  • 30
3
votes
1 answer

how to scroll to index in deeply hierarchical list in react-virtualized

The List component of react-virtualized offers a property scrollToIndex to enable scrolling to a list item that is currently not visible. The official tree example builds a hierarchical list with hierarchically stacked ul elements - just as…
Alex
  • 2,117
  • 5
  • 28
  • 36
3
votes
2 answers

VirtualScroll rowRenderer method is called many times while scrolling

I have a react-virtualized's infinite scroll list, (Most of the setup is copied from this example). I'm providing it with a rowRenderer function like the specs requires. this works fine if the rowRenderer function is very lightweight (i.e returns a…
YakirNa
  • 519
  • 1
  • 5
  • 15
2
votes
2 answers

react-window spacing between items list

I am trying to integrate react-window with react-window-infinite-loader and so far, I have been successful, but facing an issue where I couldn't find a way to style my list item to create more spacing between the list item. Here is my code…
Naruto
  • 53
  • 8
2
votes
0 answers

Scroll jumps to the top when List data gets updated

My use case is that I am using List component of react-virtualised for building a log container to render the logs in the reverse order. Working We fetches the logs in batches. Initially we are fetching the last batch of the log and rendered on the…
Abhijeet Mishra
  • 21
  • 1
2
votes
1 answer

react-virtualized - Is there a way to add hover style on rows of the Table

When we user hovers on the row, the background color of the respective row should change to #e7e7e7. Tried to add row effect through JSS, but this allows to have row effect on the cells instead of rows. JSS approach I tried to add hover effect…
Sourabh Kumar Sinha
  • 23
  • 4
2
votes
1 answer

searchable dropdown in react

I have below list in react.