React Tree Grid - Potente Componente Lista en Árbol
- Cargue grandes cantidades de datos cargando dinámicamente datos secundarios bajo demanda.
- Incluya interacciones de IU flexibles como expandir y colapsar registros padres, edición en diálogos y más.
- Apariencia de IU atractiva con temas integrados como Fabric, Bootstrap, Material, etc.
Quick Overview Video
Trusted by the world’s leading companies
Resumen
El React Tree Grid es un control rico en funciones utilizado para visualizar datos jerárquicos y de autorreferencia de manera efectiva en un formato tabular (una estructura tipo árbol). Su rico conjunto de características incluye muchas funcionalidades: vinculación de datos, virtualización, edición, ordenación, búsqueda, filtrado, desplazamiento infinito, paginación, filas y columnas congeladas, exportación a múltiples formatos, agregación de filas y más.
Interactúe con el React Tree Grid en vivo
Se ejecuta en el navegador. No requiere instalación.
¿Por qué elegir Syncfusion React Tree Grid?
Alto rendimiento
Muestre datos jerárquicamente con un diseño optimizado que ofrece un alto rendimiento y permite cargar millones de registros en solo unos segundos.
Vinculación de datos fluida
Vincule datos sin problemas con diversas fuentes de datos locales y remotas como JSON, OData, WCF y servicios web RESTful con la ayuda de un motor de datos.
Cuadrícula jerárquica y autorreferencial
React Tree Grid está diseñado para visualizar datos autorreferenciales y jerárquicos en un formato tabular. Esto a su vez muestra la relación entre los registros padres e hijos.
Edición flexible
El React Tree Grid realiza operaciones de creación, lectura, actualización y eliminación (CRUD) con datos observables. Edita con un Array de JSON o servicio de datos remoto con el motor de datos.
Se adapta a cualquier resolución
El Tree Grid tiene un diseño altamente responsivo y optimizado para computadoras de escritorio, pantallas táctiles y teléfonos inteligentes. Funciona correctamente en todos los teléfonos móviles que utilizan iOS, Android o Windows OS.
Cree sus propios diseños de plantillas
Usando plantillas, los usuarios pueden crear una IU personalizada en el React Tree Grid basada en las necesidades de su aplicación utilizando una amplia gama de opciones de plantillas.
Temas atractivos y personalizables
Diseño de vanguardia con más de 5 temas integrados como Fluent, Tailwind CSS, Bootstrap, Material, Fabric y más. Utilice la herramienta en línea Theme Studio para personalizar los temas de Tree Grid fácilmente.
Globalización y localización
Permite a los usuarios de diferentes regiones usar el Tree Grid formateando fechas, moneda y numeración según sus preferencias.
Ejemplo de código de React Tree Grid
Comience fácilmente con el React Tree Grid usando unas pocas líneas simples de código TSX como se demuestra a continuación. También explore nuestro Ejemplo de React Tree Grid que muestra cómo renderizar y configurar un Tree Grid en React.
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './data';
function App() {
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks'>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category' width='150'/>
<ColumnDirective field='orderName' headerText='Order Name' width='170'/>
<ColumnDirective field='orderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='price' headerText='Price' width='100' textAlign='Right' type='number' format='C0' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;
Indicador de carga tipo Esqueleto (Skeleton)
El Tree Grid muestra un efecto de brillo (shimmer) como indicador de carga mientras recupera los datos y los vincula a la cuadrícula durante el renderizado inicial, la actualización o después de realizar acciones de cuadrícula como ordenar, filtrar y más. El Tree Grid ofrece dos tipos de efectos: spinner y shimmer.
` ## Columna Las columnas definen el esquema de una fuente de datos en React Tree Grid. Las características incluyen formateo, definiciones de columnas, ajuste de texto, selector de columnas, menú de columnas, reordenación de columnas y otras características importantes.
Paginación
A través de la paginación, se puede visualizar un segmento de datos de la fuente de datos asignada. El React Tree Grid ofrece una IU de paginador integrada con opciones para personalizar toda su interfaz. También cuenta con un modo de paginación bajo demanda para la recuperación efectiva de datos desde servicios web remotos.
Ordenación
El React Tree Grid permite a los usuarios ordenar una columna simplemente haciendo clic en el encabezado. Ctrl + clic en el encabezado realiza una ordenación múltiple. Ordene los datos en orden ascendente o descendente.
Filtrado
El filtrado ayuda a ver registros específicos o relacionados que cumplen con un criterio de filtrado determinado. Admite varios tipos de filtros, incluido un poderoso filtro tipo Excel. El filtro de React Tree Grid permite a los usuarios elegir tipos de filtros apropiados, definir su propia lógica de filtrado personalizada y personalizar la IU de filtrado según las necesidades de su aplicación. Se puede definir el filtrado con registros padres o hijos relacionados.
Selección
React Tree Grid permite seleccionar filas o celdas. También se pueden seleccionar una o más filas o celdas manteniendo presionado Ctrl o Command, o mediante programación.
Fila
Las filas en Tree Grid representan la información de cada objeto de datos de la fuente de datos. Admite la expansión / colapso de filas secundarias, reordenación de filas, sangría / anulación de sangría de filas para cambiar sus niveles de jerarquía y muchas más funciones.
Edición
El React Tree Grid proporciona soporte completo para operaciones de creación, lectura, actualización y eliminación (CRUD). Además de los componentes de edición integrados para editar un valor de columna en particular, mediante el soporte de plantillas los usuarios pueden crear componentes de edición personalizados que se adapten a las necesidades de su aplicación. Realiza operaciones de edición con colecciones JSON o servicios de datos remotos con la ayuda del motor de datos.
Arrastrar y soltar filas
El React Tree Grid permite a los usuarios arrastrar y soltar filas dentro del mismo u otro Tree Grid. Esta funcionalidad es especially útil para reorganizar datos y crear una experiencia de usuario más intuitiva.
Agregación
Los agregados para los valores de las columnas se pueden mostrar fácilmente utilizando la función de agregación. Los agregados se pueden personalizar para mostrar su valor en cada jerarquía con un conjunto de tipos de resumen predefinidos.
Columnas congeladas
Las columnas congeladas son visibles a la izquierda o derecha o en ambos lados del Tree Grid y hacen que el resto del contenido de la cuadrícula sea desplazable. Se utiliza principalmente para comparar valores de celdas.
Búsqueda
Puede buscar los registros utilizando el método de búsqueda. Integre el cuadro de texto de búsqueda en la barra de herramientas del React Tree Grid agregando elementos de búsqueda.
Diseño de IU adaptativo
La interfaz de usuario del React Tree Grid está personalizada y rediseñada para ofrecer excelentes vistas y usabilidad en pantallas pequeñas. Los diálogos de filtro, búsqueda y edición son adaptativos al tamaño de la pantalla.
Información sobre herramientas (Tooltip) personalizada
El componente React Tree Grid le permite configurar Tooltips para las celdas del Tree Grid. Desplace el cursor sobre los nodos del árbol para mostrar el texto de la información sobre herramientas.
Encabezados pegajosos (Sticky headers)
Mantenga los encabezados de columna siempre visibles mientras se desplaza por los datos. El encabezado pegajoso mejora la usabilidad al proporcionar un contexto constante, facilitando la interpretación y el análisis de grandes conjuntos de datos.
Exportación
Exportación a Excel, PDF, CSV
Exporte fácilmente el control React Tree Grid en varios formatos de archivo como Excel, PDF o CSV. Los usuarios también pueden personalizar mediante programación el documento exportado.
Impresión
Los usuarios pueden imprimir datos utilizando la opción de impresión de la barra de herramientas o mediante programación. Imprima todas las filas de un React Tree Grid independientemente del número de páginas o imprima solo la página que se está viendo actualmente.
Características adicionales
Altura de fila
La altura de la fila es un factor importante al mostrar el número de registros en la vista, y se puede personalizar sin esfuerzo según los requisitos de la IU de la aplicación. También es posible establecer la altura de la fila condicionalmente.
Copiar al portapapeles
El portapapeles proporciona una opción para copiar los datos de las filas o celdas seleccionadas al portapapeles. Use las combinaciones de teclas Ctrl+C y Ctrl+Shift+H para copiar datos con y sin encabezados, respectivamente.
Menú contextual
El menú contextual mejora la acción del usuario con React Tree Grid mediante un menú emergente. Aparece cuando se hace clic derecho en la celda, el encabezado o el paginador. Además de los elementos de menú predeterminados integrados, le permite agregar elementos de menú contextual personalizados.
Ancho y alto
Permite cambiar el tamaño del React Tree Grid configurando las propiedades de ancho y alto. Aparecerán barras de desplazamiento horizontal y vertical cuando el contenido exceda el elemento React Tree Grid. Para que el React Tree Grid llene su contenedor padre, el usuario simplemente debe establecer el alto y el ancho al 100%.
Encabezados apilados
Los encabezados apilados permiten agrupar y visualizar los encabezados de las columnas de forma apilada. No hay límite para la cantidad de columnas que se pueden apilar. Permite al usuario realizar todas las acciones de React Tree Grid, incluso cuando las columnas están apiladas.
Accesibilidad
Navegación por teclado
El Tree Grid garantiza que cada celda sea accesible mediante el teclado. Las funciones principales como expandir o colapsar filas secundarias, ordenar, seleccionar y editar se pueden realizar utilizando solo comandos de teclado; no se requiere interacción con el mouse. Esto ayuda a crear aplicaciones altamente accesibles utilizando este componente.
Lector de pantalla
El React Tree Grid tiene soporte completo de accesibilidad WAI-ARIA. Su interfaz de usuario incluye elementos visuales de alto contraste, lo que ayuda a las personas con discapacidad visual a tener la mejor experiencia de visualización. Además, las descripciones válidas de la interfaz de usuario son fácilmente accesibles a través de tecnologías de asistencia como los lectores de pantalla.
Derecha a izquierda (RTL)
El renderizado de derecha a izquierda permite mostrar el texto y el diseño del React Tree Grid de derecha a izquierda. Esto mejora la experiencia del usuario y la accesibilidad para los idiomas RTL.
¿No está seguro de cómo crear su primer React Tree Grid? Nuestros videos tutoriales y documentación pueden ayudarle.
Me encantaría verlo ahora Me encantaría leerlo ahoraDescubra el ecosistema completo de componentes React de Syncfusion
Explore más de 140+ componentes de interfaz de usuario de React que incluyen controles establecidos y listos para producción, y los últimos componentes puros de React creados de forma nativa para el desarrollo de aplicaciones web modernas.
-
Componentes de React
-
Componentes puros de React
-
COMPONENTES INTELIGENTESCUADRÍCULASMENÚS DESPLEGABLESENTRADAS DE DATOSVISUALIZACIÓN DE DATOSCALENDARIOSNAVEGACIÓNBOTONESCHAT INTERACTIVONOTIFICACIÓNFORMULARIOS
-
CuadrículasVisualización de datosNavegaciónEntradas
Preguntas frecuentes
¿Por qué debería elegir Syncfusion React Tree Grid?
El Syncfusion React Tree Grid proporciona las siguientes características:
Cargue grandes cantidades de datos cargando dinámicamente datos secundarios bajo demanda.
Incluya interacciones de IU flexibles como expandir y colapsar registros padres, edición en diálogos y más.
Vinculación de datos flexible con soporte para usar fuentes de datos locales y remotas como JSON, servicios RESTful, servicios OData y servicios WCF.
- Uno de los mejores Tree Grid de React en el mercado que ofrece una interfaz de usuario rica en funciones para interactuar con el software.
- Apariencia de IU atractiva con temas integrados como Fabric, Bootstrap, etc.
- Configuración y API sencillas.
- Compatible con todos los navegadores modernos.
Amigable con el tacto móvil y responsivo.
Amplios recursos de aprendizaje, como demos and documentación, para aprender rápidamente y comenzar con React Tree Grid.
¿Dónde puedo encontrar la demo de Syncfusion React Tree Grid?
Puede encontrar nuestra demo de React Tree Grid, que demuestra cómo renderizar y configurar el Tree Grid.
¿Puedo descargar y utilizar Syncfusion React Tree Grid gratis?
No, este es un producto comercial y requiere una licencia paga. Sin embargo, también está disponible una licencia comunitaria gratuita para empresas e individuos cuyas organizaciones tengan menos de $1 millón de USD en ingresos brutos anuales y cinco o menos desarrolladores.
¿Cómo empiezo con Syncfusion React Tree Grid?
Un buen lugar para comenzar sería nuestra completa documentación de inicio.
Nuestros clientes nos aman
Con un excelente conjunto de herramientas y un gran equipo de soporte, Syncfusion® reduce el tiempo de desarrollo de los clientes.Estas son algunas de sus experiencias.
Aweseome, enough said. really
Easy usability, solving real life problems. easy to implement. most of the cases has the operators and settings possibilities you right away need. never fails to impress
Oliver O
Geschäftsführung Kreation/Artdirektion
A giant framework with great pricing options
I have loved the components and options that Syncfusion has, besides, its documentation, demos, and Support are excellent.
Alejandro Javier V
CEO
Ver historias de éxito reales
Desarrolladores de todo el mundo confían en Essential Studio de Syncfusion para simplificar proyectos complejos y acelerar la entrega. Con una amplia biblioteca de controles de interfaz de usuario, potentes SDK y soporte confiable, Essential Studio ayuda a los equipos a crear aplicaciones de nivel empresarial con confianza.
Explorar estudios de casoIndustria
Desarrollo de software
75% Reducción de costos
50% Desarrollo más rápido
Industria
Servicios públicos (petróleo y gas)
450+ horas ahorradas
Procesos optimizados y horas de esfuerzo de desarrollo ahorradas.
Funciones avanzadas y flexibles
Usuarios potenciados mediante una funcionalidad sólida y versátil.
Industria
Software y tecnología
1000+ horas ahorradas
Desarrollo acelerado con componentes de interfaz de usuario listos para empresa.
Gestión eficiente de archivos
Flujos de trabajo optimizados con bibliotecas de documentos sin crearlas desde cero.
Industria
Software y tecnología
2 años de retraso evitado
Se evitaron dos años de retrasos gracias a la planificación proactiva.
Entrega punctual
Proyectos entregados a tiempo utilizando controles de confianza.
Industria
Servicios de TI y consultoría de TI
Rendimiento Mejorado
Grandes conjuntos de datos gestionados con fácil personalización y depuración rápida.
Altamente personalizable
Controles plug-and-play con integración rápida de plantillas.
Industria
Servicios profesionales
Acceso instantáneo
Disponibilidad rápida de funciones y recursos.
Dependencias reducidas
Menos dependencias para un desarrollo más rápido.
Calificado por usuarios de todo el mundo
Recursos de Syncfusion React Tree Grid
Soporte Técnico
Contactar a Soporte
Foros de la comunidad
Solicitudes de funciones y reportes de errores
Contactar a Soporte
Foros de la comunidad
Solicitudes de funciones y reportes de errores
Kits de IU
Descarga de Figma
Descarga de Figma
Premios
Grandeza: Decir que la tienes es una cosa, pero significa más cuando otros la reconocen. Syncfusion® se enorgullece de haber recibido los siguientes premios de la industria.
