جدول داده

نصب

1. با CLI

   اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.

   $ npx vibefarsi add data-table

2. نصب دستی

   محتوای تب «کد» را در components/ui/data-table.tsx بگذارید. پیش‌نیاز: table، pagination، skeleton، empty-state، input.

   $ npm i lucide-react
   کپی کل فایلregistry json

استفاده

1import { DataTable, type Column } from "@/components/ui/data-table"23const columns: Column<Order>[] = [4  { key: "customer", header: "مشتری", sortable: true },5  { key: "amount", header: "مبلغ", sortable: true, numeric: true, cell: (o) => formatToman(o.amount) },6  { key: "status", header: "وضعیت", cell: (o) => <Badge>{o.status}</Badge> },7]8<DataTable rows={orders} columns={columns} rowKey={(o) => o.id} searchKeys={["customer"]} pageSize={8} />

پراپ‌ها

نکته‌های راست‌چین

• رشته‌ها با localeCompare('fa') مرتب میشن تا ترتیب الفبای فارسی درست باشه و ستون‌های numeric عددی مرتب میشن.
• جست‌وجو قبل از مقایسه اعداد فارسی را لاتین می‌کنه، پس «۱۴۰۵۲» و «14052» هر دو پیدا میشن.