جدول

عنصر جدول أساسي قابل للوصول مبني على React Aria - ترميز دلالي، تنقل بلوحة المفاتيح، تحديد الصفوف وأعمدة قابلة للفرز. يمكن دمجه مع TanStack Table لمنطق الفرز والتصفية والترقيم، كما في المثال أدناه.

إجمالي النتائج

48 عميل

	الحالة
جون كلاركسون	فشل التسليم	5 سبتمبر 2026	$3.412
أسبن لوبين	فشل التسليم	25 مارس 2026	$1.899
مايكل إكستروم	تم الشحن	1 أغسطس 2026	$2.752
كيانا فاكارو	تم الشحن	2 أبريل 2026	$145
ليفيا ساريس	فشل التسليم	14 نوفمبر 2026	$708
جايدون أمينوف	بانتظار التسليم	17 يوليو 2026	$224
ماريا لوبين	تم الشحن	15 نوفمبر 2026	$2.959
آن بريس	بانتظار التسليم	20 سبتمبر 2026	$2.646

التثبيت

يمكنك إضافة مكوّن الجدول هذا باستخدام CLI أو يدويًا:

الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.

CLI

يدوي

تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.

npx boardui@latest add table

هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.

الأحجام

يأتي الجدول بحجمين: md (عادي) و sm (مضغوط، مع حشو أضيق وصور رمزية أصغر). بدّل بينهما بتغيير الـ size الخاصية على Table مكوّن - جرّب عادي / مضغوط التبديل في المعاينة أعلاه.

<Table size="md" aria-label="Customers"> {/* rest of the table components */}</Table>

التحميل

مرّر isLoading ليصبح الجسم صفحة من صفوف Skeleton تحت الترويسة الحقيقية، كل خلية بحجم ما سيصل إليها في أي كثافة، فلا يتحرك شيء عند وصول البيانات.

إجمالي النتائج

	الشراء	الحالة			الإجراءات

const { data, isLoading } = useCustomers();
// The header stays; the body is a page of Skeleton rows until the data lands.<DataTableExample isLoading={isLoading} />

جدول المحتويات

يوضح هذا الدليل كيفية استخدام TanStack Table - المحرك عديم الرأس للصفوف والأعمدة والفرز والتصفية والاختيار - جنبًا إلى جنب مع Table الأساسية لبناء جدول بيانات خاص بك. سنتناول المواضيع التالية:

جدول أساسي باستخدام العنصر الأولي Table
تحديد الصفوف
الفرز
التصفية والبحث
التنقل بين الصفحات
مكوّنات قابلة لإعادة الاستخدام