TableGrowing

info

This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.

The ui5-table-growing component is used inside the ui5-table to add a growing/data loading functionalities to the table.

The component offers two options:

• Button - a More button is displayed, clicking it will load more data.
• Scroll - additional data is loaded automatically when the user scrolls to the end of the table.

Usage

The ui5-table-growing component is only used inside the ui5-table component as a feature. It has to be slotted inside the ui5-table in the features slot. The component is not intended to be used as a standalone component.

<ui5-table>
	<ui5-table-growing type="Button" growing-text="More" slot="features"></ui5-table-growing>
</ui5-table>

ES6 Module Import

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

Properties

type

Description	Defines the mode of the ui5-table growing. Available options are: Button - Shows a More button at the bottom of the table, pressing it will load more rows. Scroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable, this option is the same as the Button.
Type	"Button" | "Scroll"
Default	"Button"

growingText

Description	Defines the text that will be displayed inside the growing button. Has no effect when type is set to Scroll. Note: When not provided and the type is set to Button, a default text is displayed, corresponding to the current language.
Type	string | undefined
Default	undefined

growingSubText

Description	Defines the text that will be displayed below the growingText inside the growing button. Has no effect when type is set to Scroll.
Type	string | undefined
Default	undefined

Slots

No slots available for this component.

Events

load-more

Description	Fired when the growing button is pressed or the user scrolls to the end of the table.
Type	CustomEvent

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

Growing with a Button

By setting the type to Button, a dedicated growing button will be rendered. You can customize the text via growingText and growingSubText.

Growing with scrolling

By setting the type to Scroll, the table will fire the load-more event, once you've reached the end of the table.

If the table is not scrollable, a growing button is rendered instead. The button will disappear once the table is scrollable.