Table

정보를 행과 열로 정리해 보여줘요. 데이터 중심의 Data Table 과 키-값 상세를 보여주는 Description Table 을 제공해요.

Data Table

여러 데이터를 목록으로 보여주는 테이블이에요. 헤더 정렬·행 선택(Checkbox)을 지원해요. 헤더의 ‘이름’ 을 눌러 정렬해 보세요.

	장소	상태
온도 센서 A	1층 로비	정상
도어 락 B	정문	오프라인
CCTV C	주차장	정상

tsx

import {
  Table, TableHeader, TableBody, TableRow, TableHead, TableCell,
} from '@openiot/ui'

<Table>
  <TableHeader>
    <TableRow>
      <TableHead sortable sortDirection={sort} onSort={…}>이름</TableHead>
      <TableHead info="설치 위치">장소</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow selected={checked}>
      <TableCell>온도 센서 A</TableCell>
      <TableCell>1층 로비</TableCell>
    </TableRow>
  </TableBody>
</Table>

Description Table

하나의 대상을 [제목 | 내용] 행으로 풀어 보여주는 키-값 테이블이에요. 내용 셀에는 텍스트나 폼 컴포넌트(Input·Toggle·Dropdown 등)를 넣어 구성해요.

이름*
이메일*
역할: 관리자

tsx

import { DescriptionList, DescriptionRow, Input } from '@openiot/ui'

<DescriptionList>
  <DescriptionRow title="이름" required>
    <Input defaultValue="홍길동" />
  </DescriptionRow>
  <DescriptionRow title="역할" tooltip="권한 등급">관리자</DescriptionRow>
</DescriptionList>

Props

Table

Prop	Type	Default	설명
TableHead.sortable	boolean	false	정렬 가능 헤더
TableHead.sortDirection	'asc' \| 'desc' \| false	false	정렬 방향
TableHead.info	string	—	info 아이콘 + 툴팁
TableRow.selected	boolean	false	선택 행 강조

Description Table

Prop	Type	Default	설명
DescriptionRow.title	ReactNode	—	제목(키)
DescriptionRow.required	boolean	false	필수 * 표시
DescriptionRow.tooltip	string	—	info 아이콘 + 툴팁