21 / 47
Data Table
정렬·필터가 되는 데이터 표입니다. 목록 화면에서 많은 행을 다룰 때 씁니다.
Data Table은 단독 컴포넌트가 아니라 Table과 TanStack Table을 조합해 만든 것입니다.
Basic Table
정렬도 필터도 없이 데이터만 보여주는 가장 단순한 표입니다.
| 상태 | 이메일 | 금액 |
|---|---|---|
| 성공 | ken99@example.com | 316 |
| 성공 | abe45@example.com | 242 |
| 처리중 | monserrat44@example.com | 837 |
| 성공 | silas22@example.com | 874 |
| 실패 | carmella@example.com | 721 |
Cell Formatting
금액 칸을 통화 형식으로 바꾸고 오른쪽으로 정렬했습니다.
| 상태 | 이메일 | 금액 |
|---|---|---|
| 성공 | ken99@example.com | US$316.00 |
| 성공 | abe45@example.com | US$242.00 |
| 처리중 | monserrat44@example.com | US$837.00 |
| 성공 | silas22@example.com | US$874.00 |
| 실패 | carmella@example.com | US$721.00 |
Sorting
이메일 제목을 누르면 오름차순·내림차순으로 정렬됩니다.
| 상태 | 금액 | |
|---|---|---|
| 성공 | ken99@example.com | US$316.00 |
| 성공 | abe45@example.com | US$242.00 |
| 처리중 | monserrat44@example.com | US$837.00 |
| 성공 | silas22@example.com | US$874.00 |
| 실패 | carmella@example.com | US$721.00 |
Filtering
위쪽 입력칸에 글자를 치면 이메일 기준으로 행이 걸러집니다.
| 상태 | 금액 | |
|---|---|---|
| 성공 | ken99@example.com | US$316.00 |
| 성공 | abe45@example.com | US$242.00 |
| 처리중 | monserrat44@example.com | US$837.00 |
| 성공 | silas22@example.com | US$874.00 |
| 실패 | carmella@example.com | US$721.00 |
Visibility
'열 선택' 버튼으로 원하는 열만 보이게 켜고 끕니다.
| 상태 | 금액 | |
|---|---|---|
| 성공 | ken99@example.com | US$316.00 |
| 성공 | abe45@example.com | US$242.00 |
| 처리중 | monserrat44@example.com | US$837.00 |
| 성공 | silas22@example.com | US$874.00 |
| 실패 | carmella@example.com | US$721.00 |
Row Selection
각 행 앞 체크박스로 여러 행을 한 번에 고르고, 몇 개를 골랐는지 아래에 보여줍니다.
| 상태 | 금액 | ||
|---|---|---|---|
| 성공 | ken99@example.com | US$316.00 | |
| 성공 | abe45@example.com | US$242.00 | |
| 처리중 | monserrat44@example.com | US$837.00 | |
| 성공 | silas22@example.com | US$874.00 | |
| 실패 | carmella@example.com | US$721.00 |
0 / 5행 선택됨
Row Actions
행 오른쪽 점 세 개 버튼을 누르면 그 행에 대한 메뉴(ID 복사 등)가 뜹니다.
| 상태 | 금액 | |||
|---|---|---|---|---|
| 성공 | ken99@example.com | US$316.00 | ||
| 성공 | abe45@example.com | US$242.00 | ||
| 처리중 | monserrat44@example.com | US$837.00 | ||
| 성공 | silas22@example.com | US$874.00 | ||
| 실패 | carmella@example.com | US$721.00 |
Pagination
아래 이전·다음 버튼으로 페이지를 넘깁니다. 행이 많을 때 한 화면에 다 보여주지 않기 위해 씁니다.
| 상태 | 금액 | |||
|---|---|---|---|---|
| 성공 | ken99@example.com | US$316.00 | ||
| 성공 | abe45@example.com | US$242.00 |
0 / 5행 선택됨
RTL
아랍어처럼 오른쪽에서 왼쪽으로 읽는 언어용 배치입니다. 글자와 열 순서가 뒤집힙니다.
| الحالة | المبلغ | |
|---|---|---|
| 성공 | ken99@example.com | 316 |
| 성공 | abe45@example.com | 242 |
| 처리중 | monserrat44@example.com | 837 |
| 성공 | silas22@example.com | 874 |
| 실패 | carmella@example.com | 721 |
글자와 열 순서가 오른쪽에서 왼쪽으로 뒤집힙니다.