Angular Data Grid – Potente cuadrícula para apps modernas
- Carga millones de registros en segundos.
- Diseño móvil adaptable a cualquier resolución.
- Edición flexible y selección intuitiva.
- Filtrado y agrupación tipo Excel.
- Personalización de columnas y resúmenes.
- Exportación a PDF, CSV y Excel.
Quick Overview Video
Trusted by the world’s leading companies
Resumen de la Data Grid de Angular
La cuadrícula de Angular es un componente de cuadrícula de datos rico en funciones para mostrar datos en formato tabular. Su amplia gama de funcionalidades incluye enlace de datos, edición, filtrado tipo Excel, clasificación personalizada, agrupación, reordenación de filas, congelación de filas y columnas, agregación de filas y exportación a formatos Excel, CSV y PDF.
¿Por qué elegir la Data Grid de Angular de Syncfusion Essential Studio®?
Alto rendimiento
Esfuerzos bien pensados y se centra principalmente en el rendimiento acelerado para cargar millones de registros en solo un segundo.
Enlace de datos fluido
Enlaza datos de forma transparente 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
La cuadrícula de datos 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 utilizan iOS, Android o Windows OS.
Edición flexible
La cuadrícula de Angular realiza operaciones de crear, leer, actualizar y eliminar (CRUD) más fácilmente con una lista de objetos de negocio o servicio de datos remoto con la ayuda de un administrador de datos.
Crea tus propios diseños de plantilla
Permite a los usuarios crear experiencias de usuario personalizadas en la cuadrícula de Angular 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. Utiliza la herramienta en línea Theme Studio para personalizar temas fácilmente.
Fácil exportación e impresión
Exporta la cuadrícula de datos en varios formatos de archivo, incluyendo Excel, PDF y CSV. Imprime todas las filas, independientemente del número de páginas, así como la página actualmente visible.
Globalización y localización
Permite a los usuarios de diferentes regiones utilizarlos formateando fechas, monedas y números para que se ajusten a sus preferencias.
AI-Ready Grid Para el análisis de datos empresariales
Acelere el análisis de datos en aplicaciones Angular con un DataGrid diseñado para mejoras de IA. Integre fácilmente búsqueda semántica y detección de anomalías para flujos de trabajo más inteligentes.
-
Búsqueda semántica: Utilice modelos de procesamiento de lenguaje natural (NLP) para permitir a los usuarios buscar con frases cotidianas, mejorando la usabilidad sin necesidad de palabras clave exactas.
- See how to add semantic search
-
Detección de anomalías: Agregue herramientas de aprendizaje automático (ML) para resaltar anomalías en los datos y garantizar la coherencia automáticamente.
- Vea cómo agregar detección de anomalías
Ejemplo de código de la cuadrícula de datos de Angular
Comienza fácilmente con la cuadrícula de datos de Angular utilizando unas pocas y sencillas líneas de código HTML y TS, como se muestra a continuación. Explora también nuestro ejemplo de cuadrícula de datos de Angular, que te muestra cómo renderizar y configurar una cuadrícula de datos en Angular.
<div class="control-section">
<ejs-grid [dataSource]='data' height='350'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'/>
<e-column field='CustomerName' headerText='Customer Name' width='150'/>
<e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'/>
<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'/>
<e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'/>
<e-column field='ShipCountry' headerText='Ship Country' width='150'/>
</e-columns>
</ejs-grid>
</div>import { Component, OnInit } from '@angular/core';
import { orderDetails } from './data';
@Component({
selector: 'ej2-grid-container',
templateUrl: 'default.html'
})
export class DefaultComponent implements OnInit {
public data: Object[] = [];
ngOnInit(): void {
this.data = orderDetails;
}
}
Indicador de carga esqueleto
La cuadrícula de datos 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 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.
Diseño de interfaz de usuario adaptable
La interfaz de usuario de la cuadrícula de datos se personaliza y rediseña para obtener excelentes vistas y usabilidad en pantallas pequeñas. Sus características incluyen filtro, clasificación, búsqueda, selector de columnas, menú de columnas, desplegable de paginación y diálogos de edición que se adaptan al tamaño de la pantalla y renderizan los elementos de fila en dirección vertical.
Columna
Las columnas definen el esquema de la fuente de datos en la cuadrícula de datos. Soporta formateo, generación automática de columnas, definiciones de columna, congelación de filas y columnas, expansión de columnas, ajuste de texto, selector de columnas, menú de columnas y otras características.
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 Angular ofrece una interfaz de usuario de paginación integrada 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.
Ordenación
Ordena las filas en orden ascendente o descendente contra una columna simplemente haciendo clic en el encabezado. Ordena los datos de varias columnas manteniendo presionada la tecla Ctrl + clic en el encabezado. Además, define tu 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 con un criterio dado en la cuadrícula de datos. La cuadrícula de datos admite varios tipos de filtro, incluidos potentes filtros tipo Excel. Elige el tipo de filtro apropiado, define tu propia lógica de filtrado personalizada y personaliza la interfaz de usuario de filtrado según las necesidades de la aplicación. También se pueden filtrar caracteres diacríticos.
Selección
Selecciona filas o celdas usando la casilla de verificación o simplemente haciendo clic en ellas. Selecciona más de una fila o celda manteniendo presionada la tecla Ctrl, Shift o Command, o programáticamente.
Edición
La cuadrícula de datos de Angular soporta operaciones de crear, leer, actualizar y eliminar (CRUD). Además de los componentes de edición integrados 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, puedes realizar operaciones de edición con una colección de arreglos o un servicio de datos remoto.
Agrupación
Agrupa 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. Existe una opción para agrupar registros de la columna deseada mediante arrastrar y soltar esa columna en un área interactiva.
Agregación
Visualiza fácilmente los agregados de los valores de las columnas de la cuadrícula de datos utilizando la opción de resumen. Los agregados se pueden personalizar para mostrar su valor en filas de resumen individuales, filas de resumen de grupo individuales o filas de título de grupo.
Filas y columnas congeladas
Las filas y columnas congeladas son visibles en la parte superior y a la izquierda, derecha, en 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 valores de celdas.
Encabezado fijo
El encabezado de la cuadrícula de datos de Angular debe estar en una posición fija al desplazar el documento verticalmente para visualizar el contenido de la cuadrícula junto con el encabezado de la columna.
Arrastrar y soltar filas
La cuadrícula de Angular permite a los usuarios arrastrar y soltar filas a otra cuadrícula de datos o componente personalizado. Los usuarios también pueden arrastrar y soltar filas dentro de la misma cuadrícula de datos usando el icono de arrastre y transferir filas entre diferentes grupos.
Cuadrícula maestro-detalle
La cuadrícula maestro-detalle de Angular es un escenario de caso de uso en el que los detalles de un registro se ven en una cuadrícula de datos separada haciendo clic en una fila en particular.
Gestión de estados
La gestión de estados en el componente de cuadrícula de datos de Angular te permite mantener el estado de la cuadrícula incluso después de actualizar el navegador o al navegar a una página diferente dentro de la misma sesión del navegador. Esta característica es especialmente beneficiosa para retener la configuración y los datos de la cuadrícula después de una recarga de página.
Actualización en vivo
La cuadrícula de datos 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, asegurando que el sistema permanezca altamente responsivo y eficiente.
Características adicionales
Altura de fila
La altura de 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 fila condicionalmente.
Copiar al portapapeles
El portapapeles permite a los usuarios copiar datos de las filas o celdas seleccionadas. 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 integrados, se pueden agregar elementos de menú contextual personalizados.
Ancho y alto
Establece 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 principal de la cuadrícula de datos, simplemente establece 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. Realiza todas las acciones de la cuadrícula de datos incluso cuando las columnas están apiladas.
Accesibilidad
Navegación por teclado
El componente de cuadrícula de Angular garantiza que todas las celdas sean accesibles mediante el teclado. Las funciones principales como ordenar, seleccionar y editar se pueden realizar solo con 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 la cuadrícula de datos de Angular 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 móviles y fácil de usar con el tacto
El componente Data Grid mejora la usabilidad y proporciona un diseño optimizado y responsivo para escritorios, pantallas táctiles y teléfonos en todos los sistemas operativos, incluidos iOS, Android y Windows.
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 la cuadrícula de datos funcionan en dispositivos táctiles con cero configuración.
Paginador responsivo
El paginador de la cuadrícula de datos actúa de manera 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.
Compatibilidad con versiones de Angular
Con la mejora continua en las versiones de Angular, la cuadrícula de datos de Angular se mantiene actualizada para que sea compatible con versiones desde la 4 hasta la última versión.
Otros frameworks soportados
La cuadrícula de datos está disponible para los frameworks Blazor, React, JavaScript y Vue. Explora sus opciones específicas de plataforma a través de los siguientes enlaces:
Navegadores compatibles
La cuadrícula de datos de Angular funciona bien con todos los navegadores web modernos, incluidos Chrome, Firefox, Edge, Safari y Opera.
¿No sabes cómo crear tu primera cuadrícula de Angular? Nuestros vídeos tutoriales y documentación pueden ayudarte.
Me gustaría verlo ahora Me gustaría leerlo ahoraMás de 145+ componentes de interfaz de usuario de Angular
TODOS LOS COMPONENTES
COMPONENTES INTELIGENTES
CUADRÍCULAS
EDITORES
MENÚS DESPLEGABLES
ENTRADAS DE DATOS
VISUALIZACIÓN DE DATOS
NAVEGACIÓN
BOTONES
CHAT INTERACTIVO
NOTIFICACIÓN
FORMULARIOS
VISOR
Preguntas frecuentes
¿Por qué elegir la cuadrícula de datos de Angular de Syncfusion Essential Studio®?
La cuadrícula de datos de Syncfusion es la mejor cuadrícula de datos de Angular que 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 de filtrado tipo Excel y agrupación predefinidas.
Innumerables personalizaciones de columna y resúmenes de datos.
Opciones de exportación de datos sin interrupciones como PDF, CSV y Excel.
- Una de las mejores cuadrículas de datos de Angular del mercado que ofrece una interfaz de usuario rica en funciones para interactuar con el software.
Configuración sencilla y API.- Compatible con todos los navegadores modernos.
Amplios recursos de aprendizaje como demos, documentación y vídeos para aprender rápidamente y empezar a usar la cuadrícula de datos de Angular.
¿Cuál es el precio de la cuadrícula de datos de Angular de Syncfusion?
No vendemos la cuadrícula de datos de Angular 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, incluida la cuadrícula de datos de Angular. 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 basados en promociones actualmente activas. Ponte en contacto con nuestros especialistas de producto hoy mismo para ver si cumples los requisitos para obtener descuentos adicionales.
¿Dónde puedo encontrar la demo de la cuadrícula de Angular de Syncfusion?
Puedes encontrar nuestra demo de la cuadrícula de Angular, que demuestra cómo renderizar y configurar la cuadrícula.
¿Cuál es la diferencia entre Angular Grid y Angular Data Grid?
Angular Grid es una implementación de tabla básica (como table o *ngFor), mientras que Angular Data Grid (como la cuadrícula de Angular de Syncfusion) ofrece funciones avanzadas como clasificación, filtrado, virtualización y edición en línea para un manejo complejo de datos. La cuadrícula de Syncfusion está optimizada para un alto rendimiento y escalabilidad en aplicaciones empresariales.
¿Puedo comprar el componente de cuadrícula de Angular de Syncfusion por separado?
No, nuestros más de 1,600 componentes y frameworks para web, móvil y escritorio, incluida nuestra cuadrícula de datos de Angular, 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 algunos otros proveedores cobran por su componente de cuadrícula de datos solo. También hemos descubierto que, según nuestra experiencia, nuestros clientes suelen empezar a usar uno de nuestros productos y luego se expanden a varios productos rápidamente, por lo que consideramos que lo mejor era ofrecer todos 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 promociones actualmente activas. Ponte en contacto con nuestros especialistas de producto hoy mismo para ver si cumples los requisitos para obtener descuentos adicionales.
¿Puedo descargar y utilizar la cuadrícula de datos de Angular de Syncfusion 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 y personas cuyas organizaciones tengan menos de 1 millón de dólares estadounidenses en ingresos brutos anuales y cinco o menos desarrolladores.
¿Cómo empiezo con la cuadrícula de Angular de Syncfusion?
Un buen lugar para comenzar sería nuestra completa documentación de introducción.
¿Qué es una cuadrícula de datos de Angular?
Una cuadrícula de datos de Angular es un componente de tabla avanzado diseñado para mostrar y administrar grandes conjuntos de datos de manera eficiente. Sus características incluyen clasificación, filtrado, paginación y actualizaciones en tiempo real. Bibliotecas como Syncfusion mejoran el rendimiento con funciones tipo Excel, procesamiento del lado del servidor e integración perfecta con Angular.
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
Superior components:any day anytime
Essential Studio is one of a kind. The fact that they give us the community developer license has always shown how much they value the small teams creating their own startups. Essential Studio has helped a lot in my almost ready business intelligence platform for the healthcare industry. The grid and the kanban components are what made us fall in love with all the other components.
Kelvin M.
Software Development Engineer
Calificado por usuarios de todo el mundo
Recursos de la cuadrícula de datos de Angular de Syncfusion
Kits de UI
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 tutoriales y blogs de la cuadrícula de datos de Angular
Los videos tutoriales y las publicaciones de blog de la cuadrícula de datos de Angular te guiarán en la creación de tu primera aplicación con componentes de Angular. 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. Explora nuestras últimas publicaciones en nuestro blog y canales de videos tutoriales para obtener actualizaciones de la cuadrícula de datos de Angular.
BLOG
¿Cómo actualizar datos sin volver a renderizar una cuadrícula completa en Angular?
30 DE ABRIL DE 2024
BLOG
01 DE ENERO DE 2024
BLOG
19 DE NOVIEMBRE DE 2024
BLOG
Vincular una fuente de datos de Firebase a la cuadrícula utilizando AngularFire2
08 DE ABRIL DE 2021
