Las 5 principales características de la cuadrícula de datos Angular que nunca supiste que necesitabas

Angular es la herramienta de desarrollo front-end más popular hasta la fecha. Sí, es un poco complejo de aprender, pero como lenguaje de programación front-end superior, Angular ofrece funcionalidad lista para usar, arquitectura multiplataforma, coherencia en toda la base de código, facilidad de mantenimiento y estructura de desarrollo modular. Las cajas de herramientas de interfaz de usuario y las bibliotecas de interfaz de usuario como Ignite UI for Angular Library, por ejemplo, aprovechan al máximo el marco de Angular y lo utilizan para crear características de cuadrícula de datos empresariales y centrales imbatibles sobre todo. Pero, ¿cuáles son algunos de los mejores para usar?

Hay varias características cruciales imprescindibles, y entendemos perfectamente que los desarrolladores suelen buscar cosas como la clasificación, el filtrado, la edición, la selección y la paginación. Sin embargo, al ser los más destacados, esperamos estos por defecto. Es por eso que todos los trajes de interfaz de usuario se esfuerzan por ofrecer componentes de cuadrícula de datos Angular que contengan las opciones mencionadas anteriormente para la administración y visualización de datos.

Dejaremos esto a un lado por ahora. En lugar de volver a enumerarlas solo para confirmar su necesidad, nos centraremos en las características que son menos conocidas pero que son obligatorias y extremadamente útiles en las cuadrículas modernas.

Comencemos entonces y veamos cuáles son las 5 principales características de la cuadrícula de datos Angular que no sabías que necesitabas.

Edición por lotes: una forma de acumular mejor los cambios

En esencia, Angular Grid Batch Editing permite a los usuarios modificar múltiples registros de datos en la cuadrícula y enviar todos los cambios al mismo tiempo, trabajando con transacciones. Puede utilizar la edición por lotes para posponer el guardado de varios cambios de valor de celda. Pueden guardarse en un búfer y descartarse fácilmente antes de confirmar las ediciones finales.

No es un secreto que uno de los mayores y más comunes desafíos que tienen los programadores al crear aplicaciones que consumen cientos de miles e incluso millones de registros, es crear una experiencia de usuario sostenible y escalable para la edición. Y la edición por lotes Angular función de cuadrícula es la solución a esto. Al habilitar el modo de edición por lotes, puede acumular cambios sin afectar inmediatamente a los datos subyacentes. Lo que minimiza el número de solicitudes HTTP enviadas al servidor al actualizar los registros.

Para implementar la edición por lotes mediante el componente al utilizar Ignite UI for Angular paquete, debe proporcionar una implementación del servicio de transacción (IgxTransactionService) o puede sustituir la suya propia. Nuestro paquete Ignite UI for Angular se envía con una implementación completa del servicio de transacciones con soporte completo para transacciones, deshacer y rehacer.

En caso de que necesites un tutorial práctico y más ejemplos Angular de edición por lotes de cuadrícula, hay una gran lectura sobre Cómo crear un servicio de transacciones que puedes leer y ver cómo se hace todo.

Advanced Filtering – To Build More Complex Filter Criteria 

El filtrado avanzado en Angular cuadrícula de datos funciona proporcionando una interfaz de usuario de filtrado que permite la creación de grupos con condiciones de filtrado más complejas en todas las columnas de cualquier tabla Angular Material. Después de configurar esta función, se muestra un botón de filtrado avanzado en la barra de herramientas de la cuadrícula. Los usuarios deben hacer clic en este botón para abrir el cuadro de diálogo de filtrado avanzado.

En nuestro caso, el cuadro de diálogo utiliza elIgxQueryBuildercomponente para generar, mostrar y editar la lógica de filtrado. Para habilitar esta característica, debe establecer allowAdvancedFiltering y agregar el componente igx-grid-toolbar dentro de la cuadrícula.

<igx-grid [data]="data" [autoGenerate]="true" [allowAdvancedFiltering]="true"> 
    <igx-grid-toolbar></igx-grid-toolbar> 
</igx-grid> 

Para demostrar cuán personalizable es este componente, compartiré un ejemplo de configuración de filtrado avanzado externo que también funciona fuera de la cuadrícula. Todo lo que necesita hacer es agregar el componente de diálogo de filtrado avanzado.

<igx-advanced-filtering-dialog [grid]="grid1"> 

</igx-advanced-filtering-dialog

Angular Persistencia del estado de la cuadrícula y una cadena JSON serializada

La persistencia de estado permite a los programadores guardar y restaurar el estado de la cuadrícula de una manera sencilla. Si un usuario realiza alguna modificación en los datos visualizados, desea aplicar ordenación o filtrado o cualquier otra cosa, el componente de persistencia de estado guarda estos cambios y los restaura después de volver a cargar la página.

No verás esta lista con frecuencia entre las características más comunes de Angular Grid, pero es extremadamente vital, especialmente para los desarrolladores con un trabajo intensivo solo en cuadrículas o para aquellos que no quieren preconfigurar diferentes estados de características, como:

• Make CustomerID column with DESC order 
• Aplicar el filtro Contiene a la columna ProductName
• Fije "Apellido" y "Edad" como se muestra a la izquierda

. Esencialmente, para lo que sirve este método es para devolver el estado de la cuadrícula de datos en una cadena JSON serializada, por lo que puede tomarlo y guardarlo en cualquier almacenamiento de datos (base de datos, nube, navegador localStorage u otro) que desee.

Cuando elIgxGridStatedirectiva se aplica en la cuadrícula, expone los métodos getState y setState que los desarrolladores pueden usar para lograr la persistencia del estado en cualquier escenario.

Virtualización: hacer que los datos sean más consumibles

Angular Grid Virtualization se utiliza para realizar un seguimiento de qué parte de los datos es visible y cómo se representan con precisión. Corta los datos en mandriles más pequeños que luego se intercambian desde una ventana gráfica de contenedor mientras el usuario se desplaza horizontal/verticalmente para cargar los datos del búfer.

Con el objetivo de optimizar el rendimiento del renderizado, Ignite UI for Angular Grid Virtualization funciona de manera un poco diferente: intercambia datos en lugar de eliminar y agregar elementos DOM. Pero puedes leer más sobre esto en la página de documentación oficial.

Angular Grid Keyboard Navigation and The Use Of Interactive Keyboard Shortcuts 

Cuando está habilitado, proporciona varias interacciones de teclado (Alt + L, Ctrl + Shift + L, Ctrl + Flecha arriba, Ctrl + Flecha abajo, etc.), lo que brinda una mejor usabilidad y experiencia de usuario, independientemente de cómo los usuarios naveguen por las páginas.

En Infragistics, queremos garantizar una experiencia de usuario óptima, independientemente de si está utilizando un mouse, un panel táctil o simplemente un teclado. Es por eso que hemos creado un nuevo patrón de interfaz de usuario para la navegación con el teclado dentro de una página, llamado Navegación de elementos activos. Este patrón reduce el número de tabulaciones dentro de la interfaz diseñada para igxGrid a solo cinco, y expone un montón de nuevos atajos de teclado para mayor eficiencia. Cada elemento de tabulación tiene un único punto de entrada y, desde allí, los usuarios pueden navegar fácilmente a diferentes elementos en el contenedor de elementos de cuadrícula correspondiente simplemente usando las teclas de flecha. Simplificando así la navegación y mejorando la usabilidad.

Utilizada en Ignite UI for Angular cuadrícula de datos, la función de navegación por teclado mejora la accesibilidad de la cuadrícula y permite a las personas navegar a través de cualquier tipo de elementos dentro (celda, fila, encabezado de columna, barra de herramientas, pie de página, etc.). Sin mencionar que también es totalmente compatible con aria.

Envolver

Angular La edición por lotes de cuadrícula, el filtrado avanzado, la persistencia de estado, la virtualización y la navegación con teclado no se mencionan con mucha frecuencia en las guías y artículos sobre las características de Angular cuadrícula. Permanecen en gran medida detrás de escena, mientras que cosas como la clasificación, la edición, el tamaño y la paginación les roban el protagonismo. A pesar de ser menos común y solicitado principalmente por personas que trabajan principalmente con cuadrículas de datos, aún necesita estas 5 características principales para sus proyectos.

Una de las desventajas es que rara vez se puede encontrar con la edición por lotes, el filtrado avanzado, la persistencia de estado, la virtualización y la navegación por teclado que funcionen bien con cuadrículas. Afortunadamente, Ignite UI for Angular Data Grid es la caja de herramientas definitiva que no solo los empaqueta, sino que garantiza su alto rendimiento.

Anímate y pruébalos. Explore las demostraciones y vea cómo funcionan.