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:

458 questions
22
votes
2 answers

Dynamic row heights with react-virtualized and new CellMeasurer

I'm using react-virualized 9 with Autosizer, List, and CellMeasurer components. I need to update the row heights when the list data has changed. It appears that since the changes to support React Fiber in version 9 the only public method for…
ibrin
  • 223
  • 1
  • 2
  • 5
20
votes
2 answers

How to calculate text height without rendering anything to the DOM?

I'm leveraging a virtualized list (react-virtualized) where the heights of my list items are required and could vary greatly. Due to large variations, any height estimation I give the library yields a poor experience. The usual method for height…
David
  • 6,021
  • 8
  • 39
  • 85
15
votes
1 answer

React Virtualized - Nested WindowScroller/List

I'm trying to used react-virtualized to render a table with 1000+ rows of data. The rows are very heavy containing multiple complex React components. input, combobox, date selector and popup menus all in one single row. I need the entire window to…
jerpsu15
  • 161
  • 2
  • 5
15
votes
1 answer

React-virtualized, List is Flickkering/lagging when scrolling

I am experiencing some problem when i scroll through my list. Also notice the huge space at the bottom. See video : https://vimeo.com/215349521 As far as i can see, im not making any huge mistakes. But i do belive the problem is due to the…
Aleksander Aleksic
  • 919
  • 1
  • 9
  • 16
15
votes
1 answer

How to wrap material-ui ListItem in react-virtualized autosizer

I was using material-ui's List and ListItem components. Specifically, I was using the nested items functionality. See http://www.material-ui.com/#/components/list around half way down the page you'll see Nested List. The point is: material-ui takes…
user1486016
  • 233
  • 2
  • 6
15
votes
3 answers

React Virtualized - onclick, expand Rows for additional details

I have a requirement to open/close additional row details. Has anyone implemented or have ideas on how to go about implementing expand/collapse feature for each row?
Q-Ball
  • 312
  • 1
  • 3
  • 9
14
votes
2 answers

React-Virtualized Autosizer calculates height as 0 for VirtualScroll

Where AutoSizer's width gives me an appropriate value, I'm consistently getting an Autosizer height of 0, which causes the VirtualScroll component not to display. However, if i use the disableHeight prop and provide VirtualScroll with a fixed value…
JWayne
  • 151
  • 1
  • 1
  • 8
13
votes
1 answer

How is possible to combine InfiniteLoader with WindowScroller?

How can I create an infinite scroll list but in a window scroller? (the same as Facebook timeline - Mock up)? Below is the code that I have tried, but it does not work as expected. It only displays the first items and after that it does not display…
Constantin Huleva
  • 133
  • 1
  • 7
12
votes
1 answer

React Virtualized Table - performance issues with input element in ~8 columns table

I'm trying to create a 8-column table, each column contains element. For some reason, I experience a delay in the on change event of the text input. Reducing the number of columns to below 4 makes the experience better. It could make some…
Asaf
  • 2,088
  • 2
  • 21
  • 39
11
votes
4 answers

JS grid performance comparison

I was using angular-ui-grid (http://ui-grid.info/) to display tabular data. On the whole, it was quite slow and so we decided to use ag-grid (https://www.ag-grid.com/). This was much more performant and better to deal with for regular-sized…
David542
  • 96,524
  • 132
  • 375
  • 637
9
votes
2 answers

How to set up dynamic row height in react-virtualized List?

I have gone through many answers on StackOverflow. I have also gone through List document here, react-virtualized/List. But, still I am not able to understand how to dynamically set row height in react-virtualized List. How to calculate the height…
krishnaxv
  • 928
  • 1
  • 6
  • 16
9
votes
3 answers

Does react-virtualized work with airbnb/enzyme?

Is it possible to use react-virtualized and enzyme together? When I try to use them together I seem to get an empty list of items in the grid.
camwest
  • 323
  • 1
  • 3
  • 6
8
votes
2 answers

React Virtualized - Table Example - How do I make it work?

I've been struggling to make this react virtualized table example work & seriously starting to doubt my sanity. I've created a react app and I'm just trying to render the example table inside App.js with this: class App extends Component { …
Trev14
  • 2,516
  • 2
  • 22
  • 31
8
votes
1 answer

InfiniteLoader and react-redux

Component InfiniteLoader from react-virtualised requires function passed as property loadMoreRows to have signature like { startIndex: number, stopIndex: number }): Promise. I'm using redux in my project, so loadMoreRows is a redux action creator…
eyeinthebrick
  • 508
  • 1
  • 3
  • 18
7
votes
1 answer

Measuring the height of text according to CSS rules – _without a browser rendering_ – for use with a virtualized list, to specify heights in advance

I've been implementing a chat client in Electron (Chrome) and React. Our top priority is speed. It behooves us, then, to use a virtualized list component (also known as "buffered render" or "window render"). We've explored react-virtualized,…
Zack Burt
  • 7,308
  • 8
  • 50
  • 80
1
2 3
…
30 31