Questions tagged [virtualscroll]
A UI technique dedicated to increase the performance of large scrollable lists by rendering only a small portion of the data at a moment and virtualising other parts of the dataset, so that the scrollbar parameters remain consistent and a user experiences the result interface close to the original one (without virtualisation)
virtualscroll
131
questions
2
votes
0
answers
48
views
How to implement virtual horizontal scroll for the Antd table?
I am experiencing performance issues with an Ant Design (Antd) table containing more than 200 columns. You can preview the problem here: Antd Table. AntD supports vertical virtual scrolling, but not ...
- 21
0
votes
0
answers
25
views
how to style item with grid-template-columns: repeat(4, minmax(0, 1fr)) in virtual scroll
https://codepen.io/pen?editors=0010
how to make in virtual scroll list item to grid-template-columns: repeat(4, minmax(0, 1fr)) maybe cause items has style absolute, i dont know, in general i need to ...
- 1
0
votes
0
answers
39
views
With `react-window`, The sticky table header breaks away when scrolling
I am building the table with react-window and react-window-infinite-loader to these requirements.
Requirements
Vertical direction
Infinite scroll
List virtualization
Fixed height of table
The sticky ...
- 71
0
votes
0
answers
145
views
Stop Angular virtual scroll view from jumping when window is resized and virtual scroll items are re-rendered
I have a list displayed with Angular CDK virtual scroll but using a custom scroll strategy to accommodate variable and changeable height.
The heights for each items are estimated using a constant size ...
- 228
0
votes
0
answers
16
views
ngx-virtual-scroll #header doesn't work - scrolls header in html table even with #header included in thead element
Issue is that the header in my table scrolls when I want the header row to stick.
The Css/Html
virtual-scroller {
height: 37.7rem;
min-width: 800px;
thead th {
background: white;
...
- 1
2
votes
1
answer
140
views
Virtual scroll implementation causes scrolling down to scroll to the end
I tried to write a virtual scroll in pure JS, but when I scroll down, the scrolling does not stop. I can't figure out what's causing the infinite scrolling.
To emulate scrolling, I use two containers, ...
- 23
0
votes
0
answers
97
views
Virtual Scrolling Issues in Kendo UI for Angular
I am using Kendo UI Virtual Scrolling for my component which is in Angular. I have defined below properties in kendo grid.
The virtual scroll isnt working and displays all records on the page.
I dont ...
- 15
0
votes
0
answers
283
views
Issue with Prime React Infinite scroll lazy with loading
I'm currently working with a large dataset and have implemented virtual scrolling along with lazy loading to improve performance.
However, I'm encountering a few issues that I'd like assistance with ...
0
votes
0
answers
40
views
Angular Drag Drop Resize With virtual Scroller
I am seeking assistance to identify a drag-and-drop, resize, and virtual scroller library compatible with the following Angular versions
"@angular/cdk": "^6.4.7", "@angular/...
0
votes
0
answers
462
views
Angular cdk Virtual scroll with lazy loading(infinite scroll
Hi in my case i have used an angular cdk virtual scroll the scroll element should be in parent so i achieved it using (cdkVirtualScrollingElement) below code:
<ng-scrollbar class="example-...
0
votes
0
answers
38
views
How to implement temporarily disabling AdjustmentListener of JScrollPane in Java Swing
I have a code to load data when scroll is performed. Suppose I scroll, the loadData method is called and is in progress. If during this time I keep scrolling, even though the scrollbar is not moving ...
- 73
0
votes
0
answers
74
views
How to increase software rendering video performance in Vue js?
Let's assume I have a thousand of object array which includes .mp4 came from cloudinary. I've also tried to transform into .webm type to compress file sizes but somehow it still didn't much reduce the ...
- 13
0
votes
0
answers
57
views
Virtual Scroller in a table
I am trying to put my RecycleScroller in a table and I can't make it work
<RecycleScroller
class="scroller"
page-mode
:items="store.clinicData.value[store....
- 23
0
votes
1
answer
1k
views
Trying to use Virtual Scroller in Vue 3 But the items are buffering
I need to display a large number of data but I can't make the virtual scroller work
<RecycleScroller
class="scroller"
page-mode
:items="store.clinicData.value[store....
- 23
0
votes
1
answer
895
views
How can I use vue-virtual-scroller with vueuse useInfiniteScroll?
What I want to show is that I want to show several components with variable sizes using infinite scrolling and virtual scrolling.
So I try to use vue-virtual-scroller and useInfiniteScroll.
But when I ...
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 ...
- 83
0
votes
0
answers
366
views
Angular - Virtual scrolling remembering position
When a user select an option within the virtual scrolling it takes them to another route. When clicking the back button I want them to be in the same position within the virtual scroll.
I am injecting ...
- 408
2
votes
1
answer
1k
views
PrimeNG table with virtualScroll not showing border around rows properly
I am using PrimeNG table with virtualScroll like so
<p-table
[value]="filteredData"
scrollHeight="37rem"
[scrollable]="true" #tableEl
[virtualScroll]=&...
- 1,813
0
votes
1
answer
236
views
How to register a plugin to use inside a component library running by storybook?
I want to use a vue-virtual-scroller in my component library which requires to be registered as a plugin via app.use() method.
However, the components lib has not app instance due it is running by ...
- 323
1
vote
0
answers
268
views
How to apply list virtualization using React window when infinite scroll is implemented using React-Query
I am making a news app and I have implemented infinite scroll using React Query. But my cocern was as more and more dom elements get added to the dom because of infinite scroll the dom gets heavy . To ...
- 31
0
votes
1
answer
397
views
How to load the children on demand in react checkbox tree along with virtual scrolling
import React, { us
eState } from 'react';
import CheckboxTree from 'react-checkbox-tree';
import 'react-checkbox-tree/lib/react-checkbox-tree.css';
...
0
votes
0
answers
1k
views
Implementing virtual scrolling in Vue.js
I'm trying to implement virtual scrolling behavior using vue-virtual-scroller library. First off, I tried to use 'useVirtualList' component from VueUse library, but I couldn't find my way in there. ...
- 1
1
vote
0
answers
406
views
Expansion panel inside dynamic scroller (vue-virtual-scroller)
I want to render a list of components using the DynamicScroller in the vue-virtual-scroller package.
This is my template:
<DynamicScroller :items="toDos" :min-item-size="190&...
- 291
0
votes
1
answer
1k
views
Implement virtual scrolling from scratch in angular 14
I am working on a project where I need to implement a virtual scrolling component in Angular without using any third-party libraries. I found this article about building a virtual scroll in React(...
- 103
1
vote
1
answer
1k
views
cdk virtual scroll issue when ever scrolling it down items are getting displayed slowly and sometimes blank for 2 secs
i am using angular virtual scroll in project so when ever i am scrolling it down items are loading but flickering for micro sec
trying with maxBufferPx and minBufferPx and positions to fix but not ...
- 21
5
votes
1
answer
4k
views
Vue - virtual scroll for table
I'd like you to recommend me a package that can take advantage of a virtual scroll / recycler scroll for a table in Vue.
I tried these two libraries:
https://github.com/tangbc/vue-virtual-scroll-list
...
- 3,410
3
votes
3
answers
813
views
How to prevent/stop scrolling on ngx-virtual-scroller on items replace?
I'm using ngx-virtual-scroller with a additional toggle component on top.
On user toggle additional items are added to virtual scroller.
This results in automatic scroll behaiviour, if items which are ...
- 1,671
2
votes
1
answer
2k
views
How to add virtual scrolling to an ant design table with custom components?
I am looking for a way to add virtual scrolling to my ant design table. I found some libaries to achieve that (virtualized-table-for-antd, antd-virtualized, ...), but they seams be no longer under ...
- 139
2
votes
1
answer
752
views
How to lazy load angular stand alone components with Virtual scrolling?
I need help understanding how to use <cdk-virtual-scroll-viewport in concert with angular stand alone components. I have many components, each with their own svg template that I would like to lazy ...
1
vote
0
answers
777
views
Is there a way to scroll on a site that uses virtual scroll in Playwright?
I'm attempting to scroll on a page that has virtual scrolling, but it doesn't seem to scroll at all. If I disable virtual scrolling on the site it will start to scroll correctly using:
await page....
- 115
5
votes
2
answers
2k
views
How to test an infinite scroll component in Cypress
I have an dynamically loaded table based on an infinite-scroll component. I can test the loaded items as follows, but only 20 items are loaded at a time.
How can I repeat until the 500th item comes ...
- 53
1
vote
1
answer
921
views
Angular Material CdkVirtualScrollViewport getRenderedRange() method always return {start : 0, end: 0}
I'm trying to implement Angular Material virtual scrolling, but my items have different sizes. So I must code a custom implementation of VirtualScrollStrategy.
The thing is, I need to use the ...
- 11
1
vote
1
answer
382
views
How to implement virtual scrolling in wxwidgets
I am using wxScrolledWindow to display data(in rows and columns form). For example, I have 4 columns and around 1200 rows(all of which have the same height). Say first column represents name, 2nd ...
- 475
0
votes
1
answer
99
views
What is the most efficient way of virtualize large data?
I have a list of cards that contains charts, images on it. Since the chart data and image requests slowdown my application, I thought to follow a virtualization technique. I'm currently using ngx-...
- 45
1
vote
1
answer
1k
views
Primeng Table - is it possible to combine scrolling in both directions AND virtual scrolling?
Is it possible to use the table with scrolling in both directions AND virtual scrolling?
E.G. if I use:
<p-table
[columns]="startColumns"
[value]="data"
[scrollable]=...
3
votes
0
answers
717
views
Angular - Horizontal virtual scrolling with multiple columns
I would like to build the attached functionality, where I have around 20k items. I have tried mat cdk virtual scroller, but it is not working as it provides a single column with a horizontal scroll.
...
- 31
1
vote
1
answer
1k
views
How to fit non-list items into virtual scroll using Angular Material CDK
I am currently trying to understand the concepts of virtual scrolling and for that I extensively used the Angular documentation on Angular's CDK. I found out that they implemented virtual scrolling ...
- 137
0
votes
2
answers
2k
views
How to track the scroll event of individual cdk-virtual-scroll-viewport
I am using cdk-virtual-scroll-viewport to build pagination scroll in my app. I have two instances of cdk-virtual-scroll-viewport, Want to track individual scroll events and make API call for the ...
1
vote
0
answers
496
views
Cypress Incorrect Behavior with Quasar Virtual Scroll Table and Sticky Header: NOT solved by { scrollBehavior: false }
I am using Quasar 2 to create a virtual-scroll table with a sticky header. The table loads results dynamically and the default number of initially loaded results is 100.
The table header is sticky and ...
- 23
1
vote
1
answer
1k
views
How to implement virtual scroll dropdown using Kendo in Angular?
I have a huge data set coming from a API. Rather than showing all those data in the dropdown at first, I want to call the server API and get the results when user scroll downs through the dropdown.
...
- 107
-1
votes
1
answer
160
views
JqxGrid Virtual scrolling and pagination
As the user scrolls up, in this scenario should request go again and get new data or it shows previously loaded data?
In my case every time a new request has gone to the server. How I handle it?
- 677
2
votes
0
answers
234
views
Use Angular Virtual Scrolling with a ui5-table web component having a sticky header
When I use Angular Virtual Scrolling with a ui5-table web component having the sticky-column-header flag set to true the column headers move to the bottom when scrolling down (randomly jumping between)...
- 95
0
votes
1
answer
2k
views
Virtual scrolling Not working in Angular with response data- cdk-virtual-scroll-viewport
I am not able to bind the cdk-virtual-scroll-viewport with data in my Angular html.
This is the data in my jobLists array which is assigned with response data in ngOnInit
In my html class i have ...
- 2,199
1
vote
0
answers
566
views
Angular Material multi select component with virtual-scroll
I'm trying to create a custom multi select component, based on the angular-material select component (v10), with virtual-scroll and a custom search input inside the component's overlay.
I also added a ...
- 11
0
votes
2
answers
2k
views
Angular CDK virtual scrolling issue
Having issue to render huge list by using Angular CDK virtual scrolling.
Need set the itemsize to 1 to load the list properly.
Expected to load the list according to viewport size.
But it load far far ...
- 103
10
votes
5
answers
14k
views
Scroll to bottom with cdk-virtual-scroll (Angular 8)
Goal
Display a list of messages and scroll to the bottom when a new message is received, even when I am at the top. I would like to scroll fully bottom even with elements of different heights.
Problem
...
- 3,643
4
votes
0
answers
715
views
how to overflow horizontally out of position relative with vertical scroll-bar (create popover inside ngx-virtual-scroller)
I have a sidebar with a vertical virtual scroll. Whenever I hover over an item in this scroll container, a popover show up, giving more information about the item (for example in the container a name ...
- 313
1
vote
0
answers
4k
views
Angular virtual scroll with sticky column and header
I have a big list of data and I want to display it in a grid, but I don't want to display the whole list as it will be too much stuff on screen and be slow. I want to use a virtual scroll but I want ...
1
vote
2
answers
2k
views
How to track and save the last scroll position of a virtual scroll list in javascript
I have a virtual scrolling list built with JS in a Cordova app and I want to save the exact node that was at the top of the viewport after each scroll. The complication with virtual scroll is that ...
- 926
2
votes
1
answer
2k
views
Angular Virtual scroll performance issue on overriding scrollbar styles
I'm using cdk-virtual-scroll-viewport to apply virtual scrolling. Unfortunately, after applying styles to the scrollbar, scrolling is not smooth anymore. The native (right side) scrollbar is flashing ...
- 1,102