DataTable — جدول داده
Table با مرتب‌سازی چرخه‌ای، فیلتر متنی با یکسان‌سازی فارسی (ی/ک و ارقام)، صفحه‌بند داخلی و انتخاب اختیاری. منطق در هوک کپی کد است و جدا هم قابل‌استفاده است.
وضعیت: beta · لایه: ۳ (کپی کد) · فراداده: کپی کد
import { DataTable } from '@tokapps/tuk/data-display';نمونهٔ زنده
| پلتفرم گفت‌وگوی هم‌محله‌ای | علی رضایی | ۱۲۴ | تأیید شد | |
|---|---|---|---|---|
| کتابخانهٔ اشتراکی | سارا محمدی | ۸۸ | در انتظار |
۳ نتیجه
چه وقت استفاده کنیم
- فهرست‌های داده‌ای با مرتب‌سازی و جستجو
- رتبه‌بندی و گزارش
- مدیریت انتخاب چندردیفه
چه وقت نه
- داده‌های سروری حجیم (صفحه‌بندی و مرتب‌سازی باید سمت سرور باشد)
- ویرایش درون‌سلولی
- آیتم‌های غنی با ستون کم (از Card استفاده کنید)
ساختار و حالت‌ها
کپی کد ← کپی کد (چک‌باکس اختیاری، سربرگ‌های مرتب‌شونده) ← کپی کد.
- انواع: ساده، راه‌راه (کپی کد)، با جستجو (کپی کد)، با انتخاب (کپی کد).
- کپی کد: کپی کد یا کپی کد.
- حالت‌ها: default، sorted، filtered، empty، paginated، selected، focus-visible.
رفتار واکنش‌گرا و RTL
- جدول در موبایل افقی اسکرول می‌خورد (ناحیهٔ فوکوس‌پذیر)؛ نوار ابزار و صفحه‌بند می‌شکنند.
- پیکان‌ها در RTL آینه می‌شوند؛ ارقام فارسی با کپی کد نمایش داده می‌شوند.
- جستجو ی/ي، ک/ك و ارقام فارسی، عربی و لاتین را یکسان می‌کند.
رفتار کیبورد و صفحه‌خوان
- کپی کد در ترتیب بصری؛ کپی کد/کپی کد برای مرتب‌سازی و انتخاب؛ صفحه‌بند با دکمه‌های بومی.
- کپی کد روی ستون مرتب‌شده؛ نتایج، مرتب‌سازی و انتخاب در ناحیهٔ زندهٔ کپی کد اعلام می‌شوند.
- صفحه‌بند یک کپی کد با نام است.
حرکت، صدا و چاپ
- هاور و دکمه‌ها: گذار کوتاه. در کاهش حرکت ۱ms.
- بی‌صدا.
- چاپ: نوار جستجو و صفحه‌بند پنهان؛ فقط ردیف‌های صفحهٔ فعلی؛ سربرگ تکرار می‌شود.
API
| پراپ | توضیح |
|---|---|
| کپی کد | نام ناحیهٔ جدول برای صفحه‌خوان (الزامی) |
| کپی کد | عنوان نمایشی جدول |
| کپی کد / کپی کد / کپی کد | داده، ستون‌ها و شناسهٔ ردیف |
| کپی کد | تعداد ردیف در هر صفحه |
| کپی کد / کپی کد | مرتب‌سازی و فیلتر اولیه |
| کپی کد | نوار جستجوی متنی |
| کپی کد / کپی کد | ستون انتخاب و رویداد تغییر انتخاب |
| کپی کد | متن چک‌باکس هر ردیف |
| کپی کد / کپی کد | سربرگ ثابت و ارتفاع بیشینه |
| کپی کد / کپی کد | تراکم و راه‌راه |
| کپی کد | برچسب‌های قابل ترجمه |
| کپی کد | رفتار چاپ |
ستون‌ها (کپی کد): کپی کد، کپی کد، کپی کد (مقدار خام برای مرتب‌سازی و فیلتر)، کپی کد (رندر سلول)، کپی کد، کپی کد، کپی کد، کپی کد، کپی کد.
جزئیات کامل: کپی کد. هوک مستقل: کپی کد.
قرارداد دسترس‌پذیری
- کنتراست AA در همهٔ تم‌ها (کپی کد).
- کپی کد و ناحیهٔ زندهٔ نتایج.
- نام دکمه‌های صفحه‌بند و یکسان‌سازی جستجوی فارسی.
نمونهٔ قابل‌کپی
کد زیر همان مثال‌های کپی کد است و مستقیم در پروژه قابل استفاده است.
import { DataTable } from '@tokapps/tuk/data-display';import type { DataTableColumn } from '@tokapps/tuk/data-display';interface Idea { id: number; title: string; owner: string; votes: number; status: string }const ideas: Idea[] = [ { id: 1, title: 'پلتفرم گفت‌وگوی هم‌محله‌ای', owner: 'علی رضایی', votes: 124, status: 'تأیید شد' }, { id: 2, title: 'کتابخانهٔ اشتراکی', owner: 'سارا محمدی', votes: 88, status: 'در انتظار' }, { id: 3, title: 'Open Data Day', owner: 'Mehdi Karimi', votes: 1204, status: 'تأیید شد' },];const columns: DataTableColumn<Idea>[] = [ { id: 'title', header: 'عنوان', accessor: (r) => r.title, rowHeader: true, isolate: true }, { id: 'owner', header: 'ثبت‌کننده', accessor: (r) => r.owner, isolate: true }, { id: 'votes', header: 'رأی', accessor: (r) => r.votes, numeric: true, cell: (r) => r.votes.toLocaleString('fa-IR') }, { id: 'status', header: 'وضعیت', accessor: (r) => r.status },];export function IdeasTable() { return <DataTable label="فهرست ایده‌ها" caption="ایده‌های ثبت‌شده" rows={ideas} columns={columns} getRowId={(r) => r.id} filterable selectable pageSize={2} />;}آزمون و پیش‌نمایش
- Storybook: کپی کد (کپی کد).
- تست واحد: کپی کد.