Data & Status

Typed Data Table

HeroUI 테이블 구조를 참고한 타입 기반 데이터 테이블입니다.

Preview

data structure

Typed Data Table

scan sortable rows

Kate Moore

Role
CEO
Status
Active
Email
kate@acme.com

John Smith

Role
CTO
Status
Active
Email
john@acme.com

Sara Johnson

Role
CMO
Status
On Leave
Email
sara@acme.com

Michael Brown

Role
CFO
Status
Active
Email
michael@acme.com

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/data-table.json

Code

typescript
Copied
1import { DataTable } from "@/components/data-table"23export default function Example() {4  return <DataTable columns={columns} rows={rows} />5}

Props

className

Type
string
Default
-
Description
Additional classes merged onto the component.

columns

Type
DataTableColumn<T>[]
Default
-
Description
Column definitions.

rows

Type
T[]
Default
-
Description
Rows to render.

Reference

HeroUI Table