Data Display
DataTable
@tanstack/react-table 기반. 정렬/페이지네이션/선택/컬럼 가시성, 빈 데이터 시 Empty 자동, controlled/uncontrolled.
예제
| 홍길동 | hong@example.com | 30 |
| 김철수 | kim@example.com | 25 |
| 이영희 | lee@example.com | 28 |
설치 / Import
import { DataTable, type ColumnDef } from '@baneung-pack/ui';import { DataTable } from '@baneung-pack/ui/data-table';서브패스 import는 트리쉐이킹 친화 — 사용하지 않는 다른 컴포넌트는 번들에 포함되지 않습니다.
API
| Property | Description | Type | Default |
|---|---|---|---|
columns | ColumnDef 배열 (tanstack-table) | ColumnDef<TData>[] | — |
data | 행 데이터 | TData[] | — |
sorting / onSortingChange | 정렬 controlled | SortingState / OnChangeFn | — |
defaultSorting | 정렬 uncontrolled 초기값 | SortingState | — |
pagination / onPaginationChange | 페이지네이션 controlled | PaginationState / OnChangeFn | — |
pageCount | 서버 사이드 모드 — 총 페이지 수 (지정 시 manualPagination) | number | — |
rowSelection / onRowSelectionChange | 행 선택 | RowSelectionState / OnChangeFn | — |
columnVisibility / onColumnVisibilityChange | 컬럼 가시성 | VisibilityState / OnChangeFn | — |
showPagination | 페이지네이션 컨트롤 표시 | boolean | true |
emptyTitle / emptyDescription | 빈 상태 텍스트 | string | — |
getRowId | 커스텀 행 id 생성기 | (row, index) => string | — |