데이터 테이블

호출자가 직접 쓴 thead·tbody 에 표의 간격, 머리칸 배경, 줄 hover, 선택 줄과 묶음 머리줄 색을 입힌다. 칸 내용은 그대로 서버에서 렌더하고, 선택 체크박스 같은 상호작용만 칸 안에 클라이언트 컴포넌트로 넣는다. 열 정의 배열로 그리는 단순 표는 Table, 고정 머리줄과 스크롤 영역이 필요한 큰 표는 DataGrid 를 쓴다.

활용 방법

정렬과 선택 줄

th·td 의 data-align="right" | "center" 로 칸을 정렬하고, tr 의 data-selected 로 선택된 줄에 옅은 primary 배경을 칠한다.

Preview

품목	상태	수량	금액
볼트 M8	입고	1,200	₩96,000
너트 M8	대기	800	₩40,000
와셔 8mm	입고	2,000	₩30,000

tsx

<DataTable minWidth={560}>
  <thead>
    <tr>
      <th>품목</th>
      <th data-align="center">상태</th>
      <th data-align="right">수량</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>볼트 M8</td><td data-align="center">입고</td><td data-align="right">1,200</td></tr>
    <tr data-selected><td>너트 M8</td><td data-align="center">대기</td><td data-align="right">800</td></tr>
  </tbody>
</DataTable>

묶음 머리줄

tr 에 data-group 을 붙인 줄은 날짜·지역 같은 묶음 제목이 된다. 묶음마다 표를 따로 그리지 않아 묶음끼리 칸 폭이 맞는다.

Preview

시간	내용	담당
10월 5일
09:00	정기 점검	김하늘
14:30	부품 교체	이도윤
10월 6일
10:00	설치	박서준

tsx

<tbody>
  <tr data-group><td colSpan={3}>10월 5일</td></tr>
  <tr><td>09:00</td><td>정기 점검</td><td data-align="right">김하늘</td></tr>
  <tr data-group><td colSpan={3}>10월 6일</td></tr>
  <tr><td>10:00</td><td>설치</td><td data-align="right">박서준</td></tr>
</tbody>

칸 표시 규칙

· 정렬: th · td 에 data-align="right" 또는 "center". 지정하지 않으면 왼쪽 정렬이다.
· 선택된 줄: tr 에 data-selected.
· 묶음 머리줄: tr 에 data-group, 칸 하나에 colSpan 으로 전체 폭을 채운다.
· 좁은 화면에서 덜 중요한 칸은 th · td 에 className="max-md:hidden" 을 준다.

속성

이름	타입	기본값	설명
children	ReactNode	-	thead · tbody
minWidth	560 \| 640 \| 760 \| 880 \| 960	760	표 최소 폭(px). 화면이 더 좁으면 가로 스크롤된다
className	string	-	가로 스크롤을 맡는 root div 클래스
ref	Ref<HTMLTableElement>	-	table 요소. 나머지 native table props 도 table 에 적용된다