컴포넌트 · 데이터 표시

DataTable

관리자 · 콘솔 · 영업자의 핵심 컴포넌트입니다. 정렬 · 행 선택 · 일괄 작업 · 페이지네이션을 지원하고, 숫자 열은 자동으로 오른쪽 정렬 · tabular 처리됩니다.

행 높이
40 · 44 · 56px
정렬
desc → asc → 해제
접근성
aria-sort · aria-selected

거래 내역 테이블

행을 선택하면 상단에 일괄 작업 바가 나타납니다. 열 제목을 눌러 정렬해 보세요.

총 1,284건
거래번호채널결제수단상태
09.28 21:54TX20260928001온기카페 합정점KIOSK토스페이53,600원결제완료
09.28 21:05TX20260928002한끼식당 역삼QR카카오페이59,100원결제완료
09.28 21:54TX20260928003모닝베이커리QR토스페이36,600원결제완료
09.28 20:21TX20260928004한끼식당 역삼QR네이버페이30,600원결제완료
09.28 20:54TX20260928005한끼식당 역삼APP삼성카드40,400원결제대기
09.28 20:21TX20260928006모닝베이커리KIOSK토스페이33,300원결제취소
09.28 19:31TX20260928007한끼식당 역삼QR토스페이6,600원환불완료
09.28 19:28TX20260928008모닝베이커리APP네이버페이52,500원결제완료
1–8 / 1,284

밀도

결제수단상태
09.28 21:54온기카페 합정점토스페이53,600원결제완료
09.28 21:05한끼식당 역삼카카오페이59,100원결제완료
09.28 21:54모닝베이커리토스페이36,600원결제완료
09.28 20:21한끼식당 역삼네이버페이30,600원결제완료
09.28 20:54한끼식당 역삼삼성카드40,400원결제대기
09.28 20:21모닝베이커리토스페이33,300원결제취소
09.28 19:31한끼식당 역삼토스페이6,600원환불완료
09.28 19:28모닝베이커리네이버페이52,500원결제완료
09.28 19:40모닝베이커리삼성카드59,900원결제실패
09.28 18:53그린볼 광화문신한카드88,600원부분취소
09.28 18:00온기카페 성수점신한카드89,300원결제완료
09.28 18:11온기카페 성수점네이버페이38,300원결제완료
09.28 17:12한끼식당 역삼신한카드36,100원결제완료
09.28 17:24한끼식당 역삼KB국민카드52,200원결제완료
09.28 17:51브루잉랩 판교토스페이24,300원결제대기
09.28 16:47모닝베이커리KB국민카드83,100원결제취소
09.28 16:57브루잉랩 판교삼성카드72,600원환불완료
09.28 16:10한끼식당 역삼토스페이52,600원결제완료
09.28 15:26온기카페 합정점KB국민카드7,200원결제실패
09.28 15:07한끼식당 역삼신한카드77,800원부분취소
09.28 15:51그린볼 광화문삼성카드31,100원결제완료
09.28 14:33모닝베이커리삼성카드89,400원결제완료
09.28 14:38브루잉랩 판교카카오페이38,100원결제완료
09.28 14:35그린볼 광화문토스페이60,200원결제완료
density행 높이용도
compact40px정산 상세 · 대량 로그 (한 화면 20행 이상)
default--table-row-h (44 / 56 / 60)기본 목록
comfortable56px썸네일 · 두 줄 셀

셀 규칙

데이터정렬형식
금액 · 수량 · 비율오른쪽tabular, 단위 포함 (12,800원 · 3.2%)
날짜 · 시간왼쪽MM.DD HH:mm (연도는 헤더 필터에)
상태왼쪽StatusBadge
ID · 거래번호왼쪽mono 서체 대신 tabular, 클릭 시 복사
액션오른쪽xs ghost 버튼 또는 ⋯ 메뉴

사용 규칙

이렇게 하세요

  • 기본 정렬은 최신순, 헤더에 현재 정렬 표시
  • 선택 시 일괄 작업은 테이블 상단에
  • 빈 결과에는 필터 초기화 액션 제공

이렇게 하지 마세요

  • 세로 구분선 · 지브라 패턴 남용
  • 셀 안에 Primary 버튼
  • 금액 열 가운데 정렬

Props

PropTypeDefault설명
columns*Column<T>[]—{ key, header, cell, sortValue?, numeric?, align?, width? }
rows*T extends { id: string }[]—데이터
selectableboolean—체크박스 열
selected / onSelectedChangestring[]—선택된 id 제어
onRowClick(row: T) => void—행 클릭 (상세 패널 열기)
density"compact" | "default" | "comfortable""default"행 높이
stickyHeader · maxHeightboolean · number—스크롤 영역 내 고정 헤더
fillboolean—부모 flex 높이를 채우고 본문만 스크롤 (stickyHeader와 함께)
activeIdstring | null—상세 패널로 열린 행 — 좌측 브랜드 바로 강조
keyboardNavboolean—J/K 키로 이전·다음 행을 onRowClick으로 연다
footerReactNode—합계 · 페이지네이션 영역