527
questions
0
votes
0
answers
34
views
How to add reverse-scroll in React while using react-virtualized with InfiniteLoader for loading messages?
I want to render the messages in a chat application in reverse order, with the most recent message at the bottom and the oldest message above it, and so on. infiniteLoader should load more chats when ...
1
vote
1
answer
57
views
HOC(Multigrid) from react-virtualized strange update method
I use Multigrid to create a scrolling table. There is a requirement: to be able to manually change the widths of columns, including the header column (sidewall)
Example:
https://codesandbox.io/p/...
2
votes
1
answer
477
views
Issue with react-virtualized and Vite: "No matching export for import bpfrpt_proptype_WindowScroller"
I am working on a React project (version 16) that is bootstrapped with Vite. I am encountering an issue with the react-virtualized library, specifically with the WindowScroller component. When I try ...
0
votes
0
answers
57
views
Combining 'react-grid-layout' and 'react-virtualized'
We're using react-grid-layout to have a dashboard with resizable & draggable panels. It works perfect unless there are 5000 panels needed to be rendered. I thought about adding some virtualization ...
0
votes
0
answers
30
views
How to implement TreeList from ReactiveSearch with React Virtualization or lazy loading?
I'm working on a use case where I need to display a large dataset with a hierarchical structure (Make/Model/Component) in a tree-like filter component using ReactiveSearche's TreeList.
I've tried ...
1
vote
1
answer
675
views
How to improve scroll performance of react tanstack table with virtualization?
We're having a big problem in our app where the each row rendering in our table adds a high overhead and blocks the JS main thread with long tasks, making the app feel over slow and sluggish. We're ...
0
votes
0
answers
45
views
How to use search funtionality similar to ctrl+f using react-virtualized
I have a use case where I want to display a dynamic sized content with millions of rows using scrollbar which I am doing using react-virtualized list.
Is there a way to perform search on this list (...
0
votes
0
answers
82
views
scrollToRow() on List component with WindowScroller not working
Background
I'm using an implementation of react-virtualized with:
WindowScroller to allow scrolling to happen on the page (not within a container), and an onResize event handler to clear the ...
0
votes
0
answers
77
views
Bugged React virtualized list issue
I'm developing a virtualized list using react-window and react-virtualized that renders a bunch of items, each one containing an image, a text element and a "download image" button - here is ...
0
votes
0
answers
68
views
CSS Scrolling overflow content issue with absolute positioned items
I have absolute positioned navigation items within a resizable container.
The problem is when you scrolled the overflow content horizontally, the child elements (they're absolute positioned because of ...
0
votes
1
answer
59
views
How to render doc to html converted data(html) into webpage
Scenario:
I have one largest (50MB - size) file and converted that into html file using third party tool.
Now I wish to showcase converted HTML file into my webpage
When trying this scenario my React ...
1
vote
1
answer
198
views
Is getMenuProps necessary in React downshift autocomplete library?
I see the readme on getMenuProps, but it doesn't explain what the refs are used for. It seems to have an effect when I move it around. I'm not sure if it is required to go on a list element directly ...
1
vote
1
answer
94
views
Why is my react-virtualized list not displaying scrollbar unless I make sure height is lower than rowCount*rowHeight?
I am using "react-virtualized": "9.22.5", and I am trying to render a list.
When I pass
<List
height={myList.length * 30}
rowHeight={30}
rowCount={myList.length}
width={...
0
votes
0
answers
166
views
Virtualized (and synchronized) rows and columns in React
I'm currently working on a React application where I want to create a huge table-like structure with multiple columns that are fixed and a single (or multiple) columns that can be scrolled ...
0
votes
0
answers
289
views
React virtualized, Infinite Scroll - start at the bottom of List
I am using react-virtualized to create an infinite scroll. The code for this is shown below (full link to the codesandbox where this code is taken from- https://codesandbox.io/p/sandbox/react-...
0
votes
0
answers
13
views
react-vertualize, scrollbar goes top directly when there is less data
description with example: I am having 24 rows in database which are getting from getContractReviewListQuery?.data. initally i am calling api twice so i am getting 18 record (each time i am getting 9 ...
0
votes
0
answers
49
views
react-virtualized forceUpdateGrid method does not cause re-rendering with new data
I use react-virtualized library,in particular , the 'List' component. ContactsList the component in which the list of contacts is rendered. ContactsList has the ability to filter contacts.There is a ...
1
vote
0
answers
29
views
correct way to handle back event for the updated list in react native
I have been implementing a passbookView, where we fetch the transaction list from the backend.
and user can navigate to a detailView for each transaction where he can cancel the transaction.
now the ...
0
votes
0
answers
53
views
when loading control Component with custom menuList in react select the input-field is getting shorter
`const MenuList = useCallback(
children, ...props }) => {
if (props.selectProps.inputValue && !props.options.length) {
return (
<div
style={{
backgroundColor: '#fff',
border: '1px solid #...
1
vote
3
answers
362
views
onScroll is not working after React 18 upgrade
The onScroll callback(scrollHandler) is not getting called while scrolling. This issue is happening after we upgraded to react 18 from react 16.
Package details
"react": "^18.2.0",
...
1
vote
0
answers
200
views
How to combine React-Virtualized with Material UI grid or Bootstrap Gird?
I have a simple layout of a grid that I would like to virtualize it.
<Grid
maxWidth='xl'
height='100%'
container
direction='row'
justifyContent='...
0
votes
0
answers
2k
views
504 (Outdated Optimize Dep)
enter image description here
this is the error
import 'react-virtualized/styles.css';import { useEffect, useState, useRef } from 'react';
import './App.css'import React from 'react';
import useToggle ...
0
votes
0
answers
27
views
Table with dynamic row heights and loading
I'm using react-virualized 9 with Table, Autosizer, and CellMeasurer components. I need to update the row heights when the list data has changed. Based on the answer from the author, I need to do 2 ...
0
votes
1
answer
210
views
how to display nested variable height rows with react-virtualized
import * as React from "react";
import { render } from "react-dom";
import {
List,
CellMeasurerCache,
CellMeasurer,
WindowScroller,
AutoSizer
} from "react-...
1
vote
0
answers
86
views
Horizontall scroll in react-virtualized
I am new to next.js , currently I am looking to design an UI which I have mentioned below in an image
UI that I want to build .
I am struck on how to implement this UI using react virtualized , is it ...
2
votes
1
answer
2k
views
How to Virtualize the options for React-Select?
I've been trying to implement virtualization to a React-Select component although without success. Every single virtualization package that I have tried using has had some sort of breaking fault that ...
0
votes
1
answer
1k
views
how we can fetch new data when scrolling both directions(up and down)
I have created an infinite scrolling using react-virtouso. and it is working proper too.
in the given example it fetch data when we scroll-down and when we reach on the end, and it append to existing ...
2
votes
2
answers
1k
views
react-window spacing between items list
I am trying to integrate react-window with react-window-infinite-loader and so far, I have been successful, but facing an issue where I couldn't find a way to style my list item to create more spacing ...
2
votes
0
answers
87
views
Virtualize small list of large lists in React
I am buliding an emoji picker as part of a larger react project and have encountered an issue. I have successfully built the emoji picker, but it is extremely slow
This is because there are thousands ...
2
votes
0
answers
723
views
Is there any way to do Bi-directional Infinite scrolling in React?
I am using react-infite-scroll-component and react-virtuoso for inverse infinite scrolling in real-time chat app.
And the problem is when when chat has more than 100 unread messages, then it's more ...
1
vote
0
answers
1k
views
Title: How to virtualize MUI TreeView with over 1000 TreeItems to keep the DOM light?
I have a MUI TreeView component with over 1000 TreeItems and I'm noticing performance issues due to the large number of DOM elements being rendered. I've heard that virtualizing the TreeView can help ...
1
vote
1
answer
2k
views
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 ...
0
votes
1
answer
1k
views
React virtualized list not rendering components
I'm trying to use react-window and react-virtualized-auto-sizer to virtualize a components list, but the <AutoSizer> component isn't rendering the list.
this is the code:
<AutoSizer>
{...
0
votes
1
answer
195
views
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 ...
0
votes
1
answer
182
views
react-virtualized ArrowKeyStepper List
import { List, AutoSizer, ArrowKeyStepper } from 'react-virtualized';
...//
<div className={classes.listContainer}>
<ArrowKeyStepper
mode="cells"
...
5
votes
0
answers
401
views
Height state value not updating immediately and state value always one step behind
I have a small project using justified-layout and react-virtualized,
I set the width and height of the preview images with the useCallback of previewImageContainerRef Ref. ( In the <PreviewImage>...
0
votes
0
answers
220
views
How to make two rows inside one row react-virtualized?
I need to make for some rows react-virtualized from table, create 2 rows, 1 row it is row react-virtualized second row it is my custom row
Ho to do it, maybe has some example?
I tried use ...
0
votes
1
answer
2k
views
I need react multi-select with virtualized list options
I have a multi-select component with a lot of option data that takes a long time to load.
I optimized it with the react-select-virtualized and
it works ok but it doesn't support multi-selection yet.
...
1
vote
0
answers
143
views
React-Window in React inside Map in React
I implemented react-window and react-virtualized-auto-sizer.
My problem is that it crashes. It says Element type is invalid: expected a string (for built-in components) or a class/function (for ...
0
votes
1
answer
546
views
Why my virtualized list does not re-render when the data passed as prop actualizes?
I am having a problem that I can't solve by my own. I am making an app for making lists in React Native, and in my main screen, that shows the session initiated by the user, I have to render all the ...
1
vote
0
answers
48
views
Where should I place the code for async fetch/axios data for the <List>?
I checked all the sandboxes for react-window (react-virtualized-auto-sizer, react-window-infinite-loader)
They both use mock data
Where should I place the code for async fetch/axios data for the <...
0
votes
1
answer
433
views
row height is not changing after data is changed using sorting method in react-virtualized
I am rendering a long list using the react-virtualized library. everything is working fine, but when I sort the data using the javascript sort method then the height of the divs doesn't change when ...
1
vote
0
answers
138
views
List is not re-rendering the child components
I am using react-virtualized to window my dropdown list options.
The problem is that these options are not rendering its content.
constructor(props) {
super(props);
this.cache = new ...
0
votes
1
answer
564
views
How to notify List component that its row item height has changed and make the row rerenders?
I have a react-virtualized List, each item in the rows have an expand button, when the button is clicked the height of the row changes and it expands and show more info.
the issue here is, after the ...
1
vote
0
answers
204
views
REACT : add loading in virtualized list
I want to when scrolling body add skeleton loading my items in virtualized list
I use the react-viewport-list package
<ViewportList items={dataTable}>
{(item, index) => (
...
1
vote
0
answers
283
views
How to add border color to react virtualized table column (header and body together)?
I have a react virtualized table. Im trying to add a border color to the whole description column, like image below.
I've tried this : style= {{ borderColor: "red"}} in <Column, but ...
1
vote
1
answer
1k
views
bvaughn / react-virtualized : Stop AutoSizer from keep updating the width when browser window resized dynamically
How do I stop AutoSizer from keep updating the width when browser window resized dynamically ( dragged by mouse etc )?
I just need the width to calculate once ( on first load ) or when page is ...
1
vote
0
answers
1k
views
Scrolling position changes after loaded more items to react-virtualized list
The following issues below point to the same problem I am experiencing:
Scroll jumps to the top when List data gets updated
InfiniteLoader jumps when scrolling up after loadMoreRows completes
Adding ...
0
votes
1
answer
911
views
React-virtualized Cellmeasurer defaulting to 'minHeight' of the CellMeasurerCache
I'm using a react-virtualized List component, which uses height data from CellMeasurerCache:
const cache = new CellMeasurerCache({fixedWidth: true, rowHeight: 150, minHeight: 50 });
This is the code ...
1
vote
1
answer
3k
views
React-Window with dynamic list dimensions
I'm trying to add react-window to my stack, however all examples require the width and height of the list to be statically defined like this:
import { FixedSizeList as List } from 'react-window';
...