Tables
DataTable 컴포넌트의 다양한 구성을 확인합니다.
Basic Table
기본 5컬럼 테이블
ID | 이름 | 이메일 | 역할 | 상태 |
|---|---|---|---|---|
| 1 | 김철수 | [email protected] | 관리자 | 활성 |
| 2 | 이영희 | [email protected] | 편집자 | 활성 |
| 3 | 박민수 | [email protected] | 뷰어 | 비활성 |
| 4 | 최지은 | [email protected] | 편집자 | 활성 |
| 5 | 정하늘 | [email protected] | 관리자 | 대기 |
With Pagination
pageSize=3으로 페이지네이션 표시
ID | 이름 | 이메일 | 역할 | 상태 |
|---|---|---|---|---|
| 1 | 김철수 | [email protected] | 관리자 | 활성 |
| 2 | 이영희 | [email protected] | 편집자 | 활성 |
| 3 | 박민수 | [email protected] | 뷰어 | 비활성 |
총 7건
1 / 3
Empty Table
데이터 없는 상태
ID | 이름 | 이메일 | 역할 | 상태 |
|---|---|---|---|---|
| 데이터가 없습니다. | ||||
With Row Actions
마지막 컬럼에 수정/삭제 버튼
이름 | 이메일 | 역할 | 액션 |
|---|---|---|---|
| 김철수 | [email protected] | 관리자 | |
| 이영희 | [email protected] | 편집자 | |
| 박민수 | [email protected] | 뷰어 | |
| 최지은 | [email protected] | 편집자 | |
| 정하늘 | [email protected] | 관리자 |
Number Columns
숫자 데이터에 font-mono 적용
카테고리 | 매출 | 비용 | 이익 |
|---|---|---|---|
| 제품 A | ₩12,500,000 | ₩8,200,000 | ₩4,300,000 |
| 제품 B | ₩8,700,000 | ₩5,100,000 | ₩3,600,000 |
| 제품 C | ₩6,300,000 | ₩4,800,000 | ₩1,500,000 |
| 서비스 A | ₩15,200,000 | ₩9,800,000 | ₩5,400,000 |
| 서비스 B | ₩4,100,000 | ₩3,200,000 | ₩900,000 |