Table - Empty Data Hint

When the table has no data, display an empty state placeholder hint, supporting custom text, images, and slots.

Default Empty State

When data is an empty array, the table automatically shows an empty data hint with default text "No Data".

Name	Age	Department	Address

No Data

Default Empty Hint

Custom Empty Text

Customize the empty data hint text through the empty-text property.

Name	Age	Department	Address

No matching data found

Custom Text

Custom Image & Description

Set custom image and description text through the empty-config object.

Name	Age	Department	Address

Nothing here yet~

Image + Description

Custom Empty Slot

Fully customize the empty state display content through the #empty slot, including icons, text, and action buttons.

Name	Age	Department	Address

No Data, please try again later

Custom Slot

Dynamic Toggle

Toggle data state dynamically with buttons to experience switching between empty data and loaded data.

Name	Age	Department	Address

Data cleared, click the button to reload

Dynamic Data Toggle

API

Table Properties

Property	Description	Type	Default
empty-text	Text shown when data is empty	string	'No Data'
empty-config	Empty state config object	TableEmptyConfig	—

TableEmptyConfig

Property	Description	Type	Default
image	Empty state image URL	string	—
description	Empty state description (higher priority than empty-text)	string	—
render	Custom render function	() => VNode	—

Slots

Slot	Description
empty	Custom empty data content, highest priority

Priority

Empty state display content priority from high to low:

1. #empty slot — Fully custom content
2. emptyConfig.render — Render function
3. emptyConfig.image + emptyConfig.description — Image and description
4. empty-text — Simple text hint
5. Default — "No Data"