Column Resizer JS

تولّد هذه الأداة سكرِبت تغيير حجم أعمدة قابل للنقل لجداول HTML. تستهدف مطوري الواجهة الأمامية وفِرَق المنتج الذين يبنون جِرْد بيانات ولوحات معلومات إدارية أو عروض تحليلية حيث يجب أن تتأقلم عرض الأعمدة مع المحتوى وتفضيلات المستخدم. الناتج عبارة عن مقطع JavaScript مستقل مع CSS اختياري يمكن لصقه في أي مشروع بدون تبعيات خارجية. المدخلات تشمل محدد CSS للجدول المستهدف وتكويناً للأعمدة كعرض ابتدائي وقيود. النتائج تدعم التخطيط المستمر عبر localStorage وتعمل في تخطيطات RTL وLTR. وهي مناسبة للجداول الثابتة ومجموعات البيانات الديناميكية، مع معالجة قوية لتغيرات حجم العرض.

يقوم هذا المُكوّن عملياً بثلاث مهام: (1) قراءة وثبيت عروض الأعمدة الأولية، (2) إدراج فواصل قابلة للسحب بين الأعمدة، و(3) تحديث العروض أثناء السحب مع تطبيق الحد الأدنى للعروض والحفاظ على سلامة الجدول. المنطق الأساسي ينشئ مقابض لكل عمود، يراقب تفاعل الماوس، يحسب عروض جديدة بالـ px أو النسب، ويحدّث الأنماط المضمنة أو الـ colgroup. يجنب ازدحام التخطيط عن طريق تقليل تحديثات، ويستخدم requestAnimationFrame للسحب السلس. إذا عدّل المستخدم محتوى العمود برمجياً، يمكن للنص البرمجي إعادة مزامنة العروض.

الجمهور المستهدف يشمل مهندسي الواجهة الأمامية الذين يدمجون جداول قابلة للتعديل، مصممي UX الذين يقيمون تصاميم قابلة للتكيف، وفرق QA التي تتحقق من التوافق بين المتصفحات. القيمة تكمن في حل تم اختباره ويأتي جاهزاً للاستخدام مع خيارات إعداد واضحة، نتائج متوقعة، وجهد تكامل منخفض. الميّزات الفريدة تشمل دعم الحدود الدنيا للعرض لكل عمود، إمكانية التوثيق، وعي RTL ووضع التوافق للجداول التي تحتوي على تعريفات Colgroup موجودة. كما يوفر مخرجات موجزة يمكن تكييفها مع tokens أسلوبية مخصصة.