131 questions
0
votes
0
answers
49
views
How to virtualize M×N Kanban board with cell-level API calls and dynamic heights?
I'm implementing a complex Kanban board with virtualization and facing several challenges. The board has M rows (sections) and N columns (statuses), where each cell makes its own API call to fetch ...
2
votes
1
answer
291
views
Large React Aria Components dropdown with virtualized rows
I need to implement a dropdown with react-aria-components but one of the use cases has a large amount of instances, provoking a very slow experience. For that reason, I want to use a row ...
- 1,647
0
votes
0
answers
58
views
Why isScrolling not working when using react-window?
I want to display the text "scrolling" when I am scrolling but nothing happens. It does not show the text. What I am doing wrong ?
code:
<List
innerElementType="ul"...
- 41
0
votes
1
answer
68
views
Arrow Key Scrolling Not Working in react-select with react-window
Issue: Arrow Key Scrolling Not Working in react-select with react-window
I am experiencing an issue where I am unable to scroll through the react-select dropdown list using the up and down arrow keys ...
0
votes
1
answer
66
views
Make the first column and grid header sticky
I am using react-window to optimize thousands of records from API.
The code works well except that the first column doesn't scroll down with the Grid. Also, The overflow of records should be the same ...
- 871
0
votes
1
answer
54
views
Rendering a large list of varying width elements that are floated to the left [closed]
I am trying to get react-window to work with a list of float: left buttons in a resizable, scrollable window.
I have a list like the following (all with bootstrap styled buttons floated left)
|[--1--][...
1
vote
0
answers
447
views
How to dynamically calculate heights of components in a VariableSizeList in React?
I'm using React with Material-UI and the react-window library's VariableSizeList component to render a list of dynamically sized components. Each component's height is determined after it has rendered,...
0
votes
1
answer
89
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 ...
0
votes
0
answers
236
views
Using react-table <VariableSizeList> with react-window could not achieve both at same time 1.Virtulization 2.Sticky columns on scroll
I am using for achieving virtualization. But not able to apply the property of sticky to the same.
handleScroll(e, TableRef)}
className="variable-size"
>
{RenderRowVirtualized}
...
0
votes
1
answer
538
views
React: Rendering Css cards with react-window and react-window-infinite-loader
I'm working on a React project where I'm using the libraries react-window and react-window-infinite-loader to render a large list of project cards. Each project card contains an image, which is stored ...
- 3,533
0
votes
1
answer
515
views
react-window with next 13 layout
I have an app with news page, which i'd like to impletement infinite scrolling for.
I'm using next 13, and i have app wide nav and footer setup via root layout.
I'm trying to use react-window to set ...
- 19
3
votes
0
answers
99
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 ...
- 158
3
votes
0
answers
557
views
react-window: How to update itemSize when items changes? I'm getting gaps when filtering items
I'm rendering a sidebar that can be filtered down every time someone types into the searchbar. A simplified version of my code is below. Everything works except for the fact that there are gaps when ...
- 13.6k
1
vote
1
answer
3k
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 ...
- 41
1
vote
0
answers
159
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 ...
- 7,875
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 <...
- 797
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';
...
- 5,597
1
vote
0
answers
423
views
Close MenuItem when using TextField with select with react-window (FixedSizedList)
I'm using <FixedSizeList> from react-window package inside TextField with the select property.
The issue is that the onChange event of the TextField doesn't work with <FixedSizeList>.
So I ...
- 1,533
0
votes
1
answer
2k
views
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, ...
- 4,044
0
votes
1
answer
214
views
onSectionRendered in react-window
In react-virtualized, there is a prop called "onSectionRendered" to define a function
which will be called after cells have been rendered.
What way is there to achieve this with react-window?...
- 1,372
1
vote
2
answers
1k
views
Animate entry of (only new) elements in a virtualized list
I am using react-window FixedSizedList and react-virtualized-auto-sizer Autosizer components to build a list/table UI element that may contain thousands of items that also receives new items via a ...
- 1,972
2
votes
1
answer
1k
views
How to prevent rerendering of children inside List component of react-window
Problem
I'm trying to achieve a behaviour, when merely changed items of the list are being updated and rerendered with new data.
I wrote a component which is being updated when timer is off:
import { ...
- 595
0
votes
1
answer
468
views
The sort direction is reset when the data drawn by react-window is updated
Achievement goal
Draw a large amount of data on the table
Sticky header (scroll only the body)
Sortable by clicking the cell in the header
The data in that row can be updated by pressing the button
...
- 11
0
votes
1
answer
709
views
Windowing with Antd in Next.js breaks tooltips and popovers
I'm experimenting with the windowing technique in Next.js with Antd, and I made this simple app that has this index.tsx page:
import { CSSProperties } from 'react'
import type { NextPage } from 'next'
...
- 843
0
votes
1
answer
813
views
After successfully adding data, upon scrolling an item was removed
I am using react-table with react-window-infinite-loader and react-window for infinite scrolling. Initially the table has 20 items(data) on fetch from API.
After adding a new data into my table it ...
