البناء · جديد

الجداول

صفوف من السجلات يقارنها المستخدم ويتصرف بناءً عليها: معاملات وطلبات ومستخدمون. جدول حقيقي بعناوين أعمدة وخلايا.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/table

الاعتماديات التي يضيفها: @phosphor-icons/react

الاستخدام

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

<Table>
  <TableHeader variant="gray">
    <TableRow>
      <TableHead sort="descending" onSort={toggle}>Date</TableHead>
      <TableHead align="end">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>12/09/2026</TableCell>
      <TableCell numeric>+2,450.00 JOD</TableCell>
    </TableRow>
  </TableBody>
</Table>

أمثلة

تحديد الصفوف

مربع تفعيل في أول عمود (CheckboxBox باسمه)، وصورة رمزية ونص فرعي في الخلية؛ الصف المحدد يبقى ملوّنًا.

عنوان أبيض وتلميح

‏variant="white" (الافتراضي)، وأيقونة قبل العنوان، وتلميح معلومات، ودون فواصل الأعمدة (dividers={false}).

مرجع الخصائص

Table

الخاصية	النوع	الافتراضي	الوصف
`dividers`	`boolean`	`true`	خاصية Show divider: خط عند نهاية كل عمود.
`aria-label / TableCaption`	`string / ReactNode`		اسم الجدول لقارئ الشاشة.

TableHeader

الخاصية	النوع	الافتراضي	الوصف
`variant`	`"white" \| "gray"`	`"white"`	خاصية Color في Table header cell.

TableRow

الخاصية	النوع	الافتراضي	الوصف
`selected`	`boolean`	`false`	‏State = Hover/selected ثابتة لصف محدد.

TableHead

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		خاصية Label.
`sort`	`"none" \| "ascending" \| "descending"`		عمود قابل للترتيب وحالته؛ اتركه للأعمدة الأخرى.
`onSort / sortHref`	`() => void / string`		زر ترتيب (شيفرة العميل) أو رابط (صفحات الخادم).
`leadingIcon`	`IconComponent`		خاصية Leading icon.
`info`	`ReactNode`		خاصية Show tooltip: تلميح معلومات بعد العنوان.
`align`	`"start" \| "end"`	`"start"`	‏`end` لأعمدة الأرقام.

TableCell

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		خاصية Cell Title.
`subtitle`	`ReactNode`		خاصية Cell Subtitle.
`leading / trailing`	`ReactNode`		العنصر قبل النص وبعده: صورة رمزية، أيقونة، وسم، مربع تفعيل…
`numeric`	`boolean`	`false`	مبلغ أو عدد: في نهاية العمود بأرقام متساوية العرض، ومن اليسار إلى اليمين.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	إلى أزرار الترتيب وعناصر التحكم داخل الخلايا فقط.
`EnterSpace`	يرتّب العمود.

ARIA

جدول حقيقي: table وth scope="col" وtd، وقارئ الشاشة يربط كل خلية بعنوانها.
العمود القابل للترتيب زر داخل th الذي يحمل aria-sort.
مربعات التحديد لها أسماء («تحديد الكل»، اسم الصف).

ملاحظات العربية والاتجاه

ينعكس

أول عمود على اليمين، والنص في بداية الخلية (يمينها)، والفاصل في نهايتها (يسارها).
أعمدة الأرقام في نهاية الخلية (يسارها في العربية).

لا ينعكس

المبالغ تبقى من اليسار إلى اليمين، فتبقى الإشارة بجانب الرقم.
البريد الإلكتروني والأرقام التعريفية في <bdi dir="ltr">.

الأرقام: التواريخ والمبالغ بنظام الأرقام المختار؛ لا تخلط الصيغ في العمود الواحد.
الخط العربي: ‏body-12 بوزن Semibold للعناوين، وbody-14 بوزن Medium للخلايا، وbody-12 للنص الفرعي.
النص ثنائي الاتجاه: لا تخلط خلايا LTR وRTL في جدول واحد: الاتجاه يأتي من الصفحة.

كل المكونات ›