A table row for displaying a clear empty or filtered-results state.
| Name | Role | |
|---|---|---|
| Maya Chen | maya@example.com | Designer |
| Aarav Patel | aarav@example.com | Engineer |
| Sofia Garcia | sofia@example.com | Manager |
Installation
Copy the Source Code
Copy and paste the following code into your project:
table/data-table-empty/data-table-empty.svelte
table/data-table-empty/index.ts
Folder Structure
Folder Structure
Usage
data-table.svelte
Examples
Basic
| Name | Role | |
|---|---|---|
No results found There are no rows to display. | ||
With an action
| Name | Status | Team |
|---|---|---|
No matching rows Try clearing the current filters. | ||
Custom icon
| Invoice | Customer | Total |
|---|---|---|
No rows in this view This table view does not contain any matching rows. | ||
Props
Data table empty props
| Name | Type | Default | Description |
|---|---|---|---|
colspan | number | required | Number of visible table columns the empty row spans. |
title | string | "No results found" | Empty-state heading. |
description | string | "There are no rows to display." | Supporting empty-state text. |
icon | Snippet | SearchXIcon | Optional icon snippet rendered above the title. |
actions | Snippet | undefined | Optional action content such as a clear-filters button. |
class | string | undefined | Classes applied to the empty-state container. |