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".

Default Empty Hint

Custom Empty Text

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

Custom Text

Custom Image & Description

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

Image + Description

Custom Empty Slot

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

Custom Slot

Dynamic Toggle

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

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"