React Data Grid - tabla flexible con UI rica
- Carga millones de registros en segundos.
- Diseño adaptable y optimizado para móviles.
- Edición flexible y selección intuitiva.
- Filtrado y agrupación al estilo Excel.
- Column and summary customization.
- Exportación sencilla a PDF, CSV y Excel.
Quick Overview Video
Trusted by the world’s leading companies
Descripción general
Explorar demostración en vivo
La Cuadrícula de datos de React es un componente de cuadrícula con muchas funciones para mostrar datos en formato tabular. Su amplia gama de funcionalidades incluye el enlace de datos, la edición, el filtrado al estilo de Excel, la clasificación personalizada, la agregación de filas, la selección y la compatibilidad con los formatos Excel, CSV y PDF.
¿Por qué elegir la Cuadrícula de datos de React de Syncfusion?
Alto rendimiento
Esfuerzos bien pensados, y se centra principalmente en un rendimiento rápido para cargar millones de registros en solo un segundo.
Enlace de datos sin problemas
Enlace datos sin problemas con varias fuentes de datos locales y remotas como JSON, OData, WCF y servicios web RESTful con la ayuda del administrador de datos.
Se adapta a cualquier resolución
DataGrid tiene un diseño altamente responsivo y un diseño optimizado para escritorios, pantallas táctiles y teléfonos inteligentes. Funciona bien en todos los teléfonos móviles que usan iOS, Android o Windows OS.
Edición flexible
La Cuadrícula de datos de React realiza operaciones de crear, leer, actualizar y eliminar (CRUD) de manera más fácil con una lista de objetos de negocio o servicio de datos remoto con la ayuda de un administrador de datos.
Cree sus propios diseños de plantilla
Permite a los usuarios crear experiencias de usuario personalizadas en la Cuadrícula de React según las necesidades de su aplicación utilizando una amplia gama de opciones de plantilla.
Temas atractivos y personalizables
Diseño de vanguardia con más de 5 temas incorporados como Fluent, Tailwind CSS, Bootstrap, Material, Fabric y más. Utilice la herramienta en línea Theme Studio para personalizar temas fácilmente.
Fácil exportación e impresión
Exporte el Data Grid en varios formatos de archivo, incluidos Excel, PDF y CSV. Imprima todas las filas, independientemente del número de páginas, así como la página actualmente vista.
Globalización y localización
Permite a los usuarios de diferentes idiomas utilizarlos formateando fechas, moneda y numeración para adaptarse a las preferencias.
DataGrid preparado para IA para obtener información más rápida
Nuestro DataGrid viene preparado para IA de forma predeterminada. Amplíelo fácilmente con búsqueda semántica, detección de anomalías o cualquier otra operación de IA que necesite. Obtenga respuestas rápidas y una exploración de datos más inteligente, todo en una sola cuadrícula.
-
Búsqueda semántica: Conecte su modelo PNL preferido para permitir a los usuarios consultar con frases naturales, sin necesidad de palabras clave exactas.
- Vea cómo agregar búsqueda semántica
-
Detección de anomalías: Conecte un servicio ML para encontrar tendencias o errores inusuales rápidamente y mantener el negocio en marcha.
- Vea cómo agregar detección de anomalías
Ejemplo de código de React DataGrid
Comience fácilmente con la cuadrícula de datos de React utilizando unas pocas líneas de código TSX como se muestra a continuación. Explore también nuestro ejemplo de React DataGrid que le muestra cómo renderizar y configurar un DataGrid en React.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { orderDetails } from './data';
import { SampleBase } from '../common/sample-base';
export class Default extends SampleBase<{}, {}> {
render() {
return (
<div className='control-pane'>
<div className='control-section'>
<GridComponent dataSource={orderDetails} height='350'>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='CustomerName' headerText='Customer Name' width='150'></ColumnDirective>
<ColumnDirective field='OrderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right' />
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' />
<ColumnDirective field='ShippedDate' headerText='Shipped Date' width='130' format='yMd' textAlign='Right'></ColumnDirective>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'></ColumnDirective>
</ColumnsDirective>
</GridComponent>
</div>
</div>
)
}
}
Edición
El componente DataGrid de React admite operaciones de creación, lectura, actualización y eliminación (CRUD). Además de los componentes de edición incorporados para editar un valor de columna en particular, se pueden crear componentes de edición personalizados utilizando plantillas de acuerdo con las necesidades de la aplicación. Con la ayuda de un administrador de datos, puede realizar operaciones de edición con una colección de matrices o un servicio de datos remoto.
Clasificación
Clasifique filas en orden ascendente o descendente contra una columna simplemente haciendo clic en el encabezado de React DataGrid. Clasifique los datos de varias columnas manteniendo presionada la tecla Ctrl + clic en el encabezado. Además, defina su propia lógica de clasificación personalizada según las necesidades de la aplicación.
Filtrado
El filtrado ayuda a ver registros particulares o relacionados que cumplen un criterio dado en la cuadrícula de datos. La cuadrícula de datos admite varios tipos de filtros, incluidos filtros potentes al estilo de Excel. Elija el tipo de filtro apropiado, defina su propia lógica de filtrado personalizada y personalice la interfaz de usuario de filtrado según las necesidades de la aplicación. También se pueden filtrar caracteres diacríticos.
Paginación
La paginación se utiliza para ver un segmento de datos de la fuente de datos asignada. La Cuadrícula de datos de React ofrece una interfaz de usuario de paginación incorporada con opciones para personalizar toda su interfaz de usuario. También tiene un modo de paginación bajo demanda para una recuperación de datos efectiva de servicios web remotos.
Selección
Seleccione filas o celdas usando la casilla de verificación o simplemente haciendo clic en ellas. Seleccione más de una fila o celda manteniendo presionada Ctrl, Shift o Command, o mediante programación.
Agrupación
Agrupe filas para mostrar los datos en una estructura jerárquica organizada en orden ascendente o descendente para facilitar la expansión y el colapso de registros. Hay una opción para agrupar registros de la columna deseada mediante la simple acción de arrastrar y soltar esa columna en un área interactiva.
Agregación
Las agregaciones para los valores de las columnas se pueden mostrar fácilmente utilizando la función de agregación. Las agregaciones se pueden personalizar para mostrar su valor en filas de resumen individuales, filas de resumen de grupo individuales o filas de encabezado de grupo.
Columna
Las columnas definen el esquema de la fuente de datos en la Cuadrícula de datos de React. Admite formato, generación automática de columnas, definiciones de columnas, inmovilización de filas y columnas, expansión de columnas, ajuste de texto, selector de columnas, menú de columnas y otras características.
Filas y columnas fijas
Las filas y columnas fijas son visibles en la parte superior y en la izquierda, derecha, ambas o en una posición fija, respectivamente, haciendo que el contenido restante de la cuadrícula sea desplazable. Esta función se utiliza principalmente para comparar los valores de las celdas.
Encabezado fijo
El encabezado de la Cuadrícula de datos de React debe estar en una posición fija cuando se desplaza el documento verticalmente para visualizar el contenido de la cuadrícula de datos junto con el encabezado de la columna.
Arrastrar y soltar filas
La Cuadrícula de React permite a los usuarios arrastrar y soltar filas a otra DataGrid o componente personalizado. Los usuarios también pueden arrastrar y soltar filas dentro de la misma DataGrid usando el icono de arrastre y transferir filas entre diferentes grupos.
Cuadrícula maestro-detalle
React Master Detail Grid es un escenario de caso de uso en el que los detalles de un registro se ven en una cuadrícula de datos separada al hacer clic en una fila en particular.
Diseño de IU adaptable
La interfaz de usuario de la Cuadrícula de datos de React se personaliza y rediseña para obtener excelentes vistas y usabilidad en pantallas pequeñas. Los diálogos de filtro, clasificación, búsqueda y edición se adaptan al tamaño de la pantalla y también renderizan los elementos de la fila en dirección vertical.
Indicador de carga de esqueleto
El control Cuadrícula de datos de React muestra el efecto Shimmer como un indicador de carga mientras recupera datos y los enlaza a la cuadrícula durante la representación inicial, la actualización o después de realizar acciones de la cuadrícula como ordenar, filtrar, agrupar y más. La cuadrícula de datos ofrece dos tipos de efectos de indicador de carga: spinner y shimmer.
Gestión del estado
La gestión del estado en el componente Cuadrícula de datos de React le permite mantener el estado de la cuadrícula incluso después de una actualización del navegador o al navegar a una página diferente dentro de la misma sesión del navegador. Esta función es especialmente beneficiosa para conservar la configuración y los datos de la cuadrícula después de una recarga de la página.
Actualización en vivo
La DataGrid actualiza los datos en vivo en sus celdas a intervalos de tiempo específicos. Estas actualizaciones ocurren sin causar ningún retraso o ralentización, lo que garantiza que el sistema siga siendo altamente receptivo y eficiente.
Gráficos integrados con Data Grid
Data Grid ahora se integra con el componente Charts, transformando los datos seleccionados de la cuadrícula en visualizaciones dinámicas e interactivas. Esta potente combinación de tablas y gráficos permite a los usuarios obtener información más clara de un vistazo. Personalice los tipos de gráficos, ejes y elementos visuales.
Características adicionales
Altura de fila
La altura de la fila es un factor importante al mostrar el número de registros en la ventana de visualización, y es fácilmente personalizable según los requisitos de la interfaz de usuario de la aplicación. También es posible establecer la altura de la fila condicionalmente.
Copiar al portapapeles
El portapapeles permite a los usuarios copiar datos de filas o celdas seleccionadas a él. Las combinaciones de teclas Ctrl+C y Ctrl+Shift+H copian datos con y sin encabezados, respectivamente.
Menú contextual
Realiza varias acciones en una Cuadrícula de datos utilizando el menú emergente que aparece al hacer clic derecho en la celda, el encabezado o el paginador. Además de los elementos de menú predeterminados incorporados, se pueden agregar elementos de menú contextuales personalizados.
Ancho y alto
Establezca las propiedades de ancho y alto para cambiar el tamaño de la cuadrícula de datos. Cuando el contenido desborda el elemento de la cuadrícula, aparecerán barras de desplazamiento horizontales y verticales. Para llenar el contenedor padre de la cuadrícula de datos, simplemente establezca la altura y el ancho al 100%.
Encabezados apilados
Los encabezados apilados permiten agrupar y visualizar los encabezados de columna de forma apilada. El número de columnas que se pueden apilar es ilimitado. Realice todas las acciones del Data Grid incluso cuando las columnas estén apiladas.
Accesibilidad
Navegación por teclado
React Data Grid garantiza que cada celda sea accesible mediante el teclado. Las funciones principales como ordenar, seleccionar y editar se pueden realizar utilizando solo comandos de teclado; no se requiere interacción con el ratón. Esto ayuda a crear aplicaciones altamente accesibles utilizando este componente.
Lector de pantalla
La vista de Cuadrícula de datos de React tiene soporte completo de accesibilidad WAI-ARIA. Su interfaz de usuario incluye elementos visuales de alto contraste que ayudan a las personas con discapacidad visual a tener la mejor experiencia de visualización. Además, las descripciones de interfaz de usuario válidas son fácilmente accesibles a través de tecnologías de asistencia como los lectores de pantalla.
De derecha a izquierda (RTL)
La renderización de derecha a izquierda permite mostrar el texto y el diseño de la Cuadrícula de datos de derecha a izquierda. Esto mejora la experiencia del usuario y la accesibilidad para los idiomas RTL.
Optimizado para dispositivos móviles y fácil de usar con la pantalla táctil
DataGrid en React tiene un diseño altamente responsivo y un diseño optimizado para computadoras de escritorio, pantallas táctiles y teléfonos inteligentes. Funciona bien en todos los teléfonos móviles que usan iOS, Android o Windows 8.
Soporte táctil
Los gestos táctiles fáciles de usar y un diseño de interfaz de usuario interactivo brindan la mejor experiencia de usuario. Todas las funciones de React Grid funcionan en dispositivos táctiles con cero configuración.
Paginador responsivo
El paginador de React DataGrid actúa de forma inteligente y cambia su interfaz de usuario completa de forma responsiva según la dimensión. Su diseño optimizado proporciona la mejor interacción de interfaz de usuario en diferentes dispositivos.
¿No está seguro de cómo crear su primera Cuadrícula de datos de React? 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 145+ 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ÍCULASEDITORESMENÚS DESPLEGABLESENTRADAS DE DATOSVISUALIZACIÓN DE DATOSNAVEGACIÓNBOTONESCHAT INTERACTIVONOTIFICACIÓNFORMULARIOS
-
CuadrículasVisualización de datosNavegaciónEntradas
Preguntas frecuentes
¿Por qué debería elegir Syncfusion React DataGrid?
El Syncfusion React DataGrid ofrece las siguientes características:
Carga millones de registros en solo un segundo.
- Diseño “mobile-first” que se adapta a cualquier resolución.
Enlace de datos flexible con soporte para usar fuentes de datos locales y remotas como JSON, servicios RESTful, servicios OData y servicios WCF.
Edición flexible y modos de selección de registros intuitivos.
Opciones предiseñadas de filtrado al estilo de Excel y agrupación.
Innumerables personalizaciones de columnas y resúmenes de datos.
Opciones de exportación de datos sin problemas como PDF, CSV y Excel.
- Una de las mejores React DataGrid del mercado que ofrece una interfaz de usuario rica en funciones para interactuar con el software.
Configuración y API sencillas.
- Compatible con todos los navegadores modernos.
Amplios recursos de aprendizaje como demos, documentación y videos para aprender rápidamente y empezar a usar React DataGrid.
¿Cuál es el precio del Syncfusion React DataGrid?
No vendemos React DataGrid por separado. Solo está disponible para su compra como parte de la licencia de equipo de Syncfusion. Esta contiene más de 1,600 componentes y frameworks, incluyendo React DataGrid. El precio de la licencia de equipo comienza en $395 al mes para 5 desarrolladores e incluye soporte y actualizaciones hasta que expire la suscripción. Además, podríamos ofrecer descuentos según las promociones activas actualmente. Póngase en contacto hoy mismo con nuestros especialistas de producto para ver si califica para descuentos adicionales.
¿Dónde puedo encontrar la demostración de Syncfusion React Data Grid?
Puede encontrar nuestra demostración de React Data Grid, que muestra cómo renderizar y configurar el Data Grid.
¿Qué es una Cuadrícula de datos de React?
Una Cuadrícula de datos de React es un componente de interfaz de usuario que permite a los usuarios mostrar y manipular datos tabulares con funcionalidades como ordenamiento, filtrado, paginación y edición. Maneja de manera eficiente grandes conjuntos de datos y proporciona opciones para exportar e imprimir.
¿Cómo habilitar el filtrado en React Data Grid?
Para usar la característica de filtrado, inyecte el módulo Filter en la cuadrícula. Para habilitar el filtrado en Syncfusion React Grid, establezca la propiedad allowFiltering en “true”. Esto renderiza una barra de filtro debajo de los encabezados de columna, permitiendo a los usuarios ingresar criterios de filtro.La Cuadrícula ofrece múltiples modos de filtrado, que son configurables a través de la propiedad filterSettings.type.
¿Cómo se gestionan grandes conjuntos de datos en React Data Grid?
El Grid puede manejar grandes conjuntos de datos utilizando las funciones de paginación, desplazamiento virtual y desplazamiento infinito.
¿Cómo se implementa la edición en línea en React Data Grid?
Para habilitar la funcionalidad de edición directamente dentro de la cuadrícula, debe establecer las propiedades allowEditing, allowAdding y allowDeleting dentro de la propiedad editSettings en “true”. La edición requiere una columna de clave primaria para las operaciones CRUD. Para definir la clave primaria, establezca isPrimaryKey en “true” en una columna particular.
¿Puedo comprar el componente Syncfusion React DataGrid por separado?
No, nuestros más de 1,600 componentes y frameworks para web, móvil y escritorio, incluido nuestro React DataGrid, no se venden individualmente. Solo están disponibles como parte de una licencia de equipo. Sin embargo, hemos puesto un precio competitivo al producto, por lo que solo cuesta un poco más de lo que otros proveedores cobran por su componente DataGrid solo. También hemos descubierto que, según nuestra experiencia, nuestros clientes suelen empezar usando uno de nuestros productos y luego se expanden rápidamente a varios productos, por lo que consideramos que lo mejor era ofrecer los más de 1,600 componentes y frameworks por una tarifa de suscripción que comienza en $395 al mes para un equipo de 5 desarrolladores. Además, podríamos ofrecer descuentos basados en las promociones activas actualmente. Póngase en contacto hoy mismo con nuestros especialistas de producto para ver si califica para descuentos adicionales.
¿Puedo descargar y utilizar Syncfusion React DataGrid de forma gratuita?
No, este es un producto comercial y requiere una licencia de pago. 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, 5 o menos desarrolladores y 10 o menos empleados en total.
¿Cómo empiezo con Syncfusion React DataGrid?
Un buen punto de partida sería nuestra completa documentación de introducción.
¿Cuáles son las características de una Cuadrícula de datos de React?
React Grid ofrece características como ordenamiento, filtrado, paginación, edición, agregados, agrupamiento, exportación a Excel/PDF, redimensionamiento de columnas y virtualización.
¿Cómo se añade la clasificación a una Cuadrícula de datos de React?
Para habilitar la clasificación en Syncfusion React Grid, siga estos pasos:1. Asegúrese de que el módulo Sort esté importado e inyectado en su componente Grid.2. Establezca la propiedad allowSorting en “true” para activar la clasificación.3. Utilice la propiedad sortSettings para definir configuraciones de clasificación iniciales o personalizar el comportamiento de clasificación.
¿Puede React Data Grid manejar datos en tiempo real?
La Cuadrícula de React de Syncfusion maneja datos en tiempo real a través de la integración con WebSockets y SignalR, lo que permite actualizaciones dinámicas y experiencias de usuario fluidas.
¿Cómo configuro la paginación del lado del servidor en React Data Grid?
El Grid maneja la paginación del lado del servidor habilitando el adaptador de datos integrado de Syncfusion o utilizando conceptos de enlace de datos personalizados.
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.
The best tool to operate grid-like data out there
Good documentation helps you with everything you need to know. What I like the most is that it takes you from configuration to usage. I have mainly used grid and toolbar options along with dashboard.
Ivan G,
Business Application Developer
A Must-Have Tool for Fast Development with Top-Notch Support
We’ve been using Syncfusion Essential Studio for over 4 years, and it’s been a game-changer for our team. The components are incredibly versatile and cover almost every use case we’ve needed, from basic UI elements to complex data grids and charts. The ease of integration with our existing projects saved us countless hours during implementation. The documentation is straightforward, and even if we get stuck, their customer support team is super responsive—whether through live chat or tickets. We’ve raised nearly 50 tickets so far, and every single one was resolved quickly with clear solutions. The frequent updates with new features and improvements keep the library fresh and aligned with modern needs. It’s rare to find a tool that’s both powerful and easy to use, but Syncfusion nails it.
Labeeb M.
Lead UI Developer
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 React Data Grid de Syncfusion
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.
Actividades recientes en blogs y tutoriales de React DataGrid
Las publicaciones de blog y los videos tutoriales de React DataGrid lo guiarán en la creación de su primera aplicación con componentes de React. Proporcionan estrategias de resolución de problemas, describen características y funcionalidades, anuncian nuevas versiones de características, explican las mejores prácticas y muestran escenarios de ejemplo. Explore nuestras últimas publicaciones en nuestro blog y canales de videos tutoriales para obtener actualizaciones de React DataGrid.
BLOG
Cree fácilmente una aplicación de reserva de habitaciones de hotel con React DataGrid
6 DE ENERO DE 2025
VIDEOS
Cómo habilitar el diseño de interfaz de usuario adaptable en el componente React DataGrid
1 DE ENERO DE 2024
