# STable

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

### STable

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `columns?` | `STableColumn[]` | `[]` |  |
| `rows?` | `SRow[]` | `[]` |  |
| `rowKey?` | `string` | `'id'` | 행 식별 필드 |
| `selectable?` | `boolean` | `false` | 행 선택 체크박스 |
| `selected?` | `SRow[]` | `[]` |  |
| `resizable?` | `boolean` | `false` | 컬럼 너비 조절 |
| `width?` | `string` | — |  |
| `height?` | `string` | — |  |
| `stickyHeader?` | `boolean` | — |  |
| `stickyColumn?` | `STableStickyColumn` | — | 고정할 좌/우 컬럼 수 |
| `radius?` | `'default' \| 'useTop' \| 'full'` | `'default'` | border-radius 제어 |
| `noDataLabel?` | `string` | `'데이터가 없습니다.'` |  |
| `noDataSlot?` | `ReactNode` | — | 데이터가 없을 때 body 영역 전체를 대체하는 슬롯. 지정하면 `noDataLabel` 대신 이 콘텐츠가 헤더 아래 영역을 채우며, 버튼 등 인터랙션도 동작한다. |
| `isLoading?` | `boolean` | `false` |  |
| `dense?` | `boolean` | `false` |  |
| `noHover?` | `boolean` | `false` | true면 행에 마우스를 올려도 hover 배경(grey_05)을 표시하지 않는다 |
| `pagination?` | `STablePagination` | — | 페이지네이션 (있으면 하단 표시) |
| `useInternalPagination?` | `boolean` | `false` | 테이블 내부에서 페이지네이션을 직접 관리 (rows를 내부 슬라이싱) |
| `useRowsPerPageSelect?` | `boolean` | `false` | 페이지당 행 수 셀렉트 표시 |
| `rowsPerPageOption?` | `SSelectOption[]` | `DEFAULT_ROWS_PER_PAGE_OPTION` |  |
| `useVirtualScroll?` | `boolean` | `false` | 가상 스크롤 |
| `rowHeight?` | `number` | — |  |
| `virtualBuffer?` | `number` | `5` |  |
| `virtualEndThreshold?` | `number` | `10` |  |
| `tableId?` | `string` | — | 테이블 식별자 (없으면 자동 생성) |
| `className?` | `string` | — |  |
| `style?` | `CSSProperties` | — |  |

#### Events

| Event | Type | Description |
|-------|------|-------------|
| `onSelectedChange` | `(rows: SRow[]) => void` |  |
| `onPageChange` | `(page: number) => void` |  |
| `onRowsPerPageChange` | `(perPage: number) => void` |  |
| `onVirtualUpdate` | `(range: { from: number; to: number }) => void` |  |
| `onVirtualReachEnd` | `(info: { from: number; to: number; rowCount: number; threshold: number; }) =>…` |  |
| `onRowClick` | `(row: SRow) => void` | 행 클릭 |

#### Methods (ref)

| Method | Type | Description |
|--------|------|-------------|
| `isRowSelected` | `(row: SRow) => boolean` | 행 선택 여부 |
| `getIsAllChecked` | `(rows: SRow[]) => boolean \| null` | 주어진 행들의 전체 선택 상태 (true/false/null=indeterminate) |
| `getPaginationInfo` | `<union 2종>` | 내부 페이지네이션 정보 (useInternalPagination 아니면 null) |
| `getStickyStyle` | `(colIdx: number) => CSSProperties` | 컬럼 sticky 스타일 (CSS 변수 + 고정폭) |
| `setRowCount` | `(count: number) => void` | 가상 스크롤 총 행 수 설정 |
| `updateRowSelect` | `(row: SRow) => void` | 단일 행 선택 토글 (sd-table updateRowSelect) — onSelectedChange 발생 |
| `toggleSelectAll` | `(checked: boolean, rows: SRow[]) => void` | 주어진 행들 전체 선택/해제 (sd-table toggleSelectAll) — onSelectedChange 발생 |

## Dependencies

### Depends on

- [SCheckbox](../SCheckbox)
- [SCircleProgress](../SCircleProgress)
- [SIcon](../SIcon)
- [SPagination](../SPagination)
- [SSelect](../SSelect)

### Graph

```mermaid
graph TD;
  STable --> SCheckbox
  STable --> SCircleProgress
  STable --> SIcon
  STable --> SPagination
  STable --> SSelect
  style STable fill:#f9f,stroke:#333,stroke-width:4px
```