الفرز والتصفية والترقيم

لإضافة الفرز، استورد getSortedRowModel وأضِفه إلى إعدادات useReactTable. تحتاج أيضًا إلى حالة فرز (وهي مصفوفة من كائنات {id, desc}) ومعالج onSortingChange موصول بحالة React.

يغلّف نموذج الصفوف المرتبة نموذج الصفوف الأساسي، ويعيد ترتيب الصفوف استنادًا إلى حالة الفرز الحالية.

يوفّر كل رأس عمود الدالة column.getToggleSortingHandler()، التي توصلها بالخاصية onClick لعنصر th. يؤدي النقر إلى التبديل بالتتابع بين الحالات التصاعدية والتنازلية وبدون فرز.

تعيد الدالة column.getIsSorted() القيمة 'asc' أو 'desc' أو false، مما يتيح لك عرض سهم مؤشر الفرز المناسب.

يدعم TanStack Table الفرز حسب عدة أعمدة في الوقت نفسه. يضغط المستخدمون على مفتاح Shift أثناء النقر على رأس عمود ثانٍ لإضافته إلى مصفوفة الفرز من دون إزالة العمود الأول.

تحتوي المصفوفة sortingState على جميع أعمدة الفرز النشطة مرتبة حسب الأولوية، ويطبّق نموذج الصفوف المرتبة هذه الأعمدة بالتتابع.

فعّل التصفية العامة باستيراد getFilteredRowModel وإضافة حالة globalFilter ومعالج onGlobalFilterChange. صِل عنصر إدخال بالحالة لتصفية جميع الأعمدة دفعة واحدة.

تستخدم التصفية العامة استراتيجية المطابقة التقريبية أو includes افتراضيًا، ويمكن ضبطها من خلال filterFns.

يمكن للأعمدة الفردية إتاحة عوامل التصفية الخاصة بها من خلال column.getFilterValue() و column.setFilterValue(). أضِف حقل إدخال للتصفية أسفل كل رأس عمود، وصِله بهذه الدوال.

تتراكم عوامل تصفية الأعمدة وعوامل التصفية العامة؛ لذلك يجب أن تجتاز الصفوف جميع عوامل التصفية النشطة حتى تظهر في نموذج الصفوف المصفاة.

استورد getPaginationRowModel وأضِفه إلى إعدادات useReactTable، إلى جانب كائن حالة للتقسيم إلى صفحات (يحتوي على pageIndex و pageSize) ومعالج onPaginationChange.

يقتطع نموذج الصفوف المقسمة إلى صفحات الصفوف المصفاة (والمرتبة) لعرض الجزء الخاص بالصفحة الحالية فقط.

يوفّر مثيل الجدول الدوال table.nextPage() و table.previousPage() و table.firstPage() و table.lastPage() للتنقل. استخدم table.getCanNextPage() و table.getCanPreviousPage() لتعطيل الأزرار عند بلوغ الحدود.

تنقلك table.setPageIndex(n) مباشرةً إلى صفحة محددة، بينما تغيّر table.setPageSize(n) عدد الصفوف الظاهرة في الصفحة.

تعيد table.getPageCount() العدد الإجمالي للصفحات بناءً على قسمة عدد الصفوف المصفاة على pageSize. وتمنحك table.getState().pagination.pageIndex فهرس الصفحة الحالية الذي يبدأ من الصفر.

استخدم هذه القيم لإنشاء عدّاد للصفحات مثل "الصفحة 3 من 12" في واجهة التقسيم إلى صفحات.

تتألف نماذج الصفوف من بعضها: يوفّر getCoreRowModel الأساس، ويغلّفه getFilteredRowModel لتطبيق عوامل التصفية، ثم يغلّف getSortedRowModel البيانات المصفاة لتطبيق الفرز، ويقتطع getPaginationRowModel النتيجة للصفحة الحالية.

الترتيب مهم: يحدث الفرز بعد التصفية، ويحدث التقسيم إلى صفحات أخيرًا.

يخزّن TanStack Table نتائج حساب نماذج الصفوف مؤقتًا داخليًا. ويكون فرز مجموعات البيانات الكبيرة وتصفيتها فعالًا، إذ لا يُعاد حساب سوى نماذج الصفوف التي تغيّرت.

بالنسبة إلى مجموعات البيانات الكبيرة جدًا (100,000+ صف)، ادمج التقسيم إلى صفحات مع العرض الافتراضي (react-virtual) لتجنب عرض جميع صفوف الصفحة دفعة واحدة.

صِل getSortedRowModel بحالة الفرز، وgetFilteredRowModel بحالة globalFilter وحالات تصفية الأعمدة، وgetPaginationRowModel بحالة التقسيم إلى صفحات. كل ميزة اختيارية ويمكن دمجها بسلاسة مع الميزات الأخرى.

تتحكم رؤوس الأعمدة في الفرز من خلال getToggleSortingHandler، وتتحكم حقول الإدخال في التصفية من خلال setFilterValue و onGlobalFilterChange، بينما تتحكم الأزرار في التقسيم إلى صفحات من خلال nextPage و previousPage و setPageIndex.

ما الكائن الذي يحتفظ بفهرس الصفحة الحالية وحجمها في حالة التقسيم إلى صفحات في TanStack Table؟

يتطلب الفرز getSortedRowModel وحالة فرز ومعالجات للنقر على رؤوس الأعمدة. وتستخدم التصفية getFilteredRowModel مع حالة تصفية عامة وحالات تصفية لكل عمود. أما التقسيم إلى صفحات فيستخدم getPaginationRowModel مع حالة pageIndex و pageSize.

تتألف نماذج الصفوف الثلاثة تلقائيًا: التصفية أولًا، ثم الفرز، ثم التقسيم إلى صفحات أخيرًا.