Questions tagged [react-virtualized]

React components for efficiently rendering large lists and tabular data

react-virtualized
Filter by
Sorted by
Tagged with
0 votes
1 answer
17 views

React Native Inline elements implementation in FlatList

Iam new to react native and i have a problem like this I have ALOT of Text elements that i want to align one after another without going to the next line like shown in the picture... enter image ...
Auder's user avatar
  • 1
0 votes
0 answers
15 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
-1 votes
0 answers
17 views

Implementing collapsible toasts in react-virtualized

I am trying to implement a react-virtualized list to display a list of Toast components coming from Salt Design System. I want to hide some content initially and when user clicks on one of the toasts ...
Pratik Wadekar's user avatar
0 votes
0 answers
21 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
28 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
47 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
24 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
90 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 ...
Lance's user avatar
  • 77.2k
1 vote
1 answer
53 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
102 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
113 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
8 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
37 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
23 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
28 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
236 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
0 votes
0 answers
118 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
  • 335
0 votes
0 answers
821 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
21 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
0 answers
68 views

horizontal scroll position based callback function issue

I am new to next , currently I am trying to implement a horizontal product list using react-window for maintaining virtualized. I wish to make api calls while scrolling and append new set of data to ...
Vishwa's user avatar
  • 11
0 votes
1 answer
137 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
50 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
1 vote
1 answer
898 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
984 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
0 votes
0 answers
143 views

How to make react-window VariableSizeList react on count of element in the list and change list height?

I need to create a large list component with more than 1000 items with VariableSizeList and the height of this list should increase until it reaches 220px. I tried to use AutoSizer but it didn't help.
bpGusar's user avatar
  • 129
2 votes
2 answers
816 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
  • 79
0 votes
0 answers
18 views

React-virtualized virtualisation fail

The rowRenderer in my List returns a tbody. My list is made of tbodies with many TRs inside each of them. The height of each TR depends on its content which means the TRs and tbodies have variable ...
Bardelman's user avatar
  • 2,248
0 votes
0 answers
119 views

React Virtualized grid text wrapping breaks the layout

When table wraps the multiline text it will break the grid layout and start to go under other items in the grid. (Image below) Im currently using React-Virtualized with AutoSizer and it had been ...
Heimot's user avatar
  • 61
0 votes
0 answers
159 views

How to make expanded rows in react-virtualized correctly?

Why scroll is jumping? I made the smallest window size (by making console bigger) https://codesandbox.io/s/react-virtualized-expandable-row-forked-9kgmu5?file=/src/Component.js I tried: this._listRef....
Noname's user avatar
  • 13
2 votes
0 answers
77 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
0 votes
0 answers
50 views

Child Row not Expanding after applying virtualization using react-virtualized in material-table

I am trying to achieve virtualization for material-table using react-virtualized. Being noob with regards to virtualization, I am unable to figure out the issue. Here is the link to sandbox : https://...
Atlas Bravoos's user avatar
2 votes
0 answers
602 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
0 votes
0 answers
532 views

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 ...
Julien Levallois's user avatar
0 votes
0 answers
108 views

How to do expanded row with react-virtualized Table?

I use react-virtualized library, and Table component from the library. I should render additional rows below when clicking on the row. It looks similar, but has different data. How to do it in best ...
UserName333'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
0 votes
1 answer
1k 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
  • 21
0 votes
1 answer
982 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
143 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
143 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
382 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
  • 666
0 votes
0 answers
185 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
1k 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
117 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,332
0 votes
1 answer
465 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
47 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
  • 666
0 votes
1 answer
364 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
130 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
504 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
  • 666
1 vote
0 answers
178 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
254 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
2 3 4 5
11