Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Dec 09 09:58
    aanbari1337 opened #1789
  • Dec 08 12:29
    ashen114 opened #1788
  • Nov 29 20:40
    keepitreal commented #1572
  • Nov 29 20:35
    keepitreal opened #1787
  • Nov 24 00:11
    mleister97 commented #1353
  • Nov 24 00:09
    mleister97 commented #1572
  • Nov 24 00:09
    mleister97 commented #1572
  • Nov 23 22:02
    mleister97 opened #1786
  • Nov 23 21:33
    mleister97 commented #1739
  • Nov 22 15:15
    derwaldgeist commented #1711
  • Nov 22 15:09
    derwaldgeist commented #1778
  • Nov 22 08:29
    nata7che commented #719
  • Nov 16 22:21
    artsur commented #1778
  • Nov 16 22:20
    artsur commented #1778
  • Nov 15 17:28
    DallasP9124 commented #1632
  • Nov 11 20:24
    evskorobogatij commented #1778
  • Nov 09 19:13
    jeespu commented #1739
  • Nov 09 11:58
    OnkelTem commented #1778
  • Nov 08 01:00
    taylous opened #1785
  • Nov 07 14:02
    yeo11200 opened #1784
Ian VanSchooten
We did something like this, and our general approach was to treat the seperators as a row, give them a type, and then in the render function check that type to determine how to render it. Granted, this was a list and not a grid though, so YMMV.
Ian Chipperfield

Hi all! Does anyone have knowledge of how to increase the scroll width of a Collection (I think it may be determined by the rightmost cell?)

I am trying to synchronize LTR scrolling on several collections but I need to ensure they have the same underlying scroll width (ie. the each scroll container's width is set to the right-most cell of all the collections)


Hi everyone, could someone explain to me the following:

  1. Where does the data come from for the list? Where is the entry point? Is it "context" ?

  2. Where does the actual "sorting" happen? I can't seem to grasp it quite right.



Ian VanSchooten
@AO17 you’re better off asking at the Slack channel, this is not really monitored anymore.
Hi all... I am new to react-virtualized.. I am using react-virtualized table and trying to disable row which includes button cell based on some condition.. How do I accomplish this.. Thanks in advance
Hi! I was wondering if there's a way to tell Grid how many off-screen (or out of window) elements to keep while scrolling. I have a very long list and a tall header on top. The header is slightly translucent so you can see the elements that have been scrolled past. Basically it would work like overscanRowCount, but in the opposite direction.
I don't mind implementing it and making a pull request if the answer is no. Although, I haven't looked at the code too closely yet, so not sure how trivial or non-trivial it would be to implement.
Ah. I'll xpost on slack, since it seems to be the official version.
hey does anyone know how to animate the scrollToPosition method?
can anyone link me to an example of using react-portal with react-virtualized to create dropdowns in the Table view - I am having trouble and the only example I have found is outdate and uses methods that no longer exist on react-portals.
i'm experiencing lag when using portals, does anyone know how to get good tracking, for instance if you scroll, when you stop the overlayed element will be correct but everything in between is jerky and out of sync
Benjamin Pryke
Hi guys. I have a MultiGrid using fixedRowCount (for headers) embedded inside an ArrowKeyStepper. If I select the first row of data in my grid and press up, the selection disappears into my header. Is it possible to provide an offset or make the ArrowKeyStepper work with the fixedRowCount of my MultiGrid?
Brian Vaughn
Just an FYI for folks still posting here- we're in Slack, not Gitter. Join us at https://react-virtualized.now.sh/
Benjamin Pryke
@bvaughn Thanks Brian
Rob Lao
Hi, I'm using enzyme to write unit tests against the react virtualized grid component, using enzyme.mount to load the component or using updatemethod cannot trigger cellRenderer method which I'd like to check on. Any ideas?
im implementing arrow-key-stepper .but the code has some bug

import React from 'react';
import ReactDOM from 'react-dom';
import { ArrowKeyStepper, Grid } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

const list = [
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],


function cellRenderer ({ columnIndex, key, rowIndex, style }) {
    // console.log('ColumnIndex', columnIndex)
    return (

    {({ onSectionRendered, scrollToColumn, scrollToRow }) => (





can someone help me to implement clear cache mechanism of CellMeasurerCache on window resize . I know I should call clearAll()
The problem is this method is undefined when I am trying to do this.cache.clearAll()
this.cache = new CellMeasurerCache({
fixedWidth: true,
defaultHeight: 100
CellMeasurerCache {_cellHeightCache: {…}, _cellWidthCache: {…}, _columnWidthCache: {…}, _rowHeightCache: {…}, _columnCount: 0, …}
columnWidth: ƒ (_ref)
rowHeight: ƒ (_ref2)
_cellHeightCache: {0-0: 120, 1-0: 69, 2-0: 69, 3-0: 120, 4-0: 69, …}
_cellWidthCache: {0-0: 660, 1-0: 660, 2-0: 660, 3-0: 660, 4-0: 660, …}
_columnCount: 1
_columnWidthCache: {}
_defaultHeight: 100
_defaultWidth: 100
_hasFixedHeight: false
_hasFixedWidth: true
_keyMapper: ƒ defaultKeyMapper(rowIndex, columnIndex)
_minHeight: 0
_minWidth: 0
_rowCount: 7
_rowHeightCache: {0-0: 120, 1-0: 69, 2-0: 69, 3-0: 120, 4-0: 69, …}
defaultHeight: (...)
defaultWidth: (...)
proto: Object
Maka.js, a react framework using Microservice Architecture https://makajs.org
hi guys
Kamaraju Prathi
Do we have any good example of list of cards wrapped in materialui grid and using react infinte loader and autosizer
Nikhil Pandey
Hi, is there any library for animating scroll in react virtualized list such as easy scroll (which do it for <div>s)
Nikhil Pandey
hi, how can i access the scroll top of list in react-virtualized ?

I've got a MultiGrid that needs to be updated when the component is updated.
Calling cellMeasurerCache.clearAll() and gridRef.current.forceUpdateGrids() in shouldComponentUpdate works.
Doing the same in componentDidUpdate does not. I don't shouldComponentUpdate to have side effects - any ideas why it doesn't work from componentDidUpdate? @bvaughn

Could it be because shouldComponentUpdated is happening before render is called, while componentDidUpdate happens afterwards?
Should my CellMeasurerCache be part of the components state?

@menikhilpandey : I'm just guessing: https://reactjs.org/docs/refs-and-the-dom.html
Does anyone have a solution for this issue bvaughn/react-virtualized#998
Zack Burt
hi everyone
Can someone take a look at my react-virtualized layout, I'm sure it's designed improperly because cell heights are not being measured properly.
I am brand new to React.js (this is my first project in React) so some of the bad design is attributable to that
I pass measure into the ChatHistoryCell, which passes it into the sub various components who inevitably call it upon componentDidMount
I have basically three major bugs with this.
1) I want it to scroll to the bottom immediately after it loads the first time. Not sure how to do this?
Zack Burt
you'll notice I have this._list.scrollToRow(selectedThread.chat_log.length - 1); in componentDIdUpdate() but it's not working
2) The computed row heights are often dramatically wrong

3) If I resize the width of the window , and then I call these methods:


after the resizing, it looks bad. but then if i scroll out of view, and then back in view, it looks nice and adjusted to the new width

Praying for some help 🙏
Hi, I am using react-virtualized-list for rendering large list. Is there a way to edit a style property for rowRenderer?
Nathan Tomsic
@bvaughn is this project dead?
no still alive, 7 days ago there was an update to yarn
Question: I am using cell measure cache to render a dynamic list. This all works. The problem that I have at the moment is that there is an interaction on the list item, which expands the item. This in affect should move the items down. How do I trigger this kind of action?
I am trying to use an AutoResizer on a Grid, where the column count is tied to the length of a MobX array variable. Without AutoResizer (hardcoded width), my grid properly rerenders with more columns when the MobX array length is increased. However, with AutoResizer, the width is not recalculated. Any guidance would be greatly appreciated!