فلسفة TanStack Table والتصميم بلا واجهة

توفر مكتبة واجهة Headless UI كل المنطق وإدارة الحالة والسلوك الذي تحتاجونه، لكنها تتعمد عدم شحن أي ترميز أو أنماط. أنتم تتحكمون في كل بكسل من المخرجات المصيّرة.

تعني هذه الفلسفة أنكم لن تضطروا أبداً إلى مقاومة تجاوزات CSS أو التعامل بصعوبة مع بنية DOM التي تفرضها المكتبة.

في مكوّن جدول تقليدي، يتطلب تغيير المظهر تجاوز عشرات الأنماط، وأحياناً اللجوء إلى حلول ملتوية للتعامل مع بنية HTML. تمنحكم مكتبة Headless البيانات والحالة، ثم تترك لكم حرية التنفيذ.

والنتيجة هي حرية تصميم كاملة: يمكنكم استخدام Tailwind أو CSS Modules أو Emotion أو CSS العادي دون عوائق.

يعمل TanStack Table v8 مع React وVue وSolid وSvelte وحتى Vanilla JavaScript. فالمنطق الأساسي مستقل عن إطار العمل، بينما يغلّفه كل محوّل في دوال مألوفة.

وهذا يعني إمكانية نقل المهارات بين أطر العمل، مع بقاء واجهة API متسقة.

في React، تستدعون useReactTable({ data, columns, getCoreRowModel })، فيعيد لكم كائن جدول. وهذا الكائن هو محور كل شيء.

فهو يحتفظ بكل الحالة الحالية، مثل الترتيب وتقسيم الصفحات والتحديد، ويكشف عن دوال مساعدة تقود تصيير JSX.

لا يعرض TanStack Table أي وسم HTML نيابةً عنكم. أنتم تكتبون عناصر table وthead وtbody وtr وth وtd بأنفسكم، ثم تطلبون من كائن الجدول المحتوى الذي يجب وضعه داخلها.

ويختلف هذا عن AG Grid أو Ant Design Table، اللذين يعرضان DOM الخاص بهما ويكشفان عن نقاط تخصيص محدودة.

تتضمن AG Grid وMaterial Table وAnt Design Table مسارات تصيير كاملة، وأنماطاً مضمّنة، وواجهات غنية للميزات جاهزة للاستخدام. وهي أسرع في إعداد النماذج الأولية، لكنها أصعب في التخصيص العميق.

يتطلب TanStack Table إعداداً أولياً أكبر، لكنه يمنحكم جدولاً متاحاً بالكامل ومتوافقاً تماماً مع هوية علامتكم، من دون صراع مع التجاوزات.

بما أن TanStack Table لا يشحن أي أنماط، وبما أنكم تستوردون نماذج الصفوف التي تستخدمونها فعلياً فقط، مثل الترتيب والتصفية وتقسيم الصفحات، يظل حجمه صغيراً.

أنتم تدفعون فقط مقابل الميزات التي تفعّلونها، مما يجعله مناسباً للتطبيقات الحساسة للأداء.

بما أن TanStack Table لا ينتج أي ترميز، فإن دمجه مع Tailwind CSS لا يتطلب أكثر من إضافة أسماء الأصناف إلى عنصري tr وtd اللذين تكتبونهما بأنفسكم. وينطبق الأمر نفسه على CSS Modules أو أي أسلوب تنسيق آخر.

ولا يحدث صراع في الأولوية النوعية، لعدم وجود أنماط مضمّنة تحتاج إلى تجاوزها.

يتطلب نهج Headless بالفعل كتابة مزيد من الشيفرة في البداية. فعليكم كتابة حلقة التصيير بأنفسكم وربط معالجات الحالة يدوياً.

لكنكم بعد إنشاء مكوّن الجدول الأساسي ستعيدون استخدامه في التطبيق بأكمله مع تنسيق متسق.

تقبل دالة useReactTable كائن إعداد يحتوي، كحد أدنى، على data، وهي مصفوفتكم من الكائنات، وcolumns، وهي مصفوفة ColumnDef، وgetCoreRowModel.

يكشف مثيل الجدول الناتج عن getHeaderGroups() للرؤوس، وعن getRowModel().rows لصفوف المحتوى، وتقومون بالتكرار عليها في JSX.

ابدؤوا بتثبيت @tanstack/react-table، ثم عرّفوا مصفوفة columns، واستدعوا useReactTable، وبعد ذلك اعرضوا عنصر table الخاص بكم باستخدام الدوال المساعدة. تتولى المكتبة إدارة كل الحالة والبيانات المشتقة، بينما تتولون أنتم كل الترميز.

يحافظ هذا الفصل الواضح على قابلية اختبار مكوّنات الجدول واتساق نظام التصميم لديكم.

ما الفائدة الأساسية من مكتبة واجهة Headless UI مثل TanStack Table؟

TanStack Table مكتبة جداول مستقلة عن إطار العمل وبلا واجهة عرض، توفر الحالة والمنطق وتترك لكم كل مسؤولية التصيير. تستدعون useReactTable، وتحصلون على مثيل للجدول، ثم تستخدمون دواله المساعدة بالتكرار لبناء الترميز الخاص بكم.

وهذا يعني عدم وجود أي تعارض في الأنماط، وحرية كاملة في اختيار إطار CSS، وحجم حزمة لا تدفعون فيه إلا مقابل ما تستخدمونه.