Si está trabajando con una gran cantidad de datos, es posible que haya encontrado el problema de presentar estos datos de manera similar a Excel dentro de su aplicación Ionic. Aunque el patrón de tabla de datos no siempre es el más recomendado para aplicaciones móviles, especialmente en tiempos de PWA, tener la capacidad de crear una tabla dentro de su aplicación Ionic es una gran alternativa.
Dentro de este tutorial utilizaremos el paquete ngx-datatable que fue creado para aplicaciones Angulares , ¡así que también podemos usarlo perfectamente dentro de nuestra aplicación Ionic!.
Como siempre, comenzamos con una aplicación Ionic en blanco e instalamos el paquete de tablas de datos en nuestra aplicación, así que adelante y ejecute:
También hemos creado una nueva página que viene con un archivo de módulo, porque la página inicial no. Por lo tanto, continúe y elimine todas las referencias al archivo
HomePage de su módulo y luego establezca un nuevo punto de entrada para nuestra aplicación dentro de la app / app.component.ts :
El ngx-datatable viene con un estilo predefinido que podemos usar, pero primero debemos asegurarnos de que el estilo y una fuente adicional se copien en nuestra carpeta de compilación. Por lo tanto, agregue un nuevo bloque a package.json.
Ya hemos cambiado los tiempos de copia en muchos otros artículos, y el único cambio que realmente necesitamos es copiar las fuentes en una tarea adicional. Cree la carpeta y el nuevo archivo en config / copy.config.js e inserte todo desde la secuencia de comandos regular de copia Ionic más un bloque que copie sobre las fuentes:
Para el segundo archivo especial, cree otro archivo nuevo en config / sass.config.js . Para este archivo, copie el contenido del archivo original (que es bastante largo) de /node_modules/@ionic/app-scripts/config/sass.config.js .
Luego, busca el bloque
includePaths y agrega una línea al final de esta manera:
Ahora, tanto la fuente como el estilo del paquete se copian en nuestra carpeta de compilación y podemos usarlo fácilmente. Para que el estilo esté disponible para nuestra aplicación, también debemos importar ambos estilos disponibles, así que cambie app/ app.scss a:
¡Eso es todo por la integración, ahora por el uso real!
Presentando una tabla básica
Comenzamos con un ejemplo súper básico en el que mostraremos información de la manera más sencilla posible.
Para usar este paquete dentro de sus páginas, primero debe agregarlo a las importaciones del módulo, en nuestro caso, necesitamos cambiar las pages/ table / table.module.ts a esto:
Además, ya incorporé un pequeño interruptor para que puedas cambiar el tema de tu datatable de bootstrap a dark para que puedas verlos a ambos en acción.
No hay mucho en este momento, así que cambie sus pages/ table / table.ts a:
Queríamos construir la versión más básica de una tabla primero, ¡así que aquí está! Solo agregamos un botón adicional para cambiar el estilo de la tabla, y dentro de la vista elaboramos la tabla.
Esta tabla necesita filas de datos e incluso los atributos adicionales que he añadido pueden estar obsoletos, pero son necesarios para presentar la tabla de forma atractiva en un dispositivo móvil.
Dentro de la tabla, a continuación, define columnas para sus valores, en nuestro caso tres de ellos que buscarán el valor de su nombre . El nombre no tiene que ser la clave dentro de la matriz, pero más sobre esto más adelante.
La tabla ahora iterará sobre sus datos y creará las filas y columnas correspondientes, así que por ahora cambie las pages / table / table.html a:
El resultado de esto simple es lo que puedes ver a continuación.
Un poco agradable para unas pocas líneas de HTML que crean todo a partir de un origen de datos determinado, ¿verdad?.
Tabla de datos en ionic avanzada
Construyamos un ejemplo más sofisticado con algún mecanismo de reordenamiento, botones de fila adicionales y un estilo especial.
Para esto, comenzamos agregando algunas funciones a nuestra clase. Para determinar una clase especial que se agrega a una fila, definimos la función
getRowClass() que verifica si el conjunto de datos de la fila es una persona masculina o femenina. En ambos casos, devolvemos el nombre de una clase de CSS que definiremos más adelante.
Cuando abrimos una fila, simplemente presentamos una alerta con información básica recopilada de la fila para mostrar cómo funciona cada actividad.
Finalmente, también tenemos algunas funciones de resumen que se pueden usar para mostrar una fila de resumen dentro de su tabla. La mayoría de las veces, el resumen predeterminado para su columna no funcionará, por lo que con estas funciones puede escribir su propia lógica para crear la suma o promedio o lo que sea que quiera mostrar.
En nuestro caso, presentamos la suma de personas hombre / mujer, así como la edad promedio de nuestras personas.
Continúa y agrega las nuevas funciones a tus pages/ table/ table. Así:
Ahora también debemos agregar algunos cambios a la vista para poder utilizar la nueva funcionalidad que hemos implementado. Primero agreguemos el CSS que se necesita para personalizar las filas en función del género, así que cambie sus pages/ table / table.scss a:
La última pieza que falta ahora es la vista que debe cambiarse para nuestras columnas personalizadas. Anteriormente hemos visto columnas básicas, pero también podemos tener más control sobre el encabezado, el valor utilizado para la columna o qué función de resumen debe usarse.
Hay bastantes opciones que puede configurar tanto para la tabla como para las columnas, de modo que para toda la información, consulte la documentación oficial que también contiene ejemplos de casi todo lo que ofrece el paquete.
Cambiemos el código y hablemos de algunos elementos más adelante, así que abra sus pages/ table / table.html y cámbielo a:
Aquí hay un poco más de información sobre lo que hemos usado y lo que hace:
- let-sort = "sortFn": usa el mecanismo de ordenamiento alfanumérico predeterminado para esta columna.
- prop: usa la clave especificada dentro de la fuente de datos para buscar el valor de la columna.
- summaryFunc: usa una función de resumen especial para toda una columna.
- .bind(this): no es necesario aquí, pero está disponible dentro de la función llamada.
- let-value = "value": hace que el valor de la columna esté disponible como valor.
- let-row = "row": permite que todo el objeto fila esté disponible dentro de la columna.
Como dije antes, hay mucho que puedes personalizar y algunos elementos no funcionarán tan bien juntos. En mis pruebas, la función de resumen ahora aplicada realmente rompe el mecanismo de reordenamiento , pero estoy seguro de que también hay una solución para ese problema.
Conclusión
En general, debe tener cuidado cuando utiliza una tabla dentro de una aplicación móvil, pero si decide que necesita una, ngx-datatable es un paquete increíble que ofrece muchas opciones para personalizar la forma en que se presentan sus datos.
ConversionConversion EmoticonEmoticon