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
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
  • 333
  • 1
  • 3
  • 6
8
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
  • 62,658
  • 20
  • 139
  • 163
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
  • 3,626
  • 2
  • 31
  • 40
8
votes
3 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
  • 945
  • 2
  • 12
  • 18
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
  • 528
  • 1
  • 5
  • 21
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
  • 8,257
  • 10
  • 53
  • 81
7
votes
2 answers

How can I use Material-UI Autocomplete together with react-virtualized?

I'm using the Autocomplete component from Material-UI in a project. Since I have a lot of options to render, virtualization would be very beneficial. So I started from the virtualized example in the docs with react-window. Everything worked great,…
Mikaela
  • 526
  • 1
  • 4
  • 11
7
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
  • 918
  • 3
  • 12
  • 26
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,561
  • 3
  • 18
  • 26
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
  • 3,082
  • 4
  • 34
  • 47
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.
  • 37,583
  • 36
  • 99
  • 136
6
votes
1 answer

How do I 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
  • 8,315
  • 7
  • 36
  • 49
6
votes
1 answer

CellMeasurer support of registerChild in react-virtualized

Using the render prop registerChild as ref in CellMeasurer seems to be ignored by react-virtualized: warning findDOMNode is deprecated still received. That…
Fred
  • 521
  • 1
  • 4
  • 7
6
votes
1 answer

Table in react-virtualized does not render any rows

I'm having trouble with react-virtualized Table (inside InfiniteLoader inside AutoSizer) with custom row renderer. Header row is rendered, but no data rows. Neither rowRenderer or rowGetter even get called for any row. I checked the data is there…
strokovnjaka
  • 105
  • 1
  • 7
6
votes
0 answers

How to set width and height to 100% with ?

I following the example: demo, source code. they set width={width} and height={height}, if I do that I get nothing displayed... To display somehthing I need to set the height to something, for exaple 600px, but I want to have this to 100% the height…
Isak La Fleur
  • 4,428
  • 7
  • 34
  • 50
1
2
3
…
34 35