Patterns
DataTable
고밀도 데이터를 정렬 및 필터링 가능한 테이블로 표현하는 컴포넌트입니다.
DataTable
대시보드에서 대량의 구조화된 데이터를 효율적으로 표시하는 테이블 컴포넌트입니다. 클라이언트 사이드 정렬, 줄무늬 행, 밀도 조절이 가능합니다.
Examples
| 자산명 | 위치 | 거래가 | Cap Rate |
|---|---|---|---|
| 센트로폴리스 | 서울 중구 | ₩3,800억 | 4.8% |
| 판교 테크원타워 | 성남 분당 | ₩2,100억 | 5.2% |
| 강남 로지스 허브 | 서울 강남 | ₩1,500억 | 6.1% |
import { DataTable } from "@seoulpi/ui/data-table";
const columns = [
{ key: "name", header: "자산명" },
{ key: "price", header: "거래가", align: "right" },
];
const data = [
{ name: "센트로폴리스", price: "₩3,800억" },
{ name: "판교 테크원타워", price: "₩2,100억" },
];
function Example() {
return <DataTable columns={columns} data={data} sortable />;
}Features
- 정렬:
sortable활성화 시 컬럼 헤더 클릭으로 오름차순/내림차순 전환 - 줄무늬:
striped로 교대 행 배경색 적용 - 밀도 조절:
compact로 좁은 패딩의 고밀도 레이아웃 - 스티키 헤더:
stickyHeader로 스크롤 시 헤더 고정 - 커스텀 렌더러: 각 컬럼에
render함수를 지정하여 Badge 등 커스텀 UI 적용 가능
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | ColumnDef<T>[] | — | 컬럼 정의 배열 |
data | T[] | — | 데이터 배열 |
caption | string | — | 테이블 캡션 |
sortable | boolean | false | 정렬 가능 여부 |
striped | boolean | false | 줄무늬 행 |
compact | boolean | false | 밀도 높은 레이아웃 |
stickyHeader | boolean | false | 헤더 고정 |