TableGrowing

<ui5-table-growing> | Since 2.0.0

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 mode="Button" text="More" slot="features"></ui5-table-growing>
</ui5-table>

Notes:

• When the ui5-table-growing component is used with the Scroll mode and the table is currently not scrollable, the component will render a growing button instead to ensure growing capabilities until the table becomes scrollable.

ES6 Module Import

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

Basic Sample

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

Properties

mode

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, a growing button will be rendered instead to ensure growing functionality.
Type	"Button" | "Scroll" (value descriptions in: TableGrowingMode)
Default	"Button"

subtext

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

text

Description	Defines the text that will be displayed inside the growing button. Has no effect when mode is set to Scroll. Note: When not provided and the mode is set to Button, a default text is displayed, corresponding to the current language.
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
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

CSS Custom States

No CSS custom states available for this component.

More Samples

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.