# 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"
/>
```