Virtual scrolling inside Lists and Tables

Open
#3,711 1 comment 0 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

Assessment

This issue has not been assessed yet.

Description

feature request Low Prio TOPIC P
Feature Request Description

Virtual scrolling inside list. See the list options for grow (you'll have to scroll down to it) or

this image.
image

Proposed Solution
What all solutions will need:

All solutions will need an item-height property.

Solution 1: Simplest to implement

Add another ListGrowingMode: VirtualScroll, which causes the scrollbar to be reflective of the whole loadable content, and fires the load-more event with parameters startIndex: number and endIndex: number. This requires the user to handle inserting the items at the right place.

Code Example: 
<ui5-list 
        id="infiniteScrollEx" 
        style="height: 300px" 
        growing="VirtualScroll" 
        item-height="28"
       <!-- Show busy at first, since no item is loaded. Start by firing the load-more event -->
        busy 
></ui5-list>

<script>
	const infiniteScrollEx = document.getElementById("infiniteScrollEx");

	infiniteScrollEx.addEventListener("load-more", (e) => {
		infiniteScrollEx.busy = true; // The first time, it is already true.
                const startIndex = event.details.startIndex;
                const endIndex = event.details.endIndex;

	        for(let i = startIndex; i < endIndex; i++) {
		        const li = document.createElement("ui5-li");
		        li.textContent = "Fruit name" + i;
                        // The following function doesn't exist. 
                        // see https://stackoverflow.com/a/39181175/9329985
		        infiniteScrollEx.appendChildAtIndex(li);
	        }
        
	        infiniteScrollEx.busy = false;
	});
</script>
Solution 2: A better solution, requiring more work

Provide a property, which is a function, that requests the right items.

Code Example: 
<ui5-list 
        id="infiniteScrollEx" 
        style="height: 300px" 
        growing="VirtualScroll" 
        item-height="28"
        item-count="10000"
></ui5-list>

<script>
	const infiniteScrollEx = document.getElementById("infiniteScrollEx");

	infiniteScrollEx.dataHandler = (startIndex, endIndex) => {
                // get info from a database or any other source
                const data = []
                // In this case, simply generate it
                for(let i = startIndex; i < endIndex; i++) {
		        const li = document.createElement("ui5-li");
		        li.textContent = "Fruit name" + i;
                        data.push(li);
	        }
                return data;
        }
</script>
Priority

Medium

Dominant language
TypeScript
Stars
1.8k
Forks
285
Avg merge
3d 2h
Merged PRs (30d)
59

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from UI5/webcomponents

All issues in UI5/webcomponents

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.