Questions tagged [react-window]
133 questions
0
votes
0 answers
How to maintain scroll position when adding new items on the top to React Virtualized List? Should I use the Infinite Scroll component?
I am working on a chat application that uses the List component from react-virtualized to display the chat messages. The list is initially loaded with a fixed number of messages, and new messages are added to the top of the list as the user scrolls…
Julien Levallois
- 131
- 1
- 2
- 5
0
votes
1 answer
How to create responsive grid that fills width using react-virtualized's Grid?
Context
I would like to use react-virtualized Grid to create a responsive grid of cards.
The data of the cards will be one dimensional (non 2D).
The cards will each have a minimum width and they will fill the entire width of the grid, wrapping to…
goss
- 1
- 1
0
votes
0 answers
How to get itemSize for VariableSizeList in react-window from a component?
I'm rendering a list with react-window, all rows have the same size, but when I resize the window, the content disappears because the row's size is always the same.
I render my list items with an array of components:
this.state =
{
…
João Ferreira
- 44
- 6
0
votes
0 answers
Asynchronous loading of data in a Table/InfiniteLoader/Autosizer impl
I have the following scenario:
fetch a list of events, which provides initial set of data to be used in Table.
within initial list of events, there are 3 cells which require additional api calls to obtain data more data.
I have tried…
0
votes
0 answers
Is there any way to implement virtualization to react-sortablejs
I am trying to implement virtualization with react-sortablejs for lists with more than 500 items.
I have tried with react-virtuoso, but react-sortablejs wraps the entire react-virtuoso component as a single item. Is there any way to target the li…
0
votes
0 answers
Unexpected Scroll Behaviour when using react-window
I am using react-window for list virtualization in my electron-react application. But when scrolling down it generates a weird behariour. The scroll keeps jumping up and down and cannot scroll down.
- console.log(e,…
Sandy_7
- 11
- 2
0
votes
0 answers
In virtualised table of react-window make width full size without hardcoding
I have created virtualised table using the react-window. I want to make this grid full size of the window without hardcoding the width.
React-window virtualised table grid
CodeSandBox reference :…
0
votes
0 answers
How to solve the problem with scrolling in react-select when loading data?
Could you tell me how to solve the problem with scrolling in react-select when loading data. After query execution and data rendering, there is an automatic scroll up, how can this be fixed? This behavior is observed only when using a custom…
Alexander
- 5
- 5
0
votes
0 answers
Reactjs virtualization infinit scroll
I'm trying to implement a virtualisation component with reactjs.
In order to fill the empty top and bottom gap I used an empty div with dynamic height which depends on the scroll position.
…
Med Naddari
- 1
- 2
0
votes
0 answers
Antd Virtual table fixed header
Based on this documentation https://4x.ant.design/components/table/#components-table-demo-virtual-list I've created VirtualTable component.
import React, { useState, useRef, useEffect } from 'react'
import { Table } from 'antd'
import classNames…
Kirill Novikov
- 2,576
- 4
- 20
- 33
0
votes
0 answers
How to load items using react-window-infinite-loader with react-window FixedSizeGrid
I'm attempting to use react-window-infinite-loader with a FixedSizeGrid from react-window.
Before I start, I created a codesandbox with a minimal example which I'll reference in the question.
The issues I'm having are:
The grid doesn't seem to load…
Mr.Smithyyy
- 2,157
- 12
- 49
- 95
0
votes
0 answers
Is this possible to make Collapse animations in react-window?
I would like to make something like this, but with react-window. Is this possible?
Code:
{someList.map((someData) =>
DomeQ
- 9
- 4
0
votes
1 answer
React virtualized doesn't work with auto sizer and infinite loader
I'd like to virtualize a large list in my react application and use react-virtualized-auto-sizer and react-window-infinite-loader packages. Below is how I did it.
import { FixedSizeList as List } from 'react-window'
import InfiniteLoader from…
Tu Le Thanh
- 542
- 1
- 6
- 18
0
votes
0 answers
Having trouble integrating the React Virtuoso virtualization library into a React project with MUI components
I'm trying to integrate react-virtuoso's Virtuoso into my TypeScript web app's MUI Autocomplete dropdown menu popper in order to virtualize a list of checkable options. I tried using react-window's VariableSizeList at first but was having some…
Jackalakalaka
- 91
- 1
- 7
0
votes
1 answer
react-window-infinite-loader prefetching extra data
I am not sure why this is happening but the InfiniteLoader makes calls to fetch items twice(one for items from 0-8 and then from 8-16) when I am just loading the page and not scrolling at all. Also, even if I scroll only a couple of rows after 16…
Aakash Verma
- 3,705
- 5
- 29
- 66