Table
행과 열로 데이터를 정렬해 보여줘요. 비교하거나 찾아볼 정보에 써요.
Anatomy
- 01Container테이블 전체. 둥근 모서리와 외곽선
- 02Header Row열 제목. 배경색으로 데이터 행과 구분
- 03Row데이터 한 건
- 04Row Divider행 사이 경계선
- 05Cell행과 열이 만나는 칸
Properties
Base
헤더 행 + 데이터 행이에요. 헤더는 배경색으로, 행 사이는 구분선으로 나눠요.
Column Divider
열이 많거나 데이터 구분이 필요할 때만 켜요.
Case
padding 은 최소 24/16 이고, 열 너비는 콘텐츠 길이에 맞춰요. 열 구분선은 꼭 필요할 때만, 좁은 화면(모바일)에선 테이블 자체를 피해요.
Guidelines
✓ DO
- 열 너비는 콘텐츠 길이에 맞게
- 열 구분선은 필요할 때만
- 헤더는 항상 포함
- Cell padding 최소 24/16
✗ DON'T
- 좁은 화면(모바일)에 복잡한 테이블
- 열 구분선 남용
Specification
| 속성 | 값 | 설명 |
|---|---|---|
| border-radius | 16px | Container |
| border | 1px solid --color-line-neutral | Container 외곽선 |
| header background | --color-background-alternative | Header row 배경 |
| header font-size | 16px (font-size-md) | font-weight: 500 |
| header color | --color-label-neutral | |
| cell padding | 16px 24px | 최소값 유지 |
| cell font-size | 16px (font-size-md) | font-weight: 500 |
| cell color | --color-label-normal | |
| row divider | 1px solid --color-line-neutral | 행 구분선 |
| col divider | 1px solid --color-line-neutral | 열 구분선 (옵션) |
설치
npm i @polarisoffice/pds-reactBase
헤더 행 + 데이터 행. 헤더는 항상 넣어요.
import { Table } from '@polarisoffice/pds-react';
<Table
columns={[
{ key: 'name', header: '제목' },
{ key: 'type', header: '제목' },
{ key: 'date', header: '제목' },
]}
rows={[
{ name: '내용내용내용', type: '내용내용내용', date: '내용내용내용' },
{ name: '내용내용내용', type: '내용내용내용', date: '내용내용내용' },
]}
/>Column Divider
열 수가 많거나 데이터 구분이 필요할 때만 켜요. 기본은 끔.
import { Table } from '@polarisoffice/pds-react';
<Table columnDivider columns={columns} rows={rows} />