Data & Status

Typed Data Table

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

Preview

data structure

Typed Data Table

scan sortable rows

Name	Role	Status	Email
Kate Moore	CEO	Active	kate@acme.com
John Smith	CTO	Active	john@acme.com
Sara Johnson	CMO	On Leave	sara@acme.com
Michael Brown	CFO	Active	michael@acme.com

bash

Copied

1pnpm dlx shadcn@latest add https://ryong.dev/r/data-table.json

bash

Copied

1npx shadcn@latest add https://ryong.dev/r/data-table.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong.dev/r/data-table.json

bash

Copied

1bunx shadcn@latest add https://ryong.dev/r/data-table.json

typescript

Copied

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

Prop	Type	Default	Description
className	string	-	Additional classes merged onto the component.
columns	DataTableColumn<T>[]	-	Column definitions.
rows	T[]	-	Rows to render.