Stack Overflow
Stack Overflow

Questions tagged [react-virtuoso]

Use the tag to mark questions related to the react-virtuoso React library.

react-virtuoso is a React library to render virtual lists. Its main attractive feature is to render variable sized items out of the box, no manual measurements or hard-coding item heights is necessary. It also includes grouped mode with sticky headers, responsive virtualized grids, and virtualized tables.

See this comparison here between react-virtuoso and existing projects such as or

25 questions
6
votes
1 answer

Material UI Autocomplete virtualization w/ react-virtuoso

I have an almost working implementation of Material UI Autocomplete with the dropdown list virtualizised with react-virtuoso. The issue I'm seeing at the moment is that when navigating upwards (0:25 in the video), the list doesn't move past the…
Mbrevda
  • 2,888
  • 2
  • 27
  • 35
3
votes
2 answers

importing react-virtuoso throws error "You may need an appropriate loader to handle this file type."

My project works fine but after installing and importing react-virtuoso it throws error. ERROR in ./~/react-virtuoso/dist/index.mjs Module parse failed: C:\Users\Rocky\Documents\betterdash\node_modules\react-virtuoso\dist\index.mjs Unexpected token…
Rocky Caturan Mendiola
  • 31
  • 3
3
votes
1 answer

How to create custom components for Virtuoso?

I am using React Virtuoso to create a virtual list. By default, React Virtuoso renders its list as a
with
elements. I would like to instead render a
    with
  • elements and add some styling like so: const Item =…
mTv
  • 1,074
  • 17
  • 28
2
votes
2 answers

react-virtuoso unable to compile after fresh installation

I build react app ( typescript with material ui, I installed the package react-virtuoso (4.1.0) after the installation I run the project I'm getting an error: ./node_modules/react-virtuoso/dist/index.mjs 469:64 Module parse failed: Unexpected token…
Manspof
  • 598
  • 26
  • 81
  • 173
1
vote
1 answer

The dragged item is not displayed outside the virtualized list (react-virtuoso, @dnd-kit)

I am trying to use dnd-kit together with react-virtuoso and everything works, except that the dragged item is not displayed outside the virtualized list How to make the dragged item appear outside the virtualized list? High z-index on the dragged…
Hartaithan.
  • 326
  • 3
  • 14
1
vote
0 answers

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 difficult to display all unread messages at a…
bjjnarola
  • 11
  • 1
1
vote
1 answer

Rendering Header with react-virtuoso and material ui

I switched my table to a virtuoso table to help with loading time. And I am having trouble having it format my table properly. The table was perfectly aligned before when it was only a material ui table. Ive read over the documentation and tried…
CourtneyJ
  • 458
  • 6
  • 19
1
vote
1 answer

How to solve sorting with MUITable in TableVirtuoso requires manual scroll inside table to actually happen?

Problem I try to use a virtualized table with MUI table and TableVirtuoso described in their docs and to enable sorting like here. In that sorting example the actual sorting is realized while rendering the rows from the data array, but the…
bohrsty
  • 406
  • 6
  • 17
1
vote
0 answers

Table virtuoso hover on row

I'm using react-virtuoso with material ui, I'm trying to hover on specific row and add action when hover. example of the code: https://codesandbox.io/s/hqt3js I tried to add in rowContent function render function rowContent(_index:…
Manspof
  • 598
  • 26
  • 81
  • 173
1
vote
0 answers

React Virtuoso: Making a list of custom items

I am trying to make a custom component that utilizes React Virtuoso to make a list that renders chat bubbles. I think I am missing some understanding, particularly how the prop itemContent works. Based on the example given in the official…
Ymi
  • 609
  • 6
  • 18
1
vote
1 answer

React virtuoso - How it works behind the scenes

Everyone. I'm researching about react-virtuoso. It's a new repository for efficiently rendering large component list. It's pretty new. I'm getting of stuck about how it works. Why react virtuoso can overcome problems of react-virtualized? Thanks a…
maitrungdong
  • 45
  • 5
1
vote
0 answers

Full Screen for youtube iframe not working when hosted on react-virtuoso on Android Webview

We have a site with youtube iframe video list (https://developers.google.com/youtube/iframe_api_reference). Only with this list component, switching to "full screen mode" not working good. It's entering to the full screen mode but exists from the…
Omtechguy
  • 3,321
  • 7
  • 37
  • 71
1
vote
0 answers

React Virtuoso Load More Button

I am reading the react virtuoso documentation and it has the following example. When replicating it in, I get the error that this generateUsers function is not defined. Its my first time using virtuoso so I am a bit lost with the docu. Any hint is…
elisa
  • 229
  • 1
  • 2
  • 8
0
votes
0 answers

Page Unresponsive While Rendering a Same React-virstuso Component with different data set

i have a customized react-virtuso table with a each row have a accordions like expand collapse row , i splitted the code in 3 different files i have a data set in one file then mapping the data set in to the react-virtuso , when i am running my code…
Aravinth K
  • 1
  • 1
0
votes
1 answer

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 data. when we scroll-up it show the already fetch…
shafa vp
  • 89
  • 7
1
2