Table
열과 행으로 비교해야 하는 정보를 native table로 보여줍니다.
- 성숙도
- 후보
- 소스 경로
components/ui/table.tsx- 소스
- 소스
실제 미리보기
| 서비스 | 상태 | Commit |
|---|---|---|
| Laf ID | 정상 | 8c2a4f |
| lafetch | 공개 | 2f7d11 |
사용할 때
사용 기준
상태, 이름, 날짜처럼 같은 속성을 여러 항목에서 비교할 때 씁니다.
사용하지 않을 때
한 항목의 상세 정보나 작은 화면에서 순서만 중요한 목록에는 Item을 씁니다.
변형과 상태
default고정 예시열 제목과 행의 대응 관계가 빠르게 읽히는지 확인합니다.
최근 운영 환경 배포 서비스 상태 Commit Laf ID 정상 8c2a4f lafetch 공개 2f7d11 overflow환경에서 확인작은 화면에서 표 의미를 유지한 채 가로 스크롤되는지 확인합니다.
운영체제나 브라우저 설정을 바꾼 뒤 이 상태를 확인합니다.
최근 운영 환경 배포 서비스 상태 Commit Laf ID 정상 8c2a4f lafetch 공개 2f7d11
접근성
caption, thead, tbody, th scope 등 native 표 구조를 유지합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
aria-label | string | 아니요 | 보이는 caption이 없을 때 표의 이름을 제공합니다. |
align | "start" | "center" | "end" | 아니요 | 열 제목과 셀 내용의 정렬입니다. |
scope | string | 아니요 | TableHead가 설명하는 행이나 열 범위입니다. |
사용 예시
지원 importimport {
Table,
TableHeader,
TableBody,
TableRow,
TableHead,
TableCell,
} from "@/components/ui/table"
<Table aria-label="Deployments">
<TableHeader>
<TableRow>
<TableHead>Service</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Laf ID</TableCell>
</TableRow>
</TableBody>
</Table>