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 es un componente de cuadrícula de datos y editor tabular para React que proporciona una interfaz de hoja de cálculo interactiva. Está diseñado para gestionar datos tabulares con soporte integrado para edición de celdas y navegación por teclado. El proyecto destaca por su flexibilidad en el renderizado y la estructura, permitiendo reemplazar los elementos de tabla estándar con marcado personalizado como listas o divs. Admite el renderizado de celdas personalizado mediante un sistema de mapeo que intercambia las celdas predeterminadas por componentes especializados basados en los metadatos de la celda. El componente cubre amplias capacidades para la gestión de datos tabulares, incluyendo el seguimiento del estado para ediciones, eliminaciones de rangos y pegado de datos. También proporciona controles para el comportamiento de las celdas, como definir el estado de solo lectura y la expansión de columnas.

Glide Data Grid es una cuadrícula de datos virtualizada para React y TypeScript que utiliza la API de HTML Canvas para renderizar millones de celdas con fluidez. Está diseñada como una tabla de datos accesible que mantiene altas tasas de fotogramas al mostrar y navegar por conjuntos de datos masivos. El proyecto se distingue por una arquitectura de renderizado basada en canvas que utiliza renderizado perezoso (lazy rendering) y una API de dibujo personalizada. Esto permite un contenido de celda especializado y un estilo basado en datos que evita los ciclos de actualización estándar del DOM para asegurar un alto rendimiento. La cuadrícula proporciona capacidades integrales de diseño y gestión de datos, incluyendo combinación de celdas, columnas fijas, alturas de fila variables y cálculo automático del ancho de columna. También incluye soporte integrado para edición de celdas, selección de elementos y búsqueda de datos en la cuadrícula.

Grid.js es una biblioteca de JavaScript agnóstica al framework para renderizar cuadrículas de datos interactivas. Permite la visualización de información estructurada en formatos tabulares en diferentes entornos frontend, admitiendo la población de datos desde arrays estáticos o importaciones JSON. La biblioteca cuenta con un sistema de plugins para extender los componentes de la interfaz de usuario y la lógica, así como un pipeline de datos personalizado para transformar la información antes de que se muestre. Incluye soporte integrado para la localización multilingüe para traducir elementos de la interfaz y mensajes. El proyecto cubre capacidades básicas de visualización de datos, incluyendo ordenamiento, filtrado y visualización dinámica de cuadrículas. Proporciona herramientas para gestionar la configuración y la integración con varios entornos de 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 es una biblioteca de JavaScript diseñada para renderizar y gestionar estructuras de datos jerárquicas e interactivas dentro de interfaces web. Proporciona un framework para mostrar información anidada compleja como vistas de árbol o cuadrículas, admitiendo tanto la navegación de árbol estándar como diseños de datos tabulares. La biblioteca se distingue por una arquitectura de plugins modular que permite a los desarrolladores inyectar comportamientos y elementos visuales personalizados en el ciclo de vida del componente. Maneja grandes conjuntos de datos implementando carga perezosa bajo demanda, que obtiene nodos hijos solo cuando es necesario para mantener la capacidad de respuesta. Los usuarios pueden interactuar con los datos a través de reordenamiento de arrastrar y soltar, edición de nodos en línea y selección de múltiples nodos con propagación de estado automática. Más allá del renderizado básico, el proyecto incluye herramientas integrales para la gestión de estado y la manipulación de datos. Admite filtrado de contenido en tiempo real, navegación por teclado y la persistencia de los estados de expansión y selección de nodos a través de sesiones de navegador. La biblioteca está construida sobre un sistema de normalización de datos recursiva y delegación de eventos para garantizar un rendimiento y manejo de interacción consistentes a través de varias configuraciones jerárquicas.

Esta biblioteca es un componente de React diseñado para renderizar cuadrículas de datos de alto rendimiento. Proporciona un framework estructurado para mostrar grandes conjuntos de datos utilizando virtualización de filas basada en ventanas, lo que asegura que solo la porción visible de los datos se renderice en el modelo de objetos del documento (DOM). El componente destaca por capacidades avanzadas de diseño y navegación, incluyendo soporte nativo para encabezados y columnas fijas que permanecen ancladas durante el desplazamiento. Los desarrolladores pueden ejercer control imperativo sobre el viewport de la tabla para navegar a índices o desplazamientos de píxeles específicos, mientras gestionan estados complejos de la cuadrícula como la visibilidad de columnas, la ordenación y la expansión de filas a través de una configuración centralizada. La biblioteca admite una amplia gama de funciones interactivas, incluyendo renderizado de celdas personalizado, fijación de columnas y la capacidad de añadir filas de resumen para datos agregados. Maneja conjuntos de información densos ofreciendo alineación de columnas flexible, control de ancho y truncamiento de texto, permitiendo la creación de tablas interactivas que responden a eventos del usuario como clics y pasadas de ratón.

Este proyecto es un componente de cuadrícula de datos (data grid) de alto rendimiento para React diseñado para renderizar grandes conjuntos de datos dentro de una interfaz estilo hoja de cálculo. Proporciona un framework para mostrar información tabular estructurada mientras permite interacciones complejas basadas en celdas y tareas de gestión de datos. El componente se distingue por su soporte para flujos de trabajo de edición similares a hojas de cálculo, incluyendo navegación impulsada por teclado y la capacidad de inyectar componentes personalizados en celdas individuales. Los usuarios pueden gestionar dinámicamente el diseño de la cuadrícula cambiando el tamaño de las columnas y organizando los encabezados, asegurando que la interfaz se adapte a necesidades específicas de visualización de datos. La cuadrícula incluye capacidades para manejar grandes volúmenes de información a través de renderizado en ventana (windowed rendering) y carga perezosa (lazy loading), que mantienen el rendimiento procesando solo el subconjunto visible de datos. También ofrece control imperativo a través de referencias de componentes, permitiendo la manipulación programática de posiciones de desplazamiento y estados de selección.

Esta librería es un componente de rejilla de datos de alto rendimiento para aplicaciones React, diseñado para gestionar y mostrar grandes conjuntos de datos. Proporciona un sistema de configuración declarativo que permite a los desarrolladores definir estructuras de tablas, fuentes de datos y conmutadores de funciones a través de un esquema de objetos estructurado. La librería se distingue por un motor de diseño flexible que admite requisitos de interfaz de usuario complejos, como fijar encabezados y columnas específicas a los bordes del viewport durante el desplazamiento. Utiliza renderizado virtualizado para mantener la capacidad de respuesta de la interfaz mostrando solo el subconjunto visible de datos, asegurando un rendimiento consistente independientemente del recuento total de elementos. Más allá de sus capacidades principales de diseño y rendimiento, el proyecto ofrece amplias opciones de personalización. Los desarrolladores pueden inyectar componentes React personalizados para definir la apariencia y el comportamiento de celdas individuales y aplicar estilos visuales a través de variables CSS con alcance, lo que permite una presentación de datos personalizada sin modificar la lógica interna del componente.