Skip to main content
Filter by
Sorted by
Tagged with
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 ...
AKSHAT MAHESHWARI's user avatar
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/...
Maxim's user avatar
  • 11
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 ...
Rahul Ramshrey Chauhan's user avatar
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 ...
Alexandre Adereyko's user avatar
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 ...
Prateek Zare's user avatar
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 ...
Eduardo Pacheco's user avatar
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 (...
Samay Varshney's user avatar
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 ...
Zachary Beschler's user avatar
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 ...
Matheus Caetano Rocha's user avatar
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 ...
Metehan Senol's user avatar
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 ...
MADHAN BABU's user avatar
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 ...
HareSurf's user avatar
  • 78.2k
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={...
Milan Smolík's user avatar
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 ...
Ypselon's user avatar
  • 132
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-...
Coding Ninja123211's user avatar
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 ...
Ninad Bhoir's user avatar
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 ...
Евгений Мушков's user avatar
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 ...
vatsal mandloi's user avatar
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 #...
Shivansh_Tripathi_1357's user avatar
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", ...
Thalariventhan K R's user avatar
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='...
Oliver's user avatar
  • 362
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 ...
Kuba Wintoch's user avatar
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 ...
user21617288's user avatar
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-...
Ayoub Benayache's user avatar
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 ...
Vishwa's user avatar
  • 11
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 ...
pron1ghtmare360's user avatar
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 ...
shafa vp's user avatar
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 ...
Naruto's user avatar
  • 109
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 ...
Gradyn Wursten's user avatar
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 ...
bjjnarola's user avatar
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 ...
Harsh Jangir's user avatar
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 ...
goss's user avatar
  • 41
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> {...
João Ferreira's user avatar
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 ...
Nameer Muhammad's user avatar
0 votes
1 answer
182 views

react-virtualized ArrowKeyStepper List

import { List, AutoSizer, ArrowKeyStepper } from 'react-virtualized'; ...// <div className={classes.listContainer}> <ArrowKeyStepper mode="cells" ...
Ирина Папахина's user avatar
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>...
yeln's user avatar
  • 736
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 ...
Alex's user avatar
  • 1
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. ...
Jai Kumaresh's user avatar
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 ...
Joseph's user avatar
  • 7,685
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 ...
Desarrollos MJA's user avatar
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 <...
yeln's user avatar
  • 736
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 ...
Sajib Hossain's user avatar
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 ...
LeadStar's user avatar
  • 152
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 ...
yeln's user avatar
  • 736
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) => ( ...
Alireza Bagheri's user avatar
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 ...
ELsssss's user avatar
  • 206
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 ...
yeln's user avatar
  • 736
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 ...
William Sun's user avatar
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 ...
user17299932's user avatar
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'; ...
Alk's user avatar
  • 5,507

1
2 3 4 5
11