الجداول

import"@truvar-ai/design-system"

الجداول

الجداول مبنية على مكوّن Table من React Aria، فيعمل التنقل بلوحة المفاتيح والتحديد والترتيب وإعلانات قارئات الشاشة بالطريقة نفسها في كل جدول.

جدول بسيط

مبني على Table

الأرقام تُحاذى إلى النهاية بأرقام متساوية العرض.

الشركة
المرحلة
القيمة
Nile Foodsتفاوض٨٤٠٬٠٠٠ ج.م.
Delta Freightعرض مُرسل١٬٢٥٠٬٠٠٠ ج.م.
Sinai Retailمؤهل٤٦٠٬٠٠٠ ج.م.
Alex Pharmaتم الفوز٢٬١٠٠٬٠٠٠ ج.م.

جدول قابل للترتيب

مبني على Table + sortDescriptor

اضغط على عنوان العمود أو ركّز عليه واضغط Enter، ويُعلن اتجاه الترتيب.

الاسم
الشركة
قيمة الصفقة
آخر نشاط
ههاني إبراهيم
Alex Pharma٢٬١٠٠٬٠٠٠ ج.م.قبل ٣ أيام
ددينا أشرف
Aswan Solar١٬٥٣٠٬٠٠٠ ج.م.أول أمس
ططارق صالح
Delta Freight١٬٢٥٠٬٠٠٠ ج.م.أمس
ررنا يوسف
Cairo Fintech٩٧٥٬٠٠٠ ج.م.أمس
ننادية كامل
Nile Foods٨٤٠٬٠٠٠ ج.م.اليوم
يياسمين حسني
Mansoura Dairy٧٢٠٬٠٠٠ ج.م.قبل ٦ أيام

التحديد والإجراءات الجماعية

مبني على Table selectionMode=multiple

الضغط مع Shift يحدد نطاقًا، وشريط الإجراءات الجماعية يحل محل شريط الأدوات أثناء التحديد.

تم تحديد ٢
الاسم
المرحلة
المسؤول
ننادية كامل
تفاوضأميرة حسن
ططارق صالح
عرض مُرسلعمر فاروق
ممنى فتحي
مؤهلليلى منصور
ههاني إبراهيم
تم الفوزيوسف نبيل
سسلمى عادل
عميل جديدأميرة حسن

أعمدة قابلة لتغيير الحجم

مبني على ResizableTableContainer + ColumnResizer

اسحب حافة عنوان العمود، أو ركّز عليها واستخدم مفاتيح الأسهم.

الاسم
البريد الإلكتروني
الشركة
الهاتف
نادية كامل[email protected]Nile Foods+20 100 234 5678
طارق صالح[email protected]Delta Freight+20 122 410 9876
منى فتحي[email protected]Sinai Retail+20 111 777 0021
هاني إبراهيم[email protected]Alex Pharma+20 109 552 3310

صفوف قابلة للتوسيع

مبني على Tree

الصفوف الهرمية تستخدم Tree من React Aria. السهم الأيمن يوسّع والأيسر يطوي (ومعكوس في العربية).

القاهرة الكبرى
٤١٩٬٢٠٠٬٠٠٠ ج.م.
فريق الشركات الصغيرة
٢٤٣٬١٠٠٬٠٠٠ ج.م.
الدلتا
٩١٬٤٠٠٬٠٠٠ ج.م.

السحب لإعادة الترتيب

مبني على Table + useDragAndDrop

اسحب المقبض، أو ركّز عليه واضغط Enter ثم الأسهم ثم Enter للإفلات.

المهمة
المسؤول
الموعد
الاتصال بـ Delta Freight بخصوص التجديدعمر فاروقاليوم
إرسال خطة التجربة إلى Nile Foodsأميرة حسنغدًا
مراجعة عقد Aswan Solarأميرة حسنبعد الغد
حجز عرض توضيحي مع Cairo Fintechليلى منصورخلال ٣ أيام

تمرير لا نهائي

مبني على Table + TableLoadMoreItem

تُحمّل الصفوف أثناء التمرير مع صف تحميل في الأسفل. مناسب لسجلات المكالمات التي تكبر طوال اليوم.

١٥ من ٢٠٠ مكالمة
المتصل
النتيجة
المدة
الوقت
نادية كاملتم حجز اجتماع1:00اليوم
أحمد سميرمعاودة الاتصال10:13اليوم
منى فتحيبريد صوتي5:26اليوم
محمود جابرلم يرد14:39اليوم
سلمى عادلتم حجز اجتماع9:52اليوم
شريف لطفيمعاودة الاتصال4:05اليوم
رنا يوسفبريد صوتي13:18أمس
طارق صالحلم يرد8:31أمس
دينا أشرفتم حجز اجتماع3:44أمس
هاني إبراهيممعاودة الاتصال12:57أمس
ياسمين حسنيبريد صوتي7:10أمس
كريم مصطفىلم يرد2:23أمس
نادية كاملتم حجز اجتماع11:36أول أمس
أحمد سميرمعاودة الاتصال6:49أول أمس
منى فتحيبريد صوتي1:02أول أمس

١٠٬٠٠٠ صف

مبني على Virtualizer + TableLayout

الصفوف الظاهرة فقط موجودة في الصفحة، فيبقى التمرير سلسًا مهما كان الحجم. ومع ذلك يعرف التنقل بلوحة المفاتيح وقارئات الشاشة العدد الكامل.

الاسم

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

مبني على TableBody renderEmptyState

الصفقة
المرحلة
القيمة
جارٍ تحميل الصفقات