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
6
votes
2 answers
How to render custom header in react-virtualized Table
In docs - headerRowRenderer, but can anyone share simple example with some custom header markup, for example with custom title attr + all 'default' virtualized features, like sortable...
Max P
- 1,439
- 3
- 15
- 33
6
votes
1 answer
What's the right way to reset / initialize InfiniteLoader
I'm trying to use InfiniteLoader from the react-virtualize library to show up a scrollable list that has a textSearch input field on top (used to filter list entries).
The code I use is very close to the InfiniteLoader Sample Code.
The list is…
PeteMeier
- 521
- 1
- 6
- 18
6
votes
1 answer
What is react-virtualized is all about? How its different from normal react.js?
how react-virtualized in different than normal reactJs. Can anyone please explain me with an example ?
Thanks in advance.
Abhipsa Mishra
- 73
- 1
- 5
6
votes
0 answers
react-virtualized Table dynamic column width with CellMeasurer
Can i implement somehow functionality of CellMeasurer to react-virtualized Table component?
I want to have dynamic column width.
crowmw
- 248
- 3
- 14
6
votes
0 answers
What are the accessibility impacts of react-virtualized?
I'm wondering how react-virtualized handles accessibility. It seems like it might be difficult for a user to navigate to a particular section of the list using accessibility tools. Is react-virtualized a realistic option for projects that need to…
limscoder
- 3,037
- 2
- 23
- 37
5
votes
0 answers
Height state value not updating immediately and state value always one step behind
I have a small project using justified-layout and react-virtualized,
I set the width and height of the preview images with the useCallback of previewImageContainerRef Ref. ( In the component [( / /…
yeln
- 462
- 2
- 10
- 23
5
votes
0 answers
Row heights are wrong with react-virtualized List and CellMeasurer
Can someone take a look at my react-virtualized setup, please?
I'm sure it's designed improperly because cell heights are not being measured properly.
https://gist.github.com/zackster/31fb5a983a33b303626cd8ae9dee3b94
I am brand new to React.js (this…
Zack Burt
- 8,257
- 10
- 53
- 81
5
votes
1 answer
React-virtualized dynamic height list renders everything stacked initially
I am trying to use react-virtualized to virtualize a list where some rows have varying heights, and also the list takes up all the space in the parent. I am trying to accomplish this with the CellMeasurer, AutoSizer and List components.
My package…
Waltari
- 1,052
- 1
- 30
- 64
5
votes
3 answers
Add Gap Between Elements While Using React Virtualized
I am using React-Virtualized to create a lazy loading infinite list.
https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md
However, I am not able to create a gap between the rendered divs, since they are absolutely…
Yasir
- 879
- 5
- 13
- 31
5
votes
0 answers
react-virtualized grid with fixed header and variable column width
I'm trying to build a react-virtualized grid with thw following properties:
fixed header (I'm using a List component for it
Varible column width (defined in columns.width property for each column)
Here is the code:
import React, { Component } from…
Mendes
- 17,489
- 35
- 150
- 263
5
votes
2 answers
React-virtualized table not rendering as a table
I have a super basic example that I wrote based on the demo, and it's not working:
import React from 'react';
import {
Table,
Column,
} from 'react-virtualized'
function MyTable(props) {
return (
