# Periodic Table

The 18-column periodic table with separate lanthanide and actinide rows and a detail panel. Cells are colored by category.

It accepts any list of elements with the `PeriodicElement` shape. `ELEMENTS` from `@indoku/science` fits as-is (all 118 elements, computed period, group and category).

Group: Science

## Import

```tsx
import { PeriodicTable } from "@indoku/ui"
import { ELEMENTS } from "@indoku/science"
```

## Examples

### Basic usage

```tsx
function PeriodicTableBasic() {
  return <PeriodicTable elements={ELEMENTS} />
}
```

### Controlled selection

Read the selected element and compute with it.

```tsx
function PeriodicTableSelect() {
  const [selected, setSelected] = useState(26)
  const el = ELEMENTS[selected - 1]
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <PeriodicTable elements={ELEMENTS} selected={selected} onSelect={(e) => setSelected(e.number)} />
      <small>
        {el.name} ({el.symbol}) · Z = {el.number} · molar mass {molarMass(el.symbol).toFixed(3)} g/mol
      </small>
    </div>
  )
}
```

## Props

### PeriodicTable

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `elements` * | `readonly PeriodicElement[]` |  |  |
| `onSelect` | `(element: PeriodicElement) => void` |  | Called when a cell is clicked. |
| `selected` | `number` |  | Controlled selected atomic number. |

`*` = required. Style props and HTML attributes are accepted too.

## Accessibility

- Cells are buttons with the element name as label.

## See also

- Science Calculators: https://ui.indoku.org/docs/science-calculators
- Plot 3D: https://ui.indoku.org/docs/plot-3d