<!-- source-hash: f96e91397f5dd889c77eca76b3638ae9 -->
Empty state component for data tables, displaying a message, optional icon, and optional action button when no data is available.

## Key Components

### `DataTableEmptyProps`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `message` | `string` | `'No data available'` | Text shown below the icon |
| `icon` | `ReactNode` | `<FileX2 />` | Custom icon; falls back to `FileX2` from lucide-react |
| `action` | `{ label: string; onClick: () => void }` | — | Optional CTA button rendered below the message |
| `className` | `string` | — | Additional CSS classes for the wrapper |

### `DataTableEmpty`
A client component that renders a centered empty state card using ODS design tokens for spacing, colors, and borders.

## Usage Example

```typescript
// Basic usage
<DataTableEmpty />

// With custom message
<DataTableEmpty message="No tickets found" />

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

// Inside a table when rows are empty
{rows.length === 0 && (
  <DataTableEmpty
    message="No results match your filters"
    action={{ label: "Clear Filters", onClick: resetFilters }}
  />
)}
```