بناء جدول بيانات قابل للبحث

الهدف

ابنِ مكون React <DataTable> يتعامل مع مجموعات بيانات كبيرة بكفاءة. هذا تحدٍ شائع في مهام المقابلات المنزلية للواجهات الأمامية.

المتطلبات

1. البحث/التصفية

• حقل نصي يُصفي الصفوف عبر جميع الأعمدة
• إدخال مؤجل (300 مللي ثانية) لتجنب التصفية عند كل ضغطة مفتاح
• عرض عدد النتائج المطابقة

2. الترتيب

• النقر على رؤوس الأعمدة للترتيب تصاعديًا/تنازليًا
• مؤشر مرئي لعمود الترتيب الحالي واتجاهه
• دعم ترتيب السلاسل النصية والأرقام بشكل صحيح

3. ترقيم الصفحات

• عرض 20 صفًا لكل صفحة
• تنقل السابق/التالي
• عرض رقم الصفحة الحالية وإجمالي الصفحات
• إعادة التعيين للصفحة 1 عند تغيير استعلام البحث

4. الأداء

• يجب التعامل مع 10,000+ صف بدون تأخر ملحوظ
• البحث والترتيب يجب أن يشعرا بأنهما فوريان (< 100 مللي ثانية)
• تقليل إعادة العروض غير الضرورية

5. التنقل بلوحة المفاتيح

• السهم لأعلى/لأسفل للتنقل بين الصفوف
• Enter لتحديد صف
• Escape لمسح البحث

مخطط البيانات

يجب أن يعمل مكونك مع شكل البيانات هذا:

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
  department: string;
  salary: number;
  joinDate: string; // سلسلة تاريخ ISO
}

interface DataTableProps {
  data: User[];
  columns: {
    key: keyof User;
    label: string;
    sortable?: boolean;
  }[];
}

مثال على الاستخدام

<DataTable
  data={users}
  columns={[
    { key: 'name', label: 'الاسم', sortable: true },
    { key: 'email', label: 'البريد', sortable: true },
    { key: 'role', label: 'الدور', sortable: true },
    { key: 'department', label: 'القسم', sortable: true },
    { key: 'salary', label: 'الراتب', sortable: true },
  ]}
/>

تلميحات

• استخدم useMemo لتخزين النتائج المصفاة والمرتبة مؤقتًا
• استخدم useCallback لمعالجات الأحداث المُمررة للمكونات الفرعية
• فكّر في useRef لإدارة تركيز حقل البحث
• أجّل البحث باستخدام خطاف useDebounce مخصص
• لأكثر من 10 آلاف صف، فكّر في عرض الصفوف المرئية فقط (المحاكاة الافتراضية) أو اعتمد على ترقيم الصفحات