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
0
votes
1 answer

Make height of list fill whole page

I am currently trying to make a page with a map on one half and a list on the other. I want to make the list height fill the entire page but I can't seem to find the right way to do so. I am using the react-virtualized list codebase as a starting…
justinseo
  • 61
  • 6
0
votes
0 answers

Would like to add space between items rendered in a Table using React-Virtualized

I am creating a Table using React-Virtualized. I am using Autosizer and attempting to insert a gap between each element so there is space between each row. Each of my rows is an expandable element with additional information contained within an…
Daniel Carroll
  • 1
  • 2
0
votes
1 answer

Horizontal scroll event not firing for react window

OnScroll events are not firing for a horizontal scrollbar in list implementation of react-window. Minimal replication is at - https://codesandbox.io/s/summer-https-dyhvu In the given example we can see that for native implementation both horizontal…
Rohit Garg
  • 782
  • 5
  • 18
0
votes
0 answers

Excessive item's render

I'm using react-virtualized with CellMeasurer and a dynamic height like this https://codesandbox.io/s/react-virtualized-list-with-random-height-ciwvq But my data are more complex than what I used in the codesandbox. I tried to render 2060 items with…
Brighter
  • 67
  • 3
0
votes
1 answer

React Click/Mouse Event Handling [react-sortable-hoc, material-ui, react-virtualized]

I have the following example Stackblitz Live Working Example If you press the delete button on the red bin icon, it doesn't fire my onClick event handler (instead sorting starts straight away). If you press the delete button background of the button…
Michal Ciechan
  • 13,492
  • 11
  • 76
  • 118
0
votes
1 answer

How to update a react component's state from another file?

In my application, I have a text and a list which uses react-virtualized for rendering a large list of items, each item having a detailed description about some of the words in the text. Works very good, but what I need is when I click on an area in…
Toni
  • 3
  • 2
0
votes
0 answers

How to virtualize only the bottom of list items?

I can't delete components that I have already shown because of ads placed in items of the list. (Here is description why I can't delete ads) So I want to virtualize only items below and when I'm scrolling down do not delete items that I have already…
Curious
  • 63
  • 6
0
votes
1 answer

Scroll event getting fired on top element as well as on the bottom element

I'm using AutoSizer for one of the use cases in my application. in Autosizer code, they change the scrollTop due to which the scroll event is getting triggered. As the scroll events are captured (and not bubbled), how do I prevent scroll event in…
Ajay Gaur
  • 5,140
  • 6
  • 38
  • 60
0
votes
1 answer

Account for dynamic top element in React Virtualized `Grid`

I have a collection of photos that uses React Virtualized's Grid element. We've designed an indicator to appear during photo uploads. This hides and shows dynamically and is rendered via the cellRangeRenderer per these docs. The tricky part has…
lovelikelando
  • 7,593
  • 6
  • 32
  • 50
0
votes
0 answers

React Virtualized - List skipping over every other item

I really don't understand what I'm doing wrong, going by the docs. Explanation to the title: When I scroll from 1 to 2 (i.e - 1 is now hidden) - everything's fine. When I scroll from 2 to 3 (i.e - 1 and 2 are now both hidden) - The List jumps, so it…
Wassap124
  • 381
  • 4
  • 14
0
votes
1 answer

How to make a `List` with different items in row count?

Grid doesn't fit because I need WindowScroller and they doesn't work together. I already have 3 nodes in row for dir but I need to have 6 nodes in row for file dir and file can't be in the same row, instead must be whitespace (check out screen…
Curious
  • 63
  • 6
0
votes
1 answer

Error occurs when setting the current index of a react-virtualized List as state

Problem I'm trying to put startIndex in state from within onRowsRendered(). This works fine, until CellMeasurer is put into the mix. When scrolling down and then up, the following error occurs: Uncaught Invariant Violation: Maximum update depth…
Willem-Aart
  • 2,200
  • 2
  • 19
  • 27
0
votes
1 answer

TypeError: Cannot read property 'Grid' of undefined thrown in Table.forceUpdateGrid

I am attempting to call tableInstance.forceUpdateGrid() inside a Promise.then() callback and it is throwing an exception TypeError: Cannot read property 'Grid' of undefined Looking at the following code _createClass(Table, [{ key:…
Joshua Barker
  • 987
  • 2
  • 11
  • 23
0
votes
1 answer

How to sort timestamp column in react-virtualized table

How to sort timestamp column in the format: "dd/mm/yyyy hh:mm:ss PM/AM" in a react virtualized table as per date sort? currently it is sorting it as a string. Any ideas? Tx.
Kombo
  • 274
  • 1
  • 5
  • 16
0
votes
3 answers

React-virtualized MultiGrid row - hover css

Is it possible to use CSS to change row background color on hover in MultiGrid component? As I can see there's no div on a row level. All cells are at the same level. There's rowClassName property for Table component, but not for MultiGrid
Anton
  • 1,898
  • 3
  • 18
  • 27
1 2 3
…
34 35