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]
458 questions
7
votes
2 answers
Row selection in react-virtualized
The documentation in react-virtualized is not clear on how row selection is handled. I need to:
track selected row
highlight selected row
query which row is selected (I care for getting to its data)
It appears that there is a way to handle row…
Sergei G
- 1,231
- 2
- 14
- 25
7
votes
3 answers
How to notify List component that one item has changed the size?
I would like to render a list of items using react-virtualized, however some of the items could change the size.
I have added a demo, where each item has a button and when someone clicks the button then the item needs to expand and push the below…
Alin Ciocan
- 2,713
- 3
- 29
- 43
7
votes
0 answers
How can I animate the removal or addition of elements from a `React-Virtualized` list?
It seems React-Virtualized does not support animations out of the box, but is it possible (and reasonable?) to use ReactCSSTransitionGroup to implement transitions?
In my case I'd like to do a remove animation (e.g., fade opacity or shrink height)…
Chris W.
- 32,518
- 30
- 89
- 121
7
votes
2 answers
Sticky headers in react-virtualized
I am using a List component in react-virtualized to render a large number of items. In my implementation, the items are sectioned, and I want the section headers to be sticky so that the current section remains visible as users scroll down.…
Chris
- 787
- 1
- 10
- 17
6
votes
1 answer
AutoScroll with react-sortable-hoc (Table)
I've been struggling to implement this example noted in the react-sortable-hoc examples page, specifically with the autoscroll behavior within a table. Unfortunately it doesn't look as though source code lives in the examples directory of the…
lux
- 7,747
- 7
- 30
- 48
6
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
- 1,619
- 1
- 12
- 29
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
- 301
- 3
- 14
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
- 5
5
votes
1 answer
react-virtualized list item does not re-render with changed props until I scroll
I have a react-virtualized list (using List component) like this:
renderItem = ({ index, key, style }) => {
const {
entries,
projectId,
} = this.props;
const entry = entries[index];
return (
…
Dominic
- 48,717
- 14
- 109
- 126
5
votes
1 answer
Using react-sortable-hoc with react-virtualized's MultiGrid
I want to use react-sortable-hoc with react-virtualized's MultiGrid. More specifically I would like to be able to sort the rows in the lower right grid.
1st attempt
I'm creating a SortableMultiGrid using
const SortableMultiGrid =…
kraenhansen
- 1,365
- 1
- 13
- 24
5
votes
1 answer
react-virtualized InfiniteLoader in both directions, top and bottom
How to make infinite scrolling in both directions, up and down. I am using the InfiniteLoader and the List, both are react-virtualized components. I have a list of timestamps with initial date-time range. From there the list should be infinite in…
sara.aleksi
- 111
- 5
5
votes
1 answer
How to add sorting to table with react virtualized?
I am trying to add sorting to my project with the table sorting demo on Github.
My code:
import React from 'react';
import PropTypes from 'prop-types';
import { Table, Column, SortDirection, SortIndicator } from 'react-virtualized';
import AutoSizer…
AO19
- 748
- 1
- 10
- 25
5
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,419
- 2
- 15
- 30
5
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
- 229
- 2
- 11
5
votes
1 answer
How to measure a rows height in react-virtualized list
I'm a little uncertain as how to achieve dynamic heights of a List using react-virtualized.
I have a component as follows:
import { List } from 'react-virtualized';
- {
…
Matt Derrick
- 5,434
- 2
- 33
- 49