<!-- source-hash: 646e60a86ac75ae22a638fb221c00ad2 -->
Renders a centered empty state UI within a table or data container, displaying an icon, message, and optional action button when no data is available.

## Key Components

- **`TableEmptyState`** *(deprecated)* — Main exported component. Use `DataTableEmpty` from `data-table` instead.

## Props (`TableEmptyStateProps`)

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `message` | `string` | `'No data available'` | Text displayed below the icon |
| `icon` | `ReactNode` | `<FileX2 />` | Custom icon override |
| `action` | `{ label: string; onClick: () => void }` | `undefined` | Optional action button |
| `className` | `string` | `undefined` | Additional CSS classes |

## Usage Example

```typescript
// ⚠️ Deprecated — prefer DataTableEmpty from data-table
import { TableEmptyState } from './table-empty-state'

// Basic usage
<TableEmptyState message="No records found" />

// With custom icon and action
<TableEmptyState
  message="No devices available"
  icon={<ServerOff className="w-12 h-12" />}
  action={{
    label: "Add Device",
    onClick: () => router.push('/devices/new')
  }}
/>
```

> **Deprecated:** This component is superseded by `DataTableEmpty` from the `data-table` package, which provides enhanced features and consistent data table integration. Migrate existing usages when possible.