# Table

## Overview

_[Design to fill]_

- **When to use**: _[Design to fill]_
- **When not to use**: _[Design to fill]_

## Anatomy

_[Design to fill]_

## Variants

| Prop       | Effect                                                       |
| ---------- | ------------------------------------------------------------ |
| `bordered` | Renders the table with borders. Enabled by default (`true`). |

## Props / API

The `Table` component is a compound component. `Table` renders the root `<table>`, and its sub-components (`Table.Header`, `Table.Body`, `Table.Foot`, `Table.Row`, `Table.Cell`, `Table.Header.Cell`, `Table.SkeletonBar`) render the corresponding semantic table elements.

### `Table`

Renders the root `<table>` element.

| Prop       | Type      | Default | Description                     |
| ---------- | --------- | ------- | ------------------------------- |
| `bordered` | `boolean` | `true`  | Renders the table with borders. |

Extends `React.HTMLAttributes<HTMLTableElement>`. All standard `<table>` attributes are forwarded via `...rest`.

### `Table.Header`

Renders the `<thead>` element.

Extends `React.HTMLAttributes<HTMLTableSectionElement>`. All standard `<thead>` attributes are forwarded.

### `Table.Header.Cell`

Renders a header cell `<th>` element. Available as `Table.Header.Cell`.

Extends `React.ThHTMLAttributes<HTMLTableCellElement>`. All standard `<th>` attributes are forwarded, including `scope`, `colSpan`, and `rowSpan`. A custom `className` is merged with the component's base class.

### `Table.Body`

Renders the `<tbody>` element.

Extends `React.HTMLAttributes<HTMLTableSectionElement>`. All standard `<tbody>` attributes are forwarded.

### `Table.Foot`

Renders the `<tfoot>` element.

Extends `React.HTMLAttributes<HTMLTableSectionElement>`. All standard `<tfoot>` attributes are forwarded.

### `Table.Row`

Renders a `<tr>` element.

| Prop         | Type      | Default | Description                     |
| ------------ | --------- | ------- | ------------------------------- |
| `isSelected` | `boolean` | -       | Applies the selected row style. |
| `isActive`   | `boolean` | -       | Applies the active row style.   |

Extends `React.HTMLAttributes<HTMLTableRowElement>`. All standard `<tr>` attributes are forwarded via `...rest`.

### `Table.Cell`

Renders a data cell `<td>` element.

Extends `React.TdHTMLAttributes<HTMLTableCellElement>`. All standard `<td>` attributes are forwarded, including `colSpan` and `rowSpan`. A custom `className` is merged with the component's base class.

### `Table.SkeletonBar`

Renders a loading placeholder bar (a `<div>`) intended for use inside cells while data is loading.

| Prop    | Type                           | Default | Description                         |
| ------- | ------------------------------ | ------- | ----------------------------------- |
| `width` | `React.CSSProperties["width"]` | -       | Sets the width of the skeleton bar. |

## States

- Default (idle)
- Selected row (`Table.Row` with `isSelected`)
- Active row (`Table.Row` with `isActive`)
- Loading (cells containing `Table.SkeletonBar`)

## Code examples

```tsx
import { Table } from "@mylighthouse/prism-react";

export default function TableExample(): React.JSX.Element {
  return (
    <Table>
      <Table.Header>
        <Table.Row>
          <Table.Header.Cell scope="col">Name</Table.Header.Cell>
          <Table.Header.Cell scope="col">Role</Table.Header.Cell>
          <Table.Header.Cell scope="col">Years</Table.Header.Cell>
          <Table.Header.Cell scope="col">Status</Table.Header.Cell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row isSelected>
          <Table.Cell>Ada Lovelace</Table.Cell>
          <Table.Cell>Engineer</Table.Cell>
          <Table.Cell>12</Table.Cell>
          <Table.Cell>Active</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Grace Hopper</Table.Cell>
          <Table.Cell>Engineer</Table.Cell>
          <Table.Cell>9</Table.Cell>
          <Table.Cell className="custom-cell">
            <Table.SkeletonBar width="60%" />
          </Table.Cell>
        </Table.Row>
      </Table.Body>
      <Table.Foot>
        <Table.Row>
          <Table.Cell colSpan={4}>2 people</Table.Cell>
        </Table.Row>
      </Table.Foot>
    </Table>
  );
}
```

## A11y intent

_[Design to fill]_

- The component renders real semantic table elements (`<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`), so row/column relationships are conveyed to assistive technology without extra ARIA.
- Set `scope` on header cells so each data cell is associated with its header.
- Provide a `<caption>` to give the table an accessible name describing its content.
- While loading, `Table.SkeletonBar` is a purely visual placeholder, communicate the loading state to assistive technology separately.