Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 26 23:15
    jhrinoa commented #1656
  • Oct 26 23:14
    jhrinoa commented #1656
  • Oct 26 19:07
    qtnemo commented #1690
  • Oct 26 07:18
    BigBugaboo closed #1702
  • Oct 25 13:38
    leon-wbr opened #1705
  • Oct 25 09:31
    reliveyy opened #1704
  • Oct 25 09:14
    reliveyy commented #1353
  • Oct 24 00:04
    Jayanzhou commented #1214
  • Oct 24 00:03
    Jayanzhou commented #1214
  • Oct 22 07:09
    PixelMooort commented #1700
  • Oct 20 20:16
    Nokel81 opened #1703
  • Oct 20 15:24
    atomless commented #1655
  • Oct 20 15:03
    atomless commented #1655
  • Oct 20 12:34
    BigBugaboo opened #1702
  • Oct 20 10:17
    KKzLEO commented #1701
  • Oct 20 10:17
    KKzLEO closed #1701
  • Oct 20 10:17
    KKzLEO commented #1701
  • Oct 20 08:34
    PixelMooort commented #1700
  • Oct 20 07:44
    KKzLEO edited #1701
  • Oct 20 06:38
    KKzLEO opened #1701
kamranjon
@kamranjon
hey does anyone know how to animate the scrollToPosition method?
kamranjon
@kamranjon
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.
kamranjon
@kamranjon
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
@benpryke
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
@bvaughn
Just an FYI for folks still posting here- we're in Slack, not Gitter. Join us at https://react-virtualized.now.sh/
Benjamin Pryke
@benpryke
@bvaughn Thanks Brian
Rob Lao
@viewplatgh
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?
deep
@addictd
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 (
    <div
        key={key}
        style={style}
    >   
        {list[rowIndex][columnIndex]}
    </div>
    )  
}


ReactDOM.render(
<ArrowKeyStepper
    columnCount={list[0].length}
    rowCount={list.length}
>
    {({ onSectionRendered, scrollToColumn, scrollToRow }) => (
    <Grid
        columnCount={list[0].length}
        rowCount={list.length}

        onSectionRendered={onSectionRendered}
        scrollToColumn={scrollToColumn}
        scrollToRow={scrollToRow}

        cellRenderer={cellRenderer}
        columnWidth={100}
        height={300}
        rowHeight={30}
        width={300}

    />
    )}
</ArrowKeyStepper>,
document.getElementById('root')

);

srikkanthsiki
@srikkanthsiki
hi
Arjita
@arjitaM
Hi
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
jeffy
@jeffycai
Maka.js, a react framework using Microservice Architecture https://makajs.org
alizeaiter
@alizeaiter
hi guys
Kamaraju Prathi
@kamarajuPrathi
Do we have any good example of list of cards wrapped in materialui grid and using react infinte loader and autosizer
Nikhil Pandey
@menikhilpandey
Hi, is there any library for animating scroll in react virtualized list such as easy scroll (which do it for <div>s)
Nikhil Pandey
@menikhilpandey
hi, how can i access the scroll top of list in react-virtualized ?
nitzel
@nitzel

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?

nitzel
@nitzel
@menikhilpandey : I'm just guessing: https://reactjs.org/docs/refs-and-the-dom.html
Jayesh
@jayeshpp
Does anyone have a solution for this issue bvaughn/react-virtualized#998
Zack Burt
@zackster
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
@zackster
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:

        selectedConversation.cellMeasurerCache.clearAll();
        selectedConversation.cellMeasurer.resetMeasurements();
        selectedConversation.listRef.recomputeRowHeights();
        selectedConversation.listRef.forceUpdateGrid();

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 🙏
gabrieljerin
@gabrieljerin
Hi, I am using react-virtualized-list for rendering large list. Is there a way to edit a style property for rowRenderer?
Nathan Tomsic
@MrKumaPants
@bvaughn is this project dead?
puppeteer701vungle
@puppeteer701vungle
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?
techknowfile
@techknowfile
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!
techknowfile
@techknowfile
*AutoSizer
techknowfile
@techknowfile
Update: If I resize the window after the MobX array is increased, the cells then render
Update: Fixed by setting columnCount in the <AutoSizer /> component.
AutoSizer columnCount={store.dates.length}>
{({ columnCount, width }) => (
<Grid cellRenderer={cellRenderer} columnCount={store.dates.length} ..... )} </AutoSizer>
Nathan Tomsic
@MrKumaPants
@puppeteer701vungle dependabot doesn't count as maintained lol
Ramesh E
@eramesh_gitlab
Hi, I am using react-virtualized table for rendering large list. Is there a way to edit and save the row/multiple rows? @bvaughn any suggestion please.
aom1023
@aom1023
hello I'm using react-virtualized Table. is it possible to create a column with cells containing buttons and checkboxes which have actions that update the component state?
Faizan Baig
@baigfaizan95
Hello guys thanks for the awesome work, i am using virtualized list with autosizer and window scroller, the only issue i am facing is that the scroll position is changed whenever i am changing the page, any suggestion how i can persist the scroll position when i navigate the page?
Paul Anthony
@webireland_twitter
Hi folks, just curious if anyone knows of a virtualised solution when using CSS grids. Can react-virtualised handle that, or should I be recreating a grid layout manually when using it.
Jeremy Sykes
@jeremysykes:matrix.org
[m]
Hi everybody, I just wanted to say hello and what I am working on. I came across react-virtualized as it seems like the best choice for navigating large sets of tabular data, but of course Im being asked to do things with it that it might not have been designed for, like smoothly animate row heights on multi-grid tables and drag and drop columns. If anyone has experience with either of these feel free to hit me up. I've had some moderate success with the animation of row heights using requestAnimationFrame, but it's still a little choppy and a work in progress.