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:
Questions tagged [react-virtualized]
525 questions
0
votes
1 answer
What is the most efficient way (in both loading time & bandwidth) to load a feed of images?
I'm implementing a scroll feed of images, each "row" displays only one image, same as the feed of Instagram.
I'm using React & Firebase to implement it, and I'm trying to figure out - what is the best way to implement it?
Paging? infinite scroll?…
losi lis
- 1
0
votes
1 answer
React-Virtualized: How can I insert/remove a row without re-rendering the rows beneath it?
I have a virtualized list of expensive Components. Occasionally, the list will mutate but it will force a re-render of the rows that have shifted either up or down one position.
For example, if there are 5 visible rows and I insert a new row at…
oppositeday
- 113
- 1
- 5
0
votes
2 answers
react-virtualized: how to use a separate rowRenderer for height measurement
I'm trying to display large text documents with complex markups using the react-virtualized List component. The document is broken up into chunks of text of varying lengths shorter than some maximum. The List component renders each of these chunks…
jives
- 5
- 1
- 3
0
votes
1 answer
scroll to first element using List and AutoSizer doesn't work
I wanted to scroll back up to the first element in the List when a user clicks pagination buttons.
So far I come across scrollToRow and scrollToIndex and both of them didn't work.
Here's my current code:
{({ height }) => (
…
Omar Dulaimi
- 846
- 10
- 30
0
votes
1 answer
React-virtualized list running below 60fps. How to optimize?
I am trying to create a post feed like the one instagram has (on the main page).
I'm using Infinite-loader for fetching, Window-scroller for using the window as the scroll, auto-sizer for sizing the list how i want and CellMeasurer for measuring the…
Нова Пейка Истинска
- 63
- 5
0
votes
1 answer
How can I render two list with dynamic height items using DOM recycling libraries such as 'react-window' or 'react-vizualaized'
I have a custom infinite scroll list of Unsplash images, each item has a dynamic height. I want to use two lists under one outerElementType to keep the shuffled layout, how can I achieve it using react-window or react-vizualaized libraries. I…
Beso Kakulia
- 556
- 4
- 13
0
votes
0 answers
Normalizr + react-virtualized: How to use normalized data objects in react-virtualized?
normalizr returns normalized data objects. How to use these normalized data object in react-virtualized?
react-virtualized - https://github.com/bvaughn/react-virtualized
normalizr - https://github.com/paularmstrong/normalizr
Rajesh
- 17
- 6
0
votes
1 answer
virtualized list with reactjs
Recently I came across reat-window library, it is great and handy. This make me think how it is built, so i decided to give it a try and build my own virtualized list
However the list can only scroll to item "60". Wondering what is wrong with my…
Xiaomin Wu
- 3,621
- 1
- 15
- 14
0
votes
0 answers
How to collapsed child item from list item in React Virtualized
I have some huge list and rendering using React Virtualized, but i am getting stuck. In the list item there is any child and parent item. so the child will be hiding before clicked the parent to collapsed the child.
Expectation:
Render all parent…
Darmawan Z.
- 411
- 8
- 20
0
votes
2 answers
Syntax High order components - Autosizer
As far as I understand and, following the documentation, a HOC is a function that takes a component and returns a new component. An example of that is the function connect from react-redux:
connect(mapStateToProps,…
fjplaurr
- 1,818
- 3
- 19
- 36
0
votes
0 answers
react-virtualized supports Relative Lengths
React-virtualized is really a nice library. Just wondering whether it supports relative lengths in height/width property. Most of its examples are using just number pixels.
ReactDOM.render(
