Overview
tng-empty-state shows a centered message when there is no data to display—for example inside a table body, a list, or a card. Use it with tng-table (via emptyText) or on its own. It accepts a title, optional message, and optional icon (e.g. emoji or icon character).
Quick example
Default and with message
<tng-empty-state
title="No items found"
message="Try adjusting your search or filters."
></tng-empty-state>No data available
No items found
Try adjusting your search or filters to find what you're looking for.
Usage
Use tng-empty-state when:
- A table or list has zero rows—either as the table's built-in empty view or inside a custom container.
- A search or filter returns no results—pass a contextual title and message.
- A section has no content yet—e.g. "No uploads", "No notifications".
For tng-table, you can set emptyText for a simple text line, or use a custom empty template with tng-empty-state for a richer layout.