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. Note: The ui5-table-group-row component is not supported by the virtualizer. Only ui5-table-row elements can be virtualized.

ES6 Module Import

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

Properties

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

rowCount

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

rowHeight

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

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.

CSS Custom States

No CSS custom states available for this component.