جدول (Table)

معرفی

کامپوننت Table برای نمایش داده‌ها در قالب جدول استفاده می‌شود.

چه زمانی استفاده کنیم:

• برای نمایش داده‌های ساختاریافته با ستون‌های مشخص و بدون نیاز به تعامل پیچیده
• جداول ساده با کمتر از ۵ ردیف بدون مرتب‌سازی یا صفحه‌بندی
• نمایش داده‌های مقایسه‌ای ساده

چه زمانی استفاده نکنیم:

• برای داده با sorting، filtering، یا pagination — از DataTable استفاده کنید
• برای نمایش key-value pairs — از dl/dt/dd یا StatDisplay استفاده کنید

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

استفاده

import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@partodata/ui'

export default function MyComponent() {
  return (
    <Table>
      <TableCaption>لیست کاربران</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>نام</TableHead>
          <TableHead>ایمیل</TableHead>
          <TableHead>نقش</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>محمد احمدی</TableCell>
          <TableCell>mohammad@example.com</TableCell>
          <TableCell>ادمین</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

حالت‌ها و انواع

جدول ساده

با Caption

<Table>
  <TableCaption>لیست سفارشات اخیر</TableCaption>
  <TableHeader>...</TableHeader>
  <TableBody>...</TableBody>
</Table>

ردیف‌های تعاملی (interactive)

با interactive روی TableRow، ردیف قابل کلیک و فوکوس‌پذیر با کیبورد می‌شود (Enter/Space فقط وقتی خودِ ردیف فوکوس است، تا دکمه/لینک داخل ردیف رفتار خودش را حفظ کند). برای جدول‌های ساده که کلیک کل ردیف به یک صفحهٔ جزئیات می‌رود مناسب است.

<TableRow interactive onClick={() => router.push(`/campaigns/${row.id}`)}>
  <TableCell>{row.name}</TableCell>
  <TableCell>{row.platform}</TableCell>
</TableRow>

محو لبه (edgeFade) و ShadowScrollArea

با edgeFade روی Table، یک شدو نرم روی لبه‌ای که هنوز محتوای اسکرول‌نشده دارد ظاهر می‌شود (affordance به سبک Supabase). این ویژگی opt-in است (پیش‌فرض false) — تصمیمی تاریخی از نسخه‌ی 2.1.0 تا ارتقا بدون رگرسیون بصری بماند و با مدل اسکرول DataTable تداخل نکند.

<Table edgeFade>
  <TableHeader>...</TableHeader>
  <TableBody>...</TableBody>
</Table>

برای همین محو لبه در جایی خارج از جدول، کامپوننت مستقل ShadowScrollArea را جداگانه export کرده‌ایم.

کامپوننت‌ها

Props

Table

TableHeader / TableBody

همه className استاندارد را می‌پذیرند.

TableRow

TableHead

TableCell

TableCaption

TableSortHeader

راهنمای استفاده

دسترسی‌پذیری

• استفاده از المان‌های معنادار HTML (table, thead, tbody, th, td, caption)
• TableHead از scope="col" پشتیبانی می‌کند
• TableCaption برای صفحه‌خوان‌ها عنوان جدول را توصیف می‌کند

کامپوننت‌های مرتبط

• DataTable — اگر نیاز به مرتب‌سازی، صفحه‌بندی یا انتخاب ردیف دارید، از DataTable استفاده کنید
• Pagination — برای افزودن صفحه‌بندی سفارشی به جداول ساده استفاده کنید
• StatDisplay — اگر داده شما key-value است و ساختار جدولی ندارد، از StatDisplay استفاده کنید