Awesome GitHub RepositoriesData Grid Components

MUI X is a collection of advanced React UI components for building data-rich applications, including a data grid, charting library, date and time pickers, scheduler, and tree view. The library is built with accessibility as a core principle, ensuring all components meet WCAG and WAI-ARIA standards for keyboard navigation and screen reader announcements. The components are designed for extensibility and performance. The data grid offers comprehensive data management with sorting, filtering, pagination, column pinning, row grouping, inline editing, and Excel export. The charting library support

react-datasheet هو مكون شبكة بيانات React ومحرر جدولي يوفر واجهة جدول بيانات تفاعلية. تم تصميمه لإدارة البيانات الجدولية مع دعم مدمج لتحرير الخلايا والتنقل عبر لوحة المفاتيح. يتميز المشروع بمرونته في العرض والهيكل، مما يسمح باستبدال عناصر الجدول القياسية بترميز مخصص مثل القوائم أو divs. يدعم عرض الخلايا المخصص من خلال نظام تعيين يستبدل الخلايا الافتراضية بمكونات متخصصة بناءً على بيانات تعريف الخلية. يغطي المكون قدرات واسعة لإدارة البيانات الجدولية، بما في ذلك تتبع حالة التعديلات، وحذف النطاقات، ولصق البيانات. كما يوفر عناصر تحكم لسلوك الخلية، مثل تحديد حالة القراءة فقط ودمج الأعمدة.

Glide Data Grid هو شبكة بيانات افتراضية لـ React وTypeScript تستخدم واجهة برمجة تطبيقات HTML Canvas لعرض ملايين الخلايا بسلاسة. تم تصميمه كجدول بيانات يسهل الوصول إليه ويحافظ على معدلات إطارات عالية عند عرض وتصفح مجموعات البيانات الضخمة. يتميز المشروع ببنية عرض قائمة على Canvas تستخدم العرض الكسول (lazy rendering) وواجهة برمجة تطبيقات رسم مخصصة. يسمح هذا بمحتوى خلايا متخصص وتصميم قائم على البيانات يتجاوز دورات تحديث DOM القياسية لضمان أداء عالٍ. توفر الشبكة قدرات شاملة لتخطيط وإدارة البيانات، بما في ذلك دمج الخلايا، والأعمدة المجمدة، وارتفاعات الصفوف المتغيرة، وحساب عرض العمود التلقائي. كما يتضمن دعماً مدمجاً لتحرير الخلايا، واختيار العناصر، والبحث في بيانات الشبكة.

Grid.js هي مكتبة JavaScript مستقلة عن إطار العمل لتصيير شبكات البيانات التفاعلية. تسمح المكتبة بعرض المعلومات المهيكلة في تنسيقات جدولية عبر بيئات واجهة أمامية مختلفة، مع دعم ملء البيانات من مصفوفات ثابتة أو استيرادات JSON. تتميز المكتبة بنظام إضافات لتوسيع مكونات واجهة المستخدم والمنطق، بالإضافة إلى خط أنابيب بيانات مخصص لتحويل المعلومات قبل عرضها. تتضمن المكتبة دعماً مدمجاً للتعريب متعدد اللغات لترجمة عناصر الواجهة والرسائل. يغطي المشروع إمكانيات تصور البيانات الأساسية بما في ذلك الفرز والتصفية وتصور الشبكة الديناميكي. توفر المكتبة أدوات لإدارة إعدادات التكوين والتكامل مع بيئات JavaScript المختلفة.

Vue-easytable is a high-performance data grid component designed for the Vue.js framework. It provides a comprehensive interface for displaying and managing large-scale tabular data, utilizing virtual scrolling to maintain responsiveness by rendering only the visible subset of rows within the browser. The component offers spreadsheet-style interaction, enabling users to perform direct, in-place data editing and manipulation. It supports complex grid configurations, including column pinning, row expansion, and data filtering, allowing for the organization of structured information to improve r

Fancytree is a JavaScript library designed for rendering and managing interactive, hierarchical data structures within web interfaces. It provides a framework for displaying complex nested information as tree views or grids, supporting both standard tree navigation and tabular data layouts. The library distinguishes itself through a modular plugin architecture that allows developers to inject custom behaviors and visual elements into the component lifecycle. It handles large datasets by implementing on-demand lazy loading, which fetches child nodes only when required to maintain responsivenes

هذه المكتبة عبارة عن مكون React مصمم لعرض شبكات البيانات عالية الأداء. توفر إطار عمل منظماً لعرض مجموعات البيانات الكبيرة باستخدام افتراضية الصفوف القائمة على النافذة، مما يضمن عرض الجزء المرئي فقط من البيانات في نموذج كائن المستند. يتميز المكون بقدرات تخطيط وتنقل متقدمة، بما في ذلك دعم أصلي للرؤوس والأعمدة الثابتة التي تظل مثبتة أثناء التمرير. يمكن للمطورين ممارسة تحكم إلزامي على منفذ عرض الجدول للانتقال إلى فهارس أو إزاحات بكسل محددة، مع إدارة حالات الشبكة المعقدة مثل رؤية الأعمدة، والفرز، وتوسيع الصفوف من خلال تكوين مركزي. تدعم المكتبة مجموعة واسعة من الميزات التفاعلية، بما في ذلك عرض الخلايا المخصص، وتثبيت الأعمدة، والقدرة على إلحاق صفوف ملخصة للبيانات المجمعة. تتعامل المكتبة مع مجموعات المعلومات الكثيفة من خلال توفير محاذاة مرنة للأعمدة، والتحكم في العرض، واقتطاع النص، مما يسمح بإنشاء جداول تفاعلية تستجيب لأحداث المستخدم مثل النقرات والتحويم.

هذا المشروع عبارة عن مكون شبكة بيانات عالي الأداء لـ React مصمم لعرض مجموعات البيانات الكبيرة داخل واجهة نمط جدول البيانات. يوفر إطار عمل لعرض المعلومات الجدولية المهيكلة مع تمكين تفاعلات معقدة قائمة على الخلايا ومهام إدارة البيانات. يتميز المكون بدعمه لسير عمل التحرير الشبيه بجدول البيانات، بما في ذلك التنقل القائم على لوحة المفاتيح والقدرة على حقن مكونات مخصصة في خلايا فردية. يمكن للمستخدمين إدارة تخطيط الشبكة ديناميكياً عن طريق تغيير حجم الأعمدة وتنظيم الرؤوس، مما يضمن تكيف الواجهة مع احتياجات تصور البيانات المحددة. تتضمن الشبكة قدرات للتعامل مع كميات كبيرة من المعلومات من خلال العرض في النوافذ (windowed rendering) والتحميل الكسول، والتي تحافظ على الأداء عن طريق معالجة المجموعة الفرعية المرئية فقط من البيانات. كما توفر تحكماً إلزامياً من خلال مراجع المكونات، مما يسمح بالتلاعب البرمجي بمواضع التمرير وحالات التحديد.

هذه المكتبة عبارة عن مكون شبكة بيانات عالي الأداء لتطبيقات React، مصمم لإدارة وعرض مجموعات البيانات الكبيرة. يوفر نظام تكوين تعريفياً يسمح للمطورين بتحديد هياكل الجدول، ومصادر البيانات، ومفاتيح تبديل الميزات من خلال مخطط كائن منظم. تتميز المكتبة بمحرك تخطيط مرن يدعم متطلبات واجهة المستخدم المعقدة، مثل تثبيت الرؤوس وأعمدة محددة بحواف إطار العرض أثناء التمرير. تستخدم العرض الافتراضي للحفاظ على استجابة الواجهة من خلال عرض المجموعة الفرعية المرئية فقط من البيانات، مما يضمن أداءً متسقاً بغض النظر عن إجمالي عدد العناصر. بعيداً عن قدرات التخطيط والأداء الأساسية، يوفر المشروع خيارات تخصيص واسعة النطاق. يمكن للمطورين حقن مكونات React مخصصة لتحديد مظهر وسلوك الخلايا الفردية وتطبيق أنماط مرئية من خلال متغيرات CSS ذات النطاق، مما يسمح بعرض بيانات مخصص دون تعديل منطق المكون الداخلي.