تحديد الصفوف والجداول الافتراضية

أضِف عمود تحديد إلى مصفوفة ColumnDef باستخدام المعرّف 'select'. وتعرض الخلية خانة اختيار موصولة بـ row.getToggleSelectedHandler(). أما الرأس فيعرض خانة اختيار لتحديد الكل باستخدام table.getToggleAllRowsSelectedHandler().

مرّر أيضًا حالتي rowSelection و onRowSelectionChange إلى useReactTable.

تعيد row.getIsSelected() القيمة true عندما يكون الصف محددًا حاليًا، مما يجعلها مناسبة لتطبيق نمط خلفية مميز على الصفوف المحددة.

تتعامل row.getIsSomeSelected() مع حالة خانة الاختيار غير المحسومة عندما تكون بعض الصفوف فقط في مجموعة محددة، وهو أمر مفيد في الجداول المجمعة.

تعيد table.getSelectedRowModel().rows مصفوفة من جميع كائنات الصفوف المحددة حاليًا. ويحتوي كل صف على الخاصية row.original التي تتضمن كائن البيانات الأصلي.

بهذه الطريقة تنشئ أزرار الإجراءات الجماعية التي تعمل على المجموعة المحددة، مثل "حذف المحدد" أو "تصدير المحدد".

اعرض أزرار الإجراءات بشكل مشروط استنادًا إلى table.getSelectedRowModel().rows.length > 0. وعند عدم تحديد أي صفوف، أخفِ شريط أدوات الإجراءات الجماعية أو عطّله لتجنب التفاعلات المربكة مع حالة فارغة.

اعرض عدد العناصر المحددة في الواجهة: "{count} صفوف محددة" لإبقاء المستخدمين على اطلاع بتحديدهم.

يؤدي عرض 10,000 صف كعُقد DOM إلى بطء شديد. إذ يجب على المتصفح تخطيط آلاف العناصر ورسمها وإدارتها. ويختبر المستخدمون تمريرًا متقطعًا وعرضًا أوليًا بطيئًا.

يعرض العرض الافتراضي الصفوف الظاهرة حاليًا في إطار العرض فقط، مما يقلل حجم DOM بدرجة كبيرة ويحسّن الأداء.

ثبّت @tanstack/react-virtual إلى جانب @tanstack/react-table. فالمكتبتان منفصلتان، لكنهما مصممتان للتكامل. يدير TanStack Table منطق البيانات، بينما يدير TanStack Virtual العناصر التي تُعرض في DOM.

نقطة التكامل هي مصفوفة الصفوف الناتجة عن table.getRowModel().rows.

استدعِ useVirtualizer({ count: table.getRowModel().rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35 }). يحدد count عدد العناصر الافتراضية الموجودة، بما يطابق عدد الصفوف الحالي في الجدول بعد تطبيق جميع عوامل التصفية.

يوفّر estimateSize تقديرًا أوليًا لارتفاع الصف؛ وتُقاس الارتفاعات الفعلية أثناء عرض الصفوف.

استدعِ virtualizer.getVirtualItems() للحصول على الصفوف التي ينبغي أن تكون موجودة حاليًا في DOM فقط. كرّر على هذه المصفوفة، واصل إلى الصف الحقيقي من خلال table.getRowModel().rows[virtualRow.index]، ثم اعرض عناصر tr تلك فقط.

يحتوي كل عنصر افتراضي على الخاصية start لتحديد موضعه المطلق داخل حاوية التمرير.

للحفاظ على موضع التمرير الصحيح، أضِف عنصر div فاصلًا علويًا بارتفاع يساوي قيمة start لأول عنصر افتراضي، وعنصر div فاصلًا سفليًا بارتفاع يساوي الحجم الإجمالي مطروحًا منه نهاية العنصر الأخير.

تملأ عناصر div غير المرئية هذه المساحة التي كانت ستشغلها الصفوف غير المعروضة، وتحافظ على تناسب شريط التمرير بشكل صحيح.

مرّر measureElement: el => el.getBoundingClientRect().height إلى useVirtualizer للحصول على ارتفاعات ديناميكية دقيقة للصفوف. ويُربط مرجع كل صف بعنصر tr حتى يقيس virtualizer ارتفاعه الفعلي بعد العرض.

يتعامل هذا الأسلوب مع الصفوف ذات المحتوى المتفاوت (النص متعدد الأسطر والصفوف الموسعة) من دون حدوث تحولات في التخطيط.

يمكن دمج TanStack Table مع الفرز والتصفية والتقسيم إلى صفحات وتحديد الصفوف وTanStack Virtual معًا. وينبغي أن يأتي عدد الصفوف المُمرر إلى useVirtualizer من table.getRowModel().rows بعد أن تعالج جميع نماذج الصفوف النشطة البيانات.

عند تفعيل التقسيم إلى صفحات، قسّم الصفوف إلى صفحات أولًا، ثم استخدم العرض الافتراضي لصفوف الصفحة الحالية لتوفير تمرير سلس داخل صفحة كبيرة.

ما الدالة التي تعيد كائنات البيانات الأصلية لجميع الصفوف المحددة حاليًا؟

يستخدم تحديد الصفوف عمودًا لخانات الاختيار مع getToggleSelectedHandler وحالة rowSelection، كما يستخدم table.getSelectedRowModel().rows للوصول إلى البيانات المحددة. ويعرض useVirtualizer الصفوف الظاهرة فقط من خلال getVirtualItems وعناصر div الفاصلة، مع إمكانية استخدام measureElement للارتفاعات الديناميكية.

تتآلف جميع ميزات TanStack Table (الفرز والتصفية والتقسيم إلى صفحات والتحديد) بسلاسة مع العرض الافتراضي.