Records Tablev1.1.0
نه یک جدولِ تازه، بلکه چند سلولِ آماده — نام+آواتار، برچسب‌هایِ دسته، زمانِ نسبیِ آخرین تماس، شدتِ رابطه — برای الگویِ رایجِ گریدِ CRM؛ مستقیم داخلِ Table معمولی استفاده می‌شوند تا سورت و انتخابِ خودِ Table دست‌نخورده بماند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/records-table.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/records-table.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/records-table.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/records-table.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import {
RecordCategoriesCell,
RecordNameCell,
RecordRelativeTimeCell,
RecordStrengthCell,
} from "@/components/ui/records-table"
import { Table, TableBody, TableHeader, TableRow } from "@/components/ui/table"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
هر کدام یک TableCell آماده است، نه یک ریشهٔ جدا؛ مستقیم داخلِ TableRow معمولیِ خودِ Table می‌نشینند و سورت (sortKey روی TableHead) و انتخابِ سطر (selectionMode روی Table) همان مکانیزمِ خودِ Table را دارند — این کامپوننت هیچ state جدیدی اضافه نمی‌کند.
دسترس‌پذیری
- RecordRelativeTimeCell از formatRelativeTime (Intl.RelativeTimeFormat فارسی) استفاده می‌کند، پس همیشه یک متنِ خوانا برمی‌گرداند، نه فقط یک تاریخِ خام.
- RecordLinkCell لینکِ خارجی با target="_blank" را rel="noreferrer" می‌گذارد.
مرجع API
RecordNameCell
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| name | string | — | نامِ شرکت/شخص. |
| avatarSrc | string | — | نبودنش یعنی جایگزین (آیکون یا حروفِ اول) نمایش داده می‌شود. |
| avatarIcon | React.ReactNode | — | آیکونِ آواتار به‌جای حروفِ اولِ name، وقتی avatarSrc نیست. |
| pin | "start" | "end" | — | چسباندنِ این ستون هنگام اسکرول افقی؛ روی TableHead همان ستون هم بدهید. |
RecordCategoriesCell
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| categories | string[] | — | هرکدام یک Chip می‌شود. |
RecordRelativeTimeCell
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| date | Date | number | string | null | — | null یعنی هنوز تماسی نبوده. |
| emptyLabel | string | "بدون تماس" | متنِ حالتِ null. |
RecordStrengthCell
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| strength | "very-strong" | "strong" | "weak" | "very-weak" | "none" | — | رنگِ نقطه و برچسبِ متنی را تعیین می‌کند. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
With Sorting
sortKey روی TableHead همان مکانیزمِ سورتِ خودِ Table را فعال می‌کند؛ این سلول‌ها هیچ منطقِ اضافه‌ای اضافه نمی‌کنند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Empty States
RecordRelativeTimeCell با date={null} و RecordLinkCell با ندادنِ href، برچسبِ متنیِ مناسب نشان می‌دهند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| With Sorting | گریدی که ستون‌هایش قابلِ مرتب‌سازی است |
| Empty States | ردیفی که هنوز تماسی نداشته یا لینکِ ثبت‌شده‌ای ندارد |
دستورالعمل استفاده
تعدادِ دسته‌بندی‌ها را کم نگه دار
انجام بده
دو تا سه Chip در RecordCategoriesCell در یک ردیف جا می‌شود و سریع خوانده می‌شود.
انجام نده
فهرستِ بلندِ دسته‌ها، ارتفاعِ ردیف را نامنظم می‌کند و جدول را ناهماهنگ نشان می‌دهد.
در عرضِ کم، ستون‌ها را اولویت‌بندی کن، نه فقط اسکرول بده
انجام بده
شرکت (مرجعِ سطر) با pin="start" چسبان می‌ماند و دسته‌بندی/لینک که کم‌اهمیت‌ترند با hidden lg:table-cell زیر آن عرض اصلاً رندر نمی‌شوند؛ کاربر موبایل هم می‌فهمد چه سطری را می‌بیند، هم مجبور به اسکرولِ طولانی نیست.
انجام نده
همهٔ پنج ستون بدون pin و بدون hidden، فقط پشتِ اسکرولِ افقیِ ساده؛ در موبایل کاربر باید هربار بکشد تا حتی نام شرکت را دوباره ببیند.
زمانِ نسبی، نه تاریخِ خام
انجام بده
RecordRelativeTimeCell عبارتی مثلِ «۴ روز پیش» می‌دهد؛ کاربر بدونِ محاسبه می‌فهمد چقدر گذشته.
انجام نده
تاریخِ خامِ میلادی یا ISO، برایِ خوانندهٔ فارسی‌زبان نیاز به محاسبهٔ ذهنی دارد.