Vale la pena señalar que la función value getter se llamará de forma predeterminada cada vez que AG Grid necesite ese valor. Por lo tanto, se llamará para ordenar y para mostrar. Esto puede tener un gran impacto con conjuntos de datos grandes.
AG Grid viene con la capacidad de hacer algo llamado almacenamiento en caché de valores. Puedes optar por utilizar la caché de valores. Si activas la caché de valores, cada vez que se ejecute un value getter, se almacenará en caché ese valor y solo se llamará a tu value getter una vez. Esto es para casos de uso bastante avanzados donde tienes problemas de rendimiento o tareas sensibles al tiempo dentro de tu función value getter. Pero quiero señalar que AG Grid tiene un mecanismo de almacenamiento en caché de valores incorporado. Si te preocupa el rendimiento del canalización de renderizado de celdas.
Kate, ¿puedes personalizar el tamaño de esa caché? Sé que puedes personalizar el tamaño y el tiempo que tardará en expirar. Sí, como una solución de almacenamiento en caché normal. Sí, y también puedes personalizar el bloqueo y la virtualización y algunas otras cosas. Si necesitas más o menos en el DOM, también puedes activar y desactivar la virtualización de columnas. Eso es algo que debes hacer.
De acuerdo, Brian, ¿vas a seguir con este ejercicio? Sí, sí. Déjame abrir Chrome aquí, estamos en los formateadores de valores, aquí está nuestro ejercicio. Vamos a agregar un formateador de valores a nuestra columna total. Así que voy a agregar nuestro formateador de valores y vamos a obtener un objeto de parámetros. Y dentro de esto, lo que queremos hacer es asegurarnos primero de que tenemos datos. Así que vamos a decir, si no tenemos ningún dato, simplemente devolvamos cero. De lo contrario, lo que queremos hacer es usar el formato de número internacional y vamos a usar la configuración regional ENUS y luego vamos a personalizar esto, vamos a decir que el estilo será moneda y la moneda será USD. Y luego vamos a llamar al método de formato en eso y le daremos el valor. Así que ahora, cuando vengamos aquí, deberíamos obtener una moneda USD bien formateada. Y, por supuesto, puedes usar el formato de número internacional para formatear esto y otras monedas en los estilos. Como mencioné antes, al igual que con el value getter, también puedes crear funciones de orden superior para los formateadores de valores. No voy a profundizar en esto, en los detalles de la implementación. Pero creo que lo importante aquí es que puedo crear un formateador de valores reutilizable, una función de orden superior, que me permite hacer tal vez un formateador de valores decimales. Y luego puedo usar eso más abajo y decir, usa este formateador de valores decimales. Voy a hacer algo de TypeScript para obtener algo de seguridad de tipos aquí. Y luego quiero que tengas, ya sabes, dos como el número de dígitos. Y luego podríamos usar, ya sabes, es solo una función. Por lo que simplemente puedes reutilizar eso en cualquier lugar que lo necesites en tu aplicación. O si estás haciendo algún tipo de monorepo sofisticado, puedes compartirlo entre aplicaciones y proyectos. De acuerdo, genial. Sigamos adelante. Oh, ¿deberíamos tomar un descanso, Mike? ¿Qué piensas? Sí, solo un breve descanso. Sí, hagamos siete minutos. Así que comenzaremos de nuevo a los cinco después. De acuerdo, volvamos a ello. Mike, ¿quieres enseñarnos sobre la función de renderizador de celdas y cómo podemos personalizar el renderizado de las celdas en AG Grid? Sí.
De acuerdo, como parte de la canalización de renderizado de celdas, hasta ahora hemos aprendido sobre la capacidad de calcular valores utilizando el value getter y luego formatear valores utilizando el formateador de valores. Pero lo que podríamos querer hacer es realmente hacer algo avanzado en términos de la forma en que renderizamos los valores, tal vez mostrar controles complejos, elementos o estilos complejos. En esos casos, es donde quieres usar un renderizador de celdas. Después de que se determine el valor para una celda y hayamos formateado el valor, podemos usar un renderizador de celdas para tener un control total sobre cómo se renderiza esa celda en AG Grid.
Es importante saber que solo queremos usar esto cuando sea absolutamente necesario. Porque lo que realmente va a suceder aquí es que vamos a agregar elementos adicionales, escuchadores de eventos, ya sabes, cosas que podrían ralentizar tu cuadrícula cuando estamos produciendo los renderizadores de celdas. Por lo tanto, solo queremos usarlos cuando sea absolutamente necesario y cuando sea necesario porque esta es una de esas áreas en las que realmente puedes afectar el rendimiento de tu cuadrícula cuando estás trabajando con conjuntos de datos realmente grandes.
Entonces, el renderizador de celdas para una definición de columna acepta los siguientes valores. Puede aceptar indefinido, lo que básicamente significa, hey, solo renderiza el valor que hemos calculado y formateado para ti como una cadena, como el contenido de texto en la celda. También puede aceptar una cadena que hace referencia a un renderizador de celdas registrado. Esto sería útil si deseas hacer que tus definiciones de columna sean serializables. O puede ser un componente React, que puede ser un componente de función o un componente de clase. Vamos a ver principalmente componentes de función en este taller en particular.
Antes de sumergirnos en esto, nuevamente, hablemos sobre algunas de las piezas de información que vamos a obtener dentro de estos renderizadores de celdas. Vamos a obtener los parámetros del renderizador de celdas, y estos son muy similares a lo que estamos obteniendo dentro de los parámetros del formateador de valores. Sin embargo, vale la pena señalar que cuando hablamos del valor en este punto, realmente estamos hablando del valor después de haber sido calculado utilizando el value getter y formateado utilizando el formateador de valores. Nuevamente, al igual que las otras funciones que hemos visto hasta ahora, puedes acceder a algunas de las API programáticas para controlar la cuadrícula, la columna o el nodo en sí, junto con algunas de las configuraciones que ya hemos establecido para la cuadrícula.
Echemos un vistazo a un ejemplo de una función de renderizador de celdas. Y en este caso, voy a hacer algo muy similar a lo que ya hemos hecho, solo para darte una idea de hacia dónde nos dirigimos con esto. Vamos a ver algunos ejemplos más complejos, por supuesto, a medida que avancemos en esto. Pero aquí, en el renderizador de celdas, lo que vamos a hacer es mirar nuevamente cómo dar formato a algunos valores. Pero es importante tener en cuenta que estamos haciendo esto como un renderizador de celdas en lugar de un formateador de celdas. Y esto, como veremos en un próximo ejemplo, nos permitirá hacer algunas cosas interesantes en términos de controlar la plantilla. Los renderizadores de celdas pueden ser una función o una clase de componente React. Aquí, estamos probando si tenemos un valor. Si no lo tenemos, devolvemos nulo.
Comments