جدول (Table)

معرفی

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

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

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

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

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

استفاده

import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@parto-system-design/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>

کامپوننت‌ها

Props

Table

TableHeader / TableBody / TableRow

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

TableHead

TableCell

TableCaption

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

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

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

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

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