Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 16 21:04
    hcorta closed #1408
  • Oct 15 08:00
    groganmatt12 commented #1108
  • Oct 14 13:49
    BradRyan commented #705
  • Oct 14 12:35
    anurag060 commented #1003
  • Oct 14 11:09
    anurag060 commented #1003
  • Oct 09 11:57
    Bajdzis edited #1429
  • Oct 09 11:56
    Bajdzis opened #1429
  • Oct 09 10:03
    jordanrolph commented #1170
  • Oct 08 11:13
    mbman commented #1428
  • Oct 08 10:32
    jozefhm commented #1295
  • Oct 07 12:51
    mbman commented #1428
  • Oct 07 12:35
    codecov-io commented #1428
  • Oct 07 12:32
    codecov-io commented #1428
  • Oct 07 12:32
    codecov-io commented #1428
  • Oct 07 12:27
    mbman synchronize #1428
  • Oct 07 12:21
    mbman synchronize #1428
  • Oct 07 12:17
    mbman synchronize #1428
  • Oct 07 12:14
    mbman synchronize #1428
  • Oct 07 12:10
    mbman synchronize #1428
  • Oct 07 11:20
    mbman synchronize #1428
AJShippify
@AJShippify
Hi, a quick question how should I handle the case when, in an InfiniteScroll component my initial load has few rows and there is no scroll space available to trigger loadMoreRows
?
Jordan
@jpollard-cs
@AJShippify post in the slack channel (see above)
Peter Hiža
@hizo
Hi, sorry for duplicate question, surely there has been one already... what are the ways to implement animation while scrolling? e.g. I have implemented Collection which looks like a grid (more easier for me was to use collection cause i have data in array of objects already... so no good for Grid)
only mention of animation is in Masonry but no examples and not further mentioned at all
I would like to have simple transition while vertically scrolling... is it possible somehow?
Ian VanSchooten
@IanVS
Thomas Davis
@thomasdavis
Trying to trigger rowRenderer to re-execute using List
but forceUpdateGrid() don't do anything
Gajus Kuizinas
@gajus
Which are the correct components to use to create a multiple column grid?
Ian VanSchooten
@IanVS
@gajus This channel is not monitored, Brian and most of the others have moved to slack.
AKT
@itsakt
can someone help me setup InfiniteLoader with react-redux. List items are stored in redux state. I'm having scroll issues.
1.gif
this happens automatically
:/
Ilya Zabrodsky
@cneltyn
Hi! Can someone suggest how to implement next
Untitled Diagram.jpg
Ilya Zabrodsky
@cneltyn
the main problem is separator
Ian VanSchooten
@IanVS
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
@iChip

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)

AO17
@AO17

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.

Sources:
https://github.com/bvaughn/react-virtualized/blob/master/source/Table/Table.example.js

https://bvaughn.github.io/react-virtualized/#/components/Table

Ian VanSchooten
@IanVS
@AO17 you’re better off asking at the Slack channel, this is not really monitored anymore.
DeepakkumarArumugam
@DeepakkumarArumugam
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
Nino Miletić
@omninonsense
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.
Nino Miletić
@omninonsense
Ah. I'll xpost on slack, since it seems to be the official version.
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