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
24
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
  • 243
  • 1
  • 2
  • 5
24
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
  • 1,282
  • 3
  • 12
  • 18
23
votes
7 answers

How to remove Clear button on Autocomplete and show only text

I'm new to react-virtualization and Autocomplete. I have currently build a list which shows multiple texts when the checkbox is selected. Here is my code: https://codesandbox.io/s/material-demo-forked-1qzd3?file=/demo.tsx I want to show only one…
iCodeByte
  • 571
  • 1
  • 7
  • 21
22
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
  • 7,028
  • 10
  • 48
  • 95
18
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,158
  • 2
  • 25
  • 40
17
votes
3 answers

Infinite loading with react-table + react-virtualized / react-window

I have the following requirements to my table: Table should have fixed header It needs to autosize: for infinite scroll to work the first fetch should get sufficient amount of data for scroll to appear at all. table body should work as infinite…
Alex Tarasenko
  • 719
  • 6
  • 9
17
votes
2 answers

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
  • 341
  • 4
  • 5
17
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
  • 181
  • 1
  • 1
  • 8
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
2 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
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
  • 132
  • 1
  • 8
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
  • 104,438
  • 178
  • 489
  • 842
11
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
  • 956
  • 2
  • 6
  • 18
9
votes
2 answers

When using React-Virtualized AutoSizer, children not being rendered in test

I have a component which uses react-virtualized AutoSizer, and inside this component there is a react-virtualized List. The way it is rendered is: {({width, height}) => ( (this.refVirtualizedList = ref)} …
Lucas Bernalte
  • 1,179
  • 11
  • 17
9
votes
1 answer

How to use CellMeasurer in react-virtualized Table?

I use react-virtualized Table to render a table with many rows. I don't want my long text to be trimmed due to the fixed column width, so I want to use CellMeasurer to measure the width dynamically. This is an example using Grid. It works…
Yixing Liu
  • 2,179
  • 1
  • 20
  • 36
1
2 3
…
34 35