تعريف الأعمدة وعرض الصفوف

يُوصف كل عمود في TanStack Table بكائن ColumnDef. وأهم حقلين هما accessorKey، وهو اسم الخاصية في كائن البيانات، وheader، وهو سلسلة تسمية العمود أو دالة تصيير.

يُعد أسلوب accessorKey مثالياً للبيانات المسطحة، أما القيم المعقدة أو المحسوبة فتحتاج إلى accessorFn.

عندما تحتوي بياناتكم على خاصية مباشرة مثل name أو email، استخدموا accessorKey: 'name'. وعندما تحتاجون إلى حساب قيمة، مثل دمج firstName وlastName، استخدموا accessorFn: row => row.firstName + ' ' + row.lastName.

يكون كلا الأسلوبين محددَي النوع بالكامل عند تمرير النوع العام لبيانات الصف إلى ColumnDef.

يقبل الحقل cell في ColumnDef دالة تتلقى سياق الخلية وتعيد JSX. وهذه هي الطريقة لعرض الشارات والأزرار والصور أو أي واجهة مخصصة داخل الخلية.

تكفي cell.renderValue() للقيم النصية البسيطة. أما لأي محتوى أكثر غنى، فاستخرجوا المعلومات من cell.getContext().

عرّفوا الأعمدة خارج المكوّن لتجنب إعادة إنشائها عند كل تصيير. مرّروا المصفوفة إلى useReactTable مع data وgetCoreRowModel.

سيستنتج TypeScript أنواع الأعمدة عند تقييد ColumnDef بنوع بياناتكم، مما يمنحكم الإكمال التلقائي لقيم accessorKey.

‏getCoreRowModel دالة مُنشئة مستوردة من @tanstack/react-table. تمرّرون القيمة التي تعيدها إلى useReactTable لإخبار المثيل بكيفية بناء القائمة الأساسية للصفوف من مصفوفة البيانات.

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

استدعوا table.getHeaderGroups() واستخدموا التكرار على النتيجة لتصيير thead. تحتوي كل مجموعة رؤوس على مصفوفة headers، بينما يحتوي كل رأس على تعريف العمود ومعرّف.

استخدموا flexRender(header.column.columnDef.header, header.getContext()) لتصيير محتوى الرأس، سواء كان سلسلة نصية أو دالة تعيد JSX.

استدعوا table.getRowModel().rows واستخدموا التكرار على كل صف لتصيير عنصر tr. وداخل الصف، استدعوا row.getVisibleCells() واستخدموا التكرار على كل خلية لتصيير عنصر td.

استخدموا flexRender(cell.column.columnDef.cell, cell.getContext()) لتصيير محتوى الخلية، مع احترام أي مصيّر خلايا مخصص معرّف في العمود.

‏flexRender أداة مساعدة تقبل مكوّن React أو دالة تعيد JSX أو قيمة عادية، وتصيّرها بشكل متسق. وتتيح لتعريفات الأعمدة استخدام سلاسل نصية بسيطة أو دوال تصيير كاملة للرؤوس والخلايا.

تعني واجهة API الموحدة هذه أنكم لا تحتاجون إلى التحقق من نوع التعريف قبل تصييره.

تعيد cell.renderValue() قيمة accessor الخام منسّقة كسلسلة نصية. ولمزيد من التحكم، يوفر cell.getContext() سياق التصيير الكامل، بما في ذلك الصف والعمود ومثيل الجدول والقيمة الخام.

تستخدم مصيّرات الخلايا المخصصة هذا السياق للوصول إلى بيانات الصف المرتبطة التي تتجاوز قيمة accessor المفردة.

يقبل كل ColumnDef حقلاً باسم meta يمكنكم فيه إرفاق بيانات وصفية عشوائية مثل isSticky: true أو alignment: 'right'. ويمكنكم الوصول إليها في المصيّر عبر column.columnDef.meta.

لتثبيت الأعمدة إلى اليسار أو اليمين، يوفر TanStack Table حالة تثبيت الأعمدة ودوالاً مساعدة على كائن العمود.

عرّفوا مصفوفة ColumnDef باستخدام accessorKey وheader وcell الاختياري. استدعوا useReactTable باستخدام data وcolumns وgetCoreRowModel. استخدموا التكرار على getHeaderGroups لتصيير thead، وعلى getRowModel().rows لتصيير tbody، مع استخدام flexRender لتصيير كل رأس وكل خلية.

يمنحكم هذا الإعداد البسيط جدولاً يعمل بالكامل ويمكنكم تنسيقه بحرية كاملة.

متى ينبغي استخدام accessorFn بدلاً من accessorKey في تعريف عمود TanStack Table؟

عرّفوا الأعمدة باستخدام ColumnDef، مع accessorKey للحقول المباشرة أو accessorFn للقيم المحسوبة. مرّروا columns وgetCoreRowModel إلى useReactTable، ثم صيّروا الجدول باستخدام getHeaderGroups للرؤوس وgetRowModel().rows لصفوف المحتوى.

تتعامل الأداة المساعدة flexRender بشكل موحد مع تعريفات الرؤوس والخلايا، سواء أكانت سلاسل نصية أم دوال.