29 dépôts
Efficiently rendering only the visible portion of a large list to maintain performance.
Distinct from Dynamic List Rendering: Specifically targets performance for high-volume data via dynamic item creation, whereas dynamic list rendering often refers to reactive updates.
Explore 29 awesome GitHub repositories matching user interface & experience · Virtualized List Rendering. Refine with filters or upvote what's useful.
This project is a collection of official plugin packages and a native integration library designed to provide a consistent interface for accessing hardware and software functionality across different mobile and desktop platforms. It serves as a native platform bridge, enabling cross-platform applications to invoke native code and manage operating system dependencies. The project utilizes a federated plugin architecture, splitting plugins into common interfaces and separate platform implementations to allow for independent development and extension. It further supports native integration throu
Creates list items dynamically as they scroll into view to maintain performance with high volumes of data.
mui is a mobile UI component framework and native-like web UI kit designed for building high-performance mobile web interfaces. It functions as a mobile web performance framework and gesture-based interface library to eliminate browser lag and mimic the behaviors and animations of native mobile applications. The framework focuses on implementing common mobile UX patterns, including pull-to-refresh functionality, swipe-to-action menus, and sliding side navigation. It provides specialized tools for gesture-driven interface development to ensure an immediate visual response to touch interactions
Optimizes high-volume lists by rendering only the visible portion of the dataset.
tiny-rdm is a Redis database manager and GUI client that provides a visual interface for performing CRUD operations on strings, hashes, lists, sets, and streams. It functions as a comprehensive administration tool, acting as a performance monitor, a pub/sub client, and a web dashboard for monitoring Redis activity. The project distinguishes itself through advanced data visualization and debugging capabilities, including the ability to organize keys into a hierarchical tree structure using custom delimiters. It supports the decoding and decompression of stored values through built-in methods o
Efficiently renders only the visible portion of massive key lists to maintain interface performance.
vue-awesome-swiper is a Vue.js component wrapper for the Swiper library, providing a declarative interface for creating touch-enabled carousels. It serves as a virtualized slider component that can render only visible slides to maintain performance when handling large datasets. The project distinguishes itself through high-performance rendering and a wide array of visual effects, including 3D transitions, parallax movements, and image zoom capabilities. It also supports the synchronization of multiple slider instances and provides accessibility features such as ARIA roles and focus-scrolling
Uses virtualization to render only visible slides, ensuring high performance with large datasets.
Pragmatic Drag and Drop is a TypeScript library that provides a complete system for implementing drag and drop interactions in web applications. It handles the full lifecycle of drag operations, from registering drop targets and monitoring drag events to managing cleanup functions, all through a structured adapter-based approach. The library supports a wide range of data manipulation patterns, including reordering items within lists, tables, trees, virtual lists, and side navigation, as well as moving items between lists and across columns in a board layout. It also enables swapping items in
Supports reordering items within a virtualized list via drag-and-drop.
Bootstrap Table is a jQuery plugin for rendering interactive data grids with sorting, pagination, and filtering. It features a remote data integration system for fetching and synchronizing content from JSON endpoints using AJAX and server-side processing. The project includes a styling layer that adapts markup to work with various CSS frameworks, such as Bootstrap, Semantic UI, Bulma, and Material Design. It provides specialized rendering modes, including a hierarchical tree grid for parent-child row relationships and a responsive card-view table that transforms grids into mobile-friendly lay
Uses a virtualized renderer to display only visible rows, ensuring high performance and low memory usage.
This project is a cross-platform mobile carousel component for creating swipeable image and content sliders. It functions as a virtualized list component that maintains performance by removing off-screen elements and utilizes a native-driver animation library to map scroll offsets to style properties on the native thread for lag-free transitions. The library provides a parallax image gallery capable of shifting images relative to scroll progress to create a sense of depth. It also features a layout system that supports right-to-left orientations for languages such as Arabic and Hebrew. Capab
Employs virtualized list rendering to maintain performance by removing off-screen elements.
Vue Native is a framework that compiles Vue.js single-file components into React Native primitives, enabling developers to build native iOS and Android applications using Vue syntax. At its core, it provides a build-time compiler that transforms Vue components into React components, while hooking Vue's dependency-tracking reactivity system into React's component lifecycle to trigger re-renders when observed data changes. The framework wraps React Native's native module bridge so Vue components can access device APIs through Vue's reactivity system, and maps Vue's component syntax to React Nat
Ships a performant flat list component with pull-to-refresh and scroll loading.
This project is a technical study resource and interview preparation guide focused on the React library. It provides a comprehensive frontend interview question bank and concept references designed to help developers master core library primitives and prepare for professional job interviews. The resource covers detailed explanations of React's technical architecture, including state management patterns, performance optimization strategies, and component design. It serves as a knowledge assessment tool for developers to test their understanding of modern frontend engineering through a structur
Discusses virtualization and pagination strategies for efficiently rendering massive lists.
nativescript-vue is a framework for building native iOS and Android applications using Vue components and a reactive state system. It functions as a cross-platform mobile UI library that renders platform-specific views instead of web views, utilizing a native mobile application bridge to connect Vue logic to NativeScript APIs for direct access to mobile hardware and OS features. The framework employs a reactive mobile component system to create high-performance screens and dynamic lists with automatic state updates. This architecture allows for the development of native mobile applications fr
Provides a high-performance system for rendering scrollable data collections using virtualized native lists.
React Virtuoso is a React component library for rendering large datasets efficiently through virtualized lists, grids, tables, and chat interfaces. It automatically measures variable-height items at runtime, computes accurate scroll offsets without requiring fixed sizes, and renders only the items within the visible viewport plus a configurable buffer zone. The library manages scroll position through a state machine that tracks direction, position, and anchor items to handle auto-scroll, sticky headers, and bidirectional loading. The library distinguishes itself with specialized components fo
Renders large lists efficiently by displaying only items in the visible viewport.
Ce projet est un composant de tableau de données React intégré avec shadcn/ui. Il fournit un ensemble de grilles de données tabulaires qui prennent en charge le tri, le filtrage et la pagination. L'implémentation inclut une grille de données virtualisée et un tableau à défilement infini, qui permettent le rendu de grands jeux de données en chargeant les enregistrements de manière incrémentale ou en n'affichant que les éléments visibles dans la fenêtre d'affichage. Il fonctionne également comme un tableau collaboratif en temps réel, permettant à plusieurs utilisateurs de gérer et d'éditer des jeux de données partagés simultanément. Le composant couvre la gestion interactive des données et la visualisation de données complexes. Cela inclut la capacité de gérer la sélection de lignes via des barres d'action contextuelles et l'utilisation d'un filtrage basé sur la définition des colonnes pour organiser les enregistrements.
Maintains high performance by rendering only the rows currently visible in the viewport.
Avalon is a client-side MVVM JavaScript framework that binds model data to DOM elements and automatically updates views when state changes. It functions as a component-based UI framework, encapsulating markup, logic, and styles into reusable custom components that can be composed across pages, while also serving as a virtual DOM diffing engine that computes minimal DOM updates by comparing lightweight in-memory view tree snapshots. The framework distinguishes itself through a template directive compiler that transforms declarative HTML attributes like ms-repeat and ms-if into executable view
Renders big tables or lists without blocking the browser during page load, avoiding white-screen pauses.
Recyclerlistview est un composant de liste virtualisée multiplateforme pour React Native et le web. Il fonctionne comme une bibliothèque d'interface utilisateur de recyclage de cellules qui réutilise un petit ensemble de composants hors écran en mettant à jour leurs données plutôt que de créer de nouvelles vues pour chaque élément. Le framework inclut un moteur de mise en page en grille dynamique qui supporte les grilles décalées et les hauteurs d'éléments variables, permettant une commutation instantanée entre les modes de vue liste et grille. La bibliothèque fournit des capacités pour la gestion du défilement virtuel, incluant le suivi de visibilité, les en-têtes collants (sticky headers) et la restauration de la position de défilement. Elle supporte également l'implémentation du défilement infini et la possibilité de personnaliser les animations des éléments lors des changements de hauteur ou de position.
Minimizes memory overhead by recycling non-visible views during infinite scrolling of large datasets.
Ce dépôt est une collection d'implémentations de référence et de galeries démontrant les meilleures pratiques pour le système Android View. Il fournit un ensemble d'exemples pratiques pour construire des interfaces utilisateur, y compris une galerie de composants et des guides d'implémentation pour les mises en page, les performances de liste et la conception de mouvement. Le projet se distingue par des échantillons détaillés pour coordonner les animations de mise en page et les effets de transition. Il inclut des démonstrations spécialisées pour des animations de mouvement complexes utilisant des images clés et l'interpolation, ainsi qu'un outil de visualisation pour les courbes d'interpolation d'animation afin de déterminer les paramètres de mouvement. La base de code couvre de vastes domaines de capacités, notamment la gestion de liste haute performance avec recyclage de vue et mises à jour différentielles, la navigation paginée avec synchronisation d'onglets et l'adaptabilité de l'interface pour les modes multi-fenêtres et écran partagé. Il inclut également des échantillons pour les mises en page de cartes, le contenu web intégré et les tests d'interface utilisateur automatisés pour les transitions de page.
Renders large scrolling lists using view recycling to maintain high performance.
Ce projet est un modèle administratif basé sur React et un kit UI conçu pour construire des tableaux de bord. Il fournit une collection complète de mises en page pré-stylisées, une bibliothèque de composants accessible et un framework UI basé sur Sass pour créer des interfaces administratives. Le modèle est spécifiquement structuré comme un projet optimisé pour l'IA, utilisant des modèles de codage et une organisation conçus pour aider les assistants IA à générer du code React cohérent et prêt pour la production. Il dispose d'un système de style flexible utilisant des variables Sass et des propriétés personnalisées CSS pour prendre en charge des thèmes clairs et sombres personnalisables. Le kit couvre un large éventail de capacités d'interface, y compris des widgets de visualisation de données, des tableaux interactifs avec tri et pagination, et des éléments de formulaire complexes comme des assistants multi-étapes. Il inclut des systèmes de navigation de haut niveau tels que des barres latérales et des fils d'ariane, ainsi que des composants structurels comme des grilles réactives, des boîtes de dialogue modales et des interfaces de calendrier accessibles.
Optimizes the display of large datasets by rendering only the visible subset of items during scrolling.
vue-virtual-scroll-list is a virtualized list implementation for Vue applications. It provides a component that renders only the visible items of a large dataset to maintain high performance and limit the number of active DOM elements. The project functions as a high-performance list renderer and dynamic viewport manager. It calculates real-time list dimensions and scroll offsets to display thousands of data entries without degrading browser memory usage or performance. The system includes programmatic scroll control to navigate to specific item indices or pixel offsets. It also provides uti
Implements a virtualized rendering strategy that displays only the visible portion of a large list.
Ce projet est un guide de référence et une ressource technique pour construire des interfaces utilisateur avec le framework SwiftUI. Il fournit une collection complète d'exemples de code, de documentation et une bibliothèque de composants d'implémentations de vues réutilisables et de modèles de mise en page. La ressource inclut une carte de compatibilité qui lie les vues déclaratives modernes à leurs équivalents impératifs dans le framework UIKit. Cette documentation aide à la migration d'UIKit vers SwiftUI en fournissant des conseils sur l'encapsulation des contrôleurs de vue hérités et des sous-classes de vue au sein d'une hiérarchie déclarative. Le guide couvre un large éventail de capacités d'interface, incluant l'implémentation de structures de navigation, de mises en page basées sur des grilles et des piles, et le rendu de listes performant. Il détaille également l'utilisation de composants interactifs pour l'entrée utilisateur, la reconnaissance de gestes et l'application de modificateurs visuels pour le stylage.
Utilizes lazy loading for large collections to maintain high frame rates and stable memory usage.
Fixed-data-table est une bibliothèque de composants React conçue pour le rendu de grands ensembles de données au sein d'interfaces de grille structurées et défilables. Elle fonctionne comme une table virtualisée, optimisant les performances en ne rendant que les lignes actuellement visibles dans la fenêtre d'affichage. La bibliothèque se distingue par son accent sur le maintien du contexte pendant la navigation, utilisant des mises en page à en-tête fixe et une gestion d'état de défilement synchronisée. Elle emploie un accès aux données basé sur l'index pour mapper les informations vers des coordonnées de grille spécifiques, permettant une personnalisation modulaire des cellules et une configuration flexible des colonnes. Le composant prend en charge une gestion complète de la présentation de la table, incluant le redimensionnement des colonnes et les ajustements de hauteur de ligne. Il fournit un contrôle programmatique sur le comportement de défilement, permettant la synchronisation du mouvement de la table avec des éléments d'interface externes ou des gestes personnalisés.
Enables efficient rendering of massive datasets in a scrollable view while maintaining context with fixed headers.
Ce projet est une référence technique et un guide pour optimiser les performances des applications Angular. Il fournit une liste de contrôle complète pour améliorer la vitesse et l'efficacité en se concentrant sur l'optimisation des bundles, les meilleures pratiques de rendu et l'exécution au moment de l'exécution (runtime). Le guide couvre un large éventail de différenciateurs, notamment la mise en œuvre de stratégies d'applications web progressives (PWA) via des service workers et la mise en cache hors ligne. Il détaille également des méthodes pour améliorer les temps de chargement perçus en utilisant le rendu côté serveur et les shells d'application. Le dépôt fournit des conseils sur des domaines de compétences plus larges tels que le réglage de la détection de changement, l'utilisation de web workers pour décharger les calculs lourds, et la gestion du DOM via le défilement virtuel. Il couvre également la réduction de la taille des bundles via le tree-shaking, la minification et le fractionnement des modules en chargement paresseux (lazy-loading).
Improves DOM performance using tracking functions and virtual scrolling to limit rendered elements.