<!-- source-hash: 3ff43cdc4cea745588c40e71214b7483 -->
Renders the body of a `DataTable` component, handling three states: loading skeleton, empty state, and populated rows with optional padding placeholders.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `DataTableBody` | Component | Main body renderer consuming `DataTableContext` |
| `DataTableBodyProps` | Interface | Props interface with generic row type `T` |

### Key Props

| Prop | Type | Description |
|------|------|-------------|
| `loading` | `boolean` | Shows skeleton rows when `true` and data is empty |
| `skeletonRows` | `number` | Number of skeleton rows to render (default: `10`) |
| `emptyMessage` | `string` | Message shown when data is empty (default: `'No data available'`) |
| `minRows` | `number` | Pads with invisible rows to maintain stable table height |
| `onRowClick` | `(item: T) => void` | Click handler for entire row (skips `data-no-row-click` elements) |
| `rowHref` | `(item: T) => string` | Converts rows to `next/link` anchors; ignored if `onRowClick` is set |
| `rowClassName` | `string \| ((item, index) => string)` | Per-row class; use `useCallback` to preserve `React.memo` |
| `compact` | `boolean` | Enables dense row height |

## Usage Example

```typescript
import { DataTable } from './data-table'
import { DataTableBody } from './data-table-body'

const handleRowClick = useCallback((item: MyItem) => {
  router.push(`/items/${item.id}`)
}, [])

const getRowHref = useCallback((item: MyItem) => `/items/${item.id}`, [])

<DataTable columns={columns} data={data}>
  <DataTableBody<MyItem>
    loading={isLoading}
    skeletonRows={10}
    minRows={10}
    emptyMessage="No items found"
    onRowClick={handleRowClick}
    compact={false}
  />
</DataTable>
```

> **Performance tip:** Always memoize `onRowClick`, `rowHref`, and function-form `rowClassName` with `useCallback` to preserve `React.memo` optimization on `DataTableRow`.