جدول البيانات
هذا هو جدول بيانات تم تصميمه مع مكونات Shadcn واجهة المستخدم وجدول tanstack .
- طاولة التانستاك
- Shadcn-ui
تم بناء الجدول بعد البرنامج التعليمي الممتاز والأمثلة الموجودة على وثائق ShadCN ، وتم تمديدها.
إعدادات
تم بناء المشروع على React-Dite ويستخدم TypeScript .
- تثبيت React Vite واتبع الإرشادات إنشاء المشروع:
$ npx shadcn-ui@latest add dropdown-menu
$ npx shadcn-ui@latest add button
بيانات
يوضح الجدول قائمة خيالية للموظفين.
البيانات هي ببساطة بيانات مزيفة في صفيف في المشروع نفسه ، بدلاً من جلبها من قاعدة بيانات حقيقية.
سمات
هذه ميزات الجدول:
شريط الأدوات:
- حقل البحث: البحث الديناميكي بالاسم.
- مرشحات الوجه: التصفية حسب قيم الأعمدة ( الموقع ، الحالة ) ؛ يتم سرد القيم ديناميكيًا بناءً على قيم الأعمدة.
- علامات تصفية لإظهار المرشحات النشطة ومسح المرشحات - الزر.
- رؤية العمود: زر لاختيار الأعمدة المرئية.
- إعادة تعيين: مسح جميع المرشحات والاختيارات.
طاولة:
- الفرز: يمكن فرز الأعمدة المحددة تصاعديًا أو نزولًا.
- SELECT SELECT: مربع اختيار العمود الأول يحدد الصف.
- الإجراءات الإضافية المنسدلة: يعرض كل صف إجراءات إضافية في نهاية الصف. الأول فقط هو وظيفي حاليًا ، ويقوم بنسخ معرف الموظف إلى الحافظة ويعرض ميساج نخب.
- إعادة ترتيب العمود: يتميز الصف الأخير بأسهم تنقل الأعمدة إلى اليمين أو اليسار.
تذييل:
- معلومات عن الصفوف المحددة : توضح عدد الصفوف التي تم اختيارها.
- صفوف ديناميكية لكل صفحة : يمكن أن يزيد الاستخدام أو يقلل من الصفوف لكل صفحة بخطوات 5.
- أزرار ترقيم الصفحات : للمضي قدمًا ، إلى الوراء ، إلى الصفحة الأخيرة أو الأولى.
رؤية العمود: 
المنسدلة المرشح المقصود:
علامات التصفية وزر المسح:
المزيد من الإجراءات:
تذييل:
بناء ؟
يتكون الجدول من 3 أجزاء رئيسية:
- مكون الصفحة الذي يجلب البيانات ومكون الجدول.
- مكون الجدول.
- متغير الأعمدة التي تحتوي على بنية وتصميم محتوى العمود الفردي.
المكونات القابلة لإعادة الاستخدام:
- ترقيم الصفحات هو على المكون ويمكن إعادة استخدامه للجداول الأخرى.
- تتطلب المرشحات ذات الوجه رمزًا طويلًا ويتم فصله إلى مكونه الخاص. يمكن إعادة استخدامه لجداول أخرى.
- الخبز المحمص المنبثق القليل هو مكونه القابل لإعادة الاستخدام.
الخطوات التالية؟
➡ مجردة مكون الجدول في عنصر قابل لإعادة الاستخدام ، وقسمه إلى مكونات أصغر.
➡ أدخل السياق لتجنب تمرير بيانات الجدول كدعامة -> أسهل في التعامل مع طرق معالجة البيانات كما قد تحدث في مكونات مختلفة.
التكنولوجيا
- رد الفعل
- Shadcn UI
- طاولة التانستاك
- رموز رد فعل
- Wind
- TypeScript
