Component

Table

데이터 표의 스크롤 경계·행 상태·caption을 공통 토큰으로 묶습니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

Code

import { Table, TableCaption, TableHeader, TableRow, TableHead, TableBody, TableCell, Badge, TableFooter } from '@amineslab/ui'

function TableExample({ nowrap = false } = {}) {
    return (<div className="w-full max-w-sm overflow-hidden rounded-section border border-elevation-700">
      <Table>
        <TableCaption>최근 구성원 활동</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead nowrap={nowrap} className="w-24">
              이름 및 소속 프로젝트
            </TableHead>
            <TableHead>상태</TableHead>
            <TableHead>최근 활동</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {[
            ['김민서', '활성', '오늘'],
            ['박지훈', '초대 대기', '어제'],
            ['이수아', '비활성', '3일 전'],
        ].map(([name, status, date]) => (<TableRow key={name}>
              <TableCell className="font-medium">{name}</TableCell>
              <TableCell>
                <Badge variant="secondary" color={status === '활성' ? 'success' : 'inverse'}>
                  {status}
                </Badge>
              </TableCell>
              <TableCell>{date}</TableCell>
            </TableRow>))}
        </TableBody>
        <TableFooter>
          <TableRow>
            <TableCell colSpan={3}>총 3명</TableCell>
          </TableRow>
        </TableFooter>
      </Table>
    </div>);
}

export default function ExamplePreview() {
  return (<TableExample {...({"nowrap":false} as const)}/>)
}

Props

import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableHead,
  TableCell,
  // ...
} from '@amineslab/ui'

`Table`

native table semantics를 유지하는 compound components입니다.

Name	Type	Default	Description
`className`	`string`	-	공개 테이블 클래스입니다.
`children*`	`ReactNode`	-	TableHeader/Body/Caption 등 native 구조입니다.

`TableHead`

헤더 셀의 nowrap과 정렬을 조정합니다.

Name	Type	Default	Description
`nowrap`	`boolean`	`false`	긴 헤더를 한 줄로 유지합니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

데이터 표

최근 구성원 활동
이름 및 소속 프로젝트	상태	최근 활동
김민서	활성	오늘
박지훈	초대 대기	어제
이수아	비활성	3일 전
총 3명

import { Table, TableCaption, TableHeader, TableRow, TableHead, TableBody, TableCell, Badge, TableFooter } from '@amineslab/ui'

function TableExample({ nowrap = false } = {}) {
    return (<div className="w-full max-w-sm overflow-hidden rounded-section border border-elevation-700">
      <Table>
        <TableCaption>최근 구성원 활동</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead nowrap={nowrap} className="w-24">
              이름 및 소속 프로젝트
            </TableHead>
            <TableHead>상태</TableHead>
            <TableHead>최근 활동</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {[
            ['김민서', '활성', '오늘'],
            ['박지훈', '초대 대기', '어제'],
            ['이수아', '비활성', '3일 전'],
        ].map(([name, status, date]) => (<TableRow key={name}>
              <TableCell className="font-medium">{name}</TableCell>
              <TableCell>
                <Badge variant="secondary" color={status === '활성' ? 'success' : 'inverse'}>
                  {status}
                </Badge>
              </TableCell>
              <TableCell>{date}</TableCell>
            </TableRow>))}
        </TableBody>
        <TableFooter>
          <TableRow>
            <TableCell colSpan={3}>총 3명</TableCell>
          </TableRow>
        </TableFooter>
      </Table>
    </div>);
}

export default function ExamplePreview() {
  return (<TableExample />)
}

사용 기준

권장하는 사용

좁은 화면에서는 Table이 가로 스크롤을 소유하고, 식별자 컬럼 고정이 필요한 경우 stickyTable helper를 함께 사용합니다.
단순 표를 억지로 카드로 바꾸지 않고 데이터 관계를 유지합니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Tab: 표 안의 링크·버튼으로 이동합니다.