Tinyrack

Table

반응형 overflow, 밀도, 선택적 행 줄무늬를 지원하는 의미 있는 데이터 테이블이에요.

핵심 속성

속성값기본값
densitycompact, comfortable, spaciouscomfortable
stripedtrue, falsefalse
partsRoot, Caption, Header, Body, Footer, Row, Head, Cellcompound API

설치

pnpm add @tinyrack/ui

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

스타일

@import '@tinyrack/ui/components/table.css';

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

가져오기

import { TRTable } from '@tinyrack/ui/components/table';

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

플레이그라운드

사용법

랙 상태 고유 링크

예시

밀도 고유 링크

지원하는 모든 밀도에서 같은 콘텐츠를 보여 줘요.

넓은 표의 넘침 고유 링크

넓은 표를 이동해야 할 때 가로 스크롤 힌트, 접근 가능한 이름, 키보드 포커스 지점을 제공해요.

빈 상태 고유 링크

빈 상태 안내는 Body 안의 Row와 Cell에 두고 colSpan으로 표시 열을 합쳐요.

API

TRTable.Root는 네이티브 표를 넘침 컨테이너로 감싸요. 키보드로 넓은 표를 이동해야 하면 containerProps로 해당 영역에 접근 가능한 이름과 tabIndex={0}을 제공하세요. containerRef는 같은 래퍼를 가리키고 일반 ref는 계속 <table>을 가리켜요.

파트네이티브 요소와 속성
TRTable.Root<table> 속성과 함께 density, striped, containerClassName, containerProps, containerRef를 받아요. ref는 표를 가리켜요.
TRTable.Caption네이티브 <caption> 속성이에요. ref는 캡션을 가리켜요. 표의 접근 가능한 제목이나 설명에 사용해요.
TRTable.Header네이티브 <thead> 속성이에요. ref는 머리글 그룹을 가리켜요.
TRTable.Body네이티브 <tbody> 속성이에요. ref는 본문 그룹을 가리켜요.
TRTable.Footer네이티브 <tfoot> 속성이에요. ref는 바닥글 그룹을 가리켜요.
TRTable.Row네이티브 <tr> 속성이에요. ref는 행을 가리켜요.
TRTable.Head네이티브 <th> 속성이에요. ref는 머리글 셀을 가리켜요. 열 머리글에는 scope="col", 행 머리글에는 scope="row"를 설정해요.
TRTable.Cell네이티브 <td> 속성이에요. ref는 데이터 셀을 가리켜요. colSpan, rowSpan, headers 같은 네이티브 속성을 지원해요.