laif-ds/dist/agent-docs/components/TableSkeleton.md

Design System di Laif con componenti React basati su principi di Atomic Design

# TableSkeleton

## Overview

Skeleton placeholder for tables. Renders a header row and a configurable number of body rows with skeleton cells. Supports an optional top-left corner cell with two labels.

---

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `headerRow` | `string[]` | `[]` | Column headers. If empty, headers are skeletons |
| `rowCount` | `number` | `5` | Number of skeleton rows |
| `columnCount` | `number` | `5` | Used when `headerRow` is empty to define columns |
| `className` | `string` | `undefined` | Additional wrapper classes |
| `cornerHeaderFrom` | `string` | `undefined` | Top-left corner label (top-left) |
| `cornerHeaderTo` | `string` | `undefined` | Top-left corner label (bottom-right) |

---

## Example

```tsx
import { TableSkeleton } from "laif-ds";

export function LoadingTable() {
  return (
    <TableSkeleton
      headerRow={["Name", "Email", "Role", "Status", "Actions"]}
      rowCount={8}
      className="mt-4"
    />
  );
}
```

### With Corner Headers

```tsx
<TableSkeleton
  headerRow={["Mon", "Tue", "Wed", "Thu", "Fri"]}
  cornerHeaderFrom="From"
  cornerHeaderTo="To"
/>
```