Data Table
정렬과 빈 상태가 필요한 구조화 데이터를 보여줍니다.
- 성숙도
- 후보
- 소스 경로
components/ui/data-table.tsx- 소스
- 소스
- 외부 의존성
@phosphor-icons/react
실제 미리보기
| 상태 | ||
|---|---|---|
| Laf ID | 정상 | 86 ms |
| lafetch | 공개 | 112 ms |
사용할 때
사용 기준
관리 목록처럼 사용자가 열 기준으로 데이터를 다시 정렬해야 할 때 씁니다.
사용하지 않을 때
정적 비교에는 Table을, 카드형 탐색에는 Item을 씁니다.
변형과 상태
default고정 예시정렬 가능한 열과 정적 열을 구분합니다.
상태 Laf ID 정상 86 ms lafetch 공개 112 ms sorted직접 조작현재 정렬 열과 방향이 아이콘과 접근성 트리에 함께 나타나는지 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
상태 Laf ID 정상 86 ms lafetch 공개 112 ms empty고정 예시빈 상태가 모든 열을 가로질러 짧게 설명되는지 확인합니다.
상태 표시할 서비스가 없습니다.
접근성
정렬 버튼과 aria-sort를 연결하고 실제 Table 구조를 유지합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
columns | readonly DataTableColumn<Row>[] | 예 | 셀 렌더링과 선택적 정렬값을 정의합니다. |
rows | readonly Row[] | 예 | 표에 표시할 실제 데이터입니다. |
getRowKey | (row: Row) => string | 예 | 각 행의 안정적인 식별자를 반환합니다. |
emptyText | string | 예 | 표시할 행이 없을 때의 안내입니다. |
사용 예시
지원 importimport { DataTable, type DataTableColumn } from "@/components/ui/data-table"
<DataTable
aria-label="Services"
columns={columns}
rows={rows}
getRowKey={(row) => row.id}
emptyText="No services"
/>