# SKeyValueTable

> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.

### SKeyValueTable

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `fields?` | `SKeyValueField[][]` | `[]` | 2차원 배열. row → [th|td] 필드들 |
| `values?` | `Record<string, unknown>` | `{}` | field name을 key로 하는 값 객체 (`{ [name]: value }`). 지정 시 해당 field의 값으로 사용되며, field별 `options.value`보다 우선합니다. `onChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다. |
| `search?` | `boolean` | `false` | 우측 검색 패널 |
| `radius?` | `'default' \| 'useTop' \| 'full'` | `'default'` | border-radius 제어 |
| `className?` | `string` | — |  |
| `style?` | `CSSProperties` | — |  |

#### Events

| Event | Type | Description |
|-------|------|-------------|
| `onChange` | `(detail: SKeyValueChangeDetail) => void` | 값 변경 (sdChange) |
| `onSearch` | `() => void` | 검색 클릭 (sdSearch) |

## Dependencies

### Depends on

- [SButton](../SButton)
- [SCheckbox](../SCheckbox)
- [SDatePicker](../SDatePicker)
- [SDateRangePicker](../SDateRangePicker)
- [SFilePicker](../SFilePicker)
- [SIcon](../SIcon)
- [SInput](../SInput)
- [SNumberInput](../SNumberInput)
- [SRadio](../SRadio)
- [SSelect](../SSelect)
- [STextarea](../STextarea)
- [STooltip](../STooltip)

### Graph

```mermaid
graph TD;
  SKeyValueTable --> SButton
  SKeyValueTable --> SCheckbox
  SKeyValueTable --> SDatePicker
  SKeyValueTable --> SDateRangePicker
  SKeyValueTable --> SFilePicker
  SKeyValueTable --> SIcon
  SKeyValueTable --> SInput
  SKeyValueTable --> SNumberInput
  SKeyValueTable --> SRadio
  SKeyValueTable --> SSelect
  SKeyValueTable --> STextarea
  SKeyValueTable --> STooltip
  style SKeyValueTable fill:#f9f,stroke:#333,stroke-width:4px
```