NoData

An empty state for a data source that returned no records.

VerifiedSince 0.3.4

Usage

Basic

Loading demo...

Best Practices

Use it when a data source loaded and returned no records; offline, access, loading, and no-match states have their own components.
Keep copy data-specific: "No invoices yet" says more than "Nothing here".
Offer an action only when the current user can actually create or import the data.
Use surface="card" in dashboards and table panels so the empty region matches the loaded container.

API Reference

Takes every TxEmptyState prop, event, and slot except variant, which is fixed to no-data.

Props

Prop	Type	Default	Description
`title`	`string`	preset title	Overrides the preset title.
`description`	`string`	preset description	Why the data is empty, or how to add some.
`icon`	`TxIconSource \| string \| null`	preset illustration	Replaces the illustration; `null` hides the icon area.
`iconSize`	`number`	size preset	Icon size in px.
`layout`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Content alignment.
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Spacing and illustration size.
`surface`	`'plain' \| 'card'`	`'plain'`	`card` adds a card border.
`primaryAction`	`EmptyStateAction`	-	Generated primary action.
`secondaryAction`	`EmptyStateAction`	-	Generated secondary action.
`actionSize`	`TxButtonProps['size']`	`'sm'`	Default size of the generated buttons.
`loading`	`boolean`	`false`	Shows a spinner when no custom icon is given.

Events

Event	Params	Description
`primary`	-	Fires when the generated primary action is clicked.
`secondary`	-	Fires when the generated secondary action is clicked.

Slots

Slot	Props	Description
`icon`	-	Replaces the illustration or icon.
`title`	-	Replaces the title.
`description`	-	Replaces the description.
`actions`	-	Replaces the generated primary and secondary buttons.

Types

EmptyStateAction

Field	Type	Default	Description
`label`	`string`	required	Button label.
`type`	`TxButtonProps['type']`	-	Semantic button type, such as `primary`.
`variant`	`TxButtonProps['variant']`	-	Visual button variant.
`size`	`TxButtonProps['size']`	`actionSize`	Size of this button.
`disabled`	`boolean`	`false`	Disables the button.
`icon`	`string`	-	Button icon class.

Technologies

Source: packages/tuffex/packages/components/src/no-data/.

packages/tuffex/packages/components/src/no-data/index.ts