TableVirtualizer

<ui5-table-virtualizer> | Since 2.5.0

info

This component is not intended to be used in a productive enviroment. The API is under development and may be changed in the future.

The ui5-table-virtualizer component is used inside the ui5-table to virtualize the table rows, if the overflowMode property of the table is set to 'Scroll'. It is responsible for rendering only the rows that are visible in the viewport and updating them on scroll. This allows large numbers of rows to exist, but maintain high performance by only paying the cost for those that are currently visible.

Note: The maximum number of virtualized rows is limited by browser constraints, specifically the maximum supported height for a DOM element.

ES6 Module Import

import "@ui5/webcomponents/dist/TableVirtualizer.js";

Properties

rowHeight

Description	Defines the height of the rows in the table. Note: This property is mandatory for the virtualization to work properly.
Type	number
Default	45

rowCount

Description	Defines the total count of rows in the table. Note: This property is mandatory for the virtualization to work properly.
Type	number
Default	100

extraRows

Description	Defines the count of extra rows to be rendered at the top and bottom of the table. Note: This property is experimental and may be changed or deleted in the future.
Type	number
Default	0

Slots

No slots available for this component.

Events

range-change

Description	Fired when the virtualizer is changed by user interaction e.g. on scrolling.
Type	CustomEvent<RangeChangeEventDetail>
Parameters	first: number The 0-based index of the first children currently rendered last: number The 0-based index of the last children currently rendered
Bubbles	No
Cancelable	No

Methods

reset

Description	Resets the virtualizer to its initial state and triggers the range-change event.
Return type	void

CSS Parts

No CSS parts available for this component.

Basic Sample

Enhance your table with virtualization capabilities by incorporating the Virtualizer feature.

For effective table virtualization, the range-change event with its first and last parameters determines which rows are currently visible and need to be rendered. To ensure proper virtualization, you must set the following attributes:

• row-count for the Table: This attribute specifies the total number of rows in the table. It helps the virtualizer determine the number of rows to manage.

• row-height for the Table: This attribute defines the height of each row in the table. Consistent row height allows the virtualizer to calculate which rows are currently visible and need to be rendered.

• position for the TableRow: This attribute determines the position of each row within the table. Proper positioning ensures that rows are rendered in the correct location when the user scrolls.

By setting these attributes and handling the range-change event properly, the TableVirtualizer can efficiently manage and render only the rows that are visible when the user scrolls.