Construye una Potente Rejilla de Datos con AG Grid

Bienvenidos a todos. Gracias por inscribirse en el masterclass. Estoy emocionado de pasar esta mañana o esta tarde con ustedes, sea cual sea la hora para ustedes. Nuevamente, estoy ubicado aquí en la Costa Oeste de los Estados Unidos. Mi nombre es Brian Love. Soy un Experto en Desarrollo de Google en tecnologías web. Hago mucho frontend. Hago mucho backend. Utilizo React, Angular y Vue principalmente. Y yo y un amigo mío, Mike Ryan, tenemos una pequeña consultoría aquí que pueden ver llamada LiveLoveApp. Y estoy compartiendo este sitio web no para promocionar mi empresa, sino para llevarlos al sitio web del curso. Así que si van a LiveLoveApp.com slash cursos, eso los llevará directamente a nuestra página de inicio del curso. Y desde aquí, vayan y hagan clic en Empezando con AG Grid y React. Y una vez que lo hagan, estarán en nuestro contenido del curso, y ahí es donde comenzaremos hoy. Un poco sobre mí. Soy padre de una niña, una hija única. Ahora tiene dos años y es preciosa. Estoy casado y vivo aquí en Bend, Oregon. Me gusta hacer muchas actividades al aire libre. Así que cuando no estoy trabajando en código o cosas así, definitivamente me encontrarán en las montañas, haciendo ciclismo de montaña, esquiando, pescando, simplemente disfrutando de la naturaleza, mucho camping, cosas así. Así que disfruto tanto estar frente a la computadora como estar afuera y en la naturaleza. Y sí, estoy muy emocionado de pasar tiempo con todos ustedes esta mañana y comenzar con AG Grid y React. Y eso es todo. Vamos a entrar directamente en el contenido. No necesitamos hacer esto sobre mí o algo así. Así que adelante y escriban en el chat, sin embargo. Háganme saber en qué punto están con AG Grid, si lo han usado, si han oído hablar de él, si simplemente están interesados en saber qué es. Compartan eso en el chat. Sería genial.

Como ya mencioné, si estás usando, tal vez estás en un proyecto grande y ya tienes ag-grid instalado, parte del soporte de TypeScript se introdujo alrededor de la versión 28. Ahora están en la versión 29 algo. Así que ya pasaron esto. Pero solo quiero señalar esto, si comienzas a usar algunos de estos genéricos y cosas de TypeScript, y dices que esto no funciona. ¿Qué está pasando? Solo ten en cuenta que en la última versión importante es cuando introdujeron, en la versión importante anterior, es cuando introdujeron parte del soporte de TypeScript. Y las versiones antiguas no tienen mucho soporte de TypeScript, o no mucho. El soporte de TypeScript es muy pequeño o no está presente en absoluto. Y solo quiero señalar eso para aquellos de ustedes que ya pueden tener ag-grid instalado en su proyecto, y tal vez estén en una versión anterior. Entonces eso podría darte un incentivo para actualizar si eso es algo importante para ti. OK, echemos un vistazo a los datos de fila. En términos generales, ag-grid proporciona dos modelos de filas que se llaman modelos de filas. Tienes el modelo de filas del lado del cliente y el modelo de filas del lado del servidor. Y eso suena como piensas que suena, ¿verdad? Entonces, el modelo de filas del lado del cliente está diseñado con la intención de que el renderizado y la clasificación y el filtrado y todo eso, como los datos, todo eso esté en el cliente. Entonces, si estás construyendo una aplicación de una sola página usando React y estás usando el modelo de filas del lado del cliente, esperas conectar todos los datos y permitir que la clasificación y el filtrado y todo eso ocurra en el cliente. Por otro lado, está el modelo de filas del lado del servidor. Entonces, cuando estás lidiando con conjuntos de datos grandes, tiendo a encontrar que con algunos de mis clientes, el modelo de filas del lado del cliente te lleva bastante lejos. También depende de cuántos datos quieras enviar a través de la red y esas cosas. Pero la mayoría de las veces, especialmente si tienes clientes empresariales, tal vez usuarios que están en una computadora de escritorio bastante potente, tienen una buena calidad de conexión, ese tipo de cosas. Puedes enviar un par de miles, tal vez 10, 20, 50,000 dependiendo de qué tan grandes sean tus conjuntos de datos, por supuesto. Pero puedes ejecutarlos de manera bastante eficiente en el modelo de filas del lado del cliente y salirte con la tuya, por así decirlo. Tal vez no esté demasiado optimizado. Pero una vez que llegas a cientos de miles de filas y llegas a millones de filas, ahí es donde tiendes a tener que depender del modelo de filas del lado del servidor. Y nuevamente, el modelo de filas del lado del servidor va a buscar los datos de manera asíncrona y hacer la clasificación y el filtrado. Y vas a delegar gran parte de ese trabajo a tu capa de base de datos o a lo que estés usando para la persistencia. Entonces, cuando el usuario está filtrando o clasificando millones de registros, no quieres hacer eso en el lado del cliente, en JavaScript, en el navegador del usuario. Vas a enviar una solicitud a tu backend. Vas a decir, eh, dame las siguientes 500 filas ordenadas por este valor o lo que sea, esta columna, y en orden ascendente. Y si estás usando SQL, tendrás una instrucción order-by o algo así. Y así tienes que construir ese backend de lo que estés usando. Y puedes usar Node o C Sharp o lo que sea tu preferencia en el backend para hacer el modelo de filas del lado del servidor.

Aquí es donde obtienes una separación en esa edición gratuita de la que ya hablé, esa Edición de la Comunidad con licencia MIT y la Edición Empresarial. Hablando en términos generales, las características del lado del cliente están disponibles en la Edición de la Comunidad. Y luego, si necesitas el modelo de filas del lado del servidor, ahí es donde tienes que recurrir a la Edición Empresarial y comprar una licencia de ag-grid. Nuevamente, creo que con el modelo de filas del lado del cliente puedes llegar bastante lejos. Y vamos a usar el modelo de filas del lado del cliente en este curso. Simplemente no estamos trabajando con un conjunto de datos grande. Y es mucho más fácil de enseñar. Pero muchos de los fundamentos se aplicarán. Aprenderás cómo usar ag-grid. Y si necesitas un modelo de filas del lado del servidor y necesitas sacarlo del estante, creo que encontrarás que esto aún se aplica en gran medida. OK, genial. Echemos un vistazo a un ejemplo. Y luego vamos a abrir esto en StackBlitz y comenzar a ejecutar algo de código, porque solo hemos estado hablando y mirando cosas. Quiero que empiecen a jugar. Así que voy a configurar nuestras columnas. Nuevamente, ya hemos visto esto. Y ya tengo, aquí está mi HTML, lo que sea, TSX, JSX. Tengo mi elemento de contenedor. Tengo mi componente ADGrid React. Anteriormente, proporcionábamos las definiciones de columna. Y aquí voy a especificar la propiedad row data. Y voy a proporcionar esos datos de fila. Y aquí voy a usar también el gancho useState. Y voy a decir que tengo una matriz de estos objetos de datos de fila. Y voy a obtener esos objetos de la data.products. Entonces, en nuestros ejemplos, voy a usar solo un archivo JSON que tiene algún tipo de datos de orden, elemento de línea, tipo de producto. Si estuvieras usando un solución de e-commerce, si estás construyendo una solución de e-commerce o algo así. Y eso va a ser nuestro conjunto de datos de muestra para hoy. Voy a obtener esos datos de fila. Y voy a vincularlos a mi elemento ADGrid React. Vamos a cargar esto en StackBlitz. Entonces, si haces clic en ese enlace en el curso, si no estás en el modo de diapositivas, si simplemente bajas aquí, verás que aquí es donde debes hacer clic para abrir eso en StackBlitz. Y luego, en un minuto, vamos a comenzar con nuestro primer ejercicio. Y podrás abrirlo justo aquí. OK. Aquí estamos. Estamos ejecutando ADGrid. Tenemos – voy a profundizar un poco, entrar en esto un poco. Déjame dejar el enlace al repositorio nuevamente para aquellos que lo necesiten. No necesitas clonar el repositorio ni hacer referencia a él. Pero quiero señalar eso de que aquí es de donde se extrae el código. Entonces, aquí está el código del repositorio. Y si entras y miras todas las ramas, notarás que en las ramas, verás que aquí es donde están todos los desafíos y las soluciones. Entonces, si alguna vez quieres ver eso, también están allí. Pero pasemos a StackBlitz. En StackBlitz, tengo esto configurado, y estoy viendo la solución column-def-01, y estoy viendo el archivo grid.tsx. Nuevamente, voy a profundizar un poco en esto la primera vez, y luego a medida que avanzamos en el curso, vamos a omitir algunas de estas cosas iniciales. Voy a importar mis temas, el CSS de ADGrid, así como el tema que estoy usando. También voy a importar la interfaz de definición de columna de ADGrid community, y luego estoy importando el componente ADGrid React del módulo ADGrid React.

Y luego también estoy importando este data desde este archivo JSON. Ya vimos esto, pero quiero repasarlo rápidamente. Aquí está mi interfaz para mi fila data. Entonces estoy diciéndole al compilador de TypeScript que mi fila data es un objeto que contiene al menos estas dos propiedades, nombre y color, y ambas son cadenas. Y luego aquí, voy a exportar mi función predeterminada llamada grid, y voy a configurar mis definiciones de columnas usando el gancho useState. He especificado el genérico de TypeScript para que sea un arreglo de objetos de definición de columna, donde el data de la definición de columna o el data T es mi interfaz de fila data. Y verás que esto es a lo que me estoy refiriendo, este data T. También he especificado el nombre del encabezado y el campo de la fila data donde quiero que cada columna obtenga su valor. Entonces, en la primera columna, nuevamente, estas columnas son, por defecto, cuando las configuro en las definiciones de columnas, van a estar ordenadas de izquierda a derecha. Entonces puedo ver aquí que he configurado el campo nombre, y luego este es el primero, y luego tengo el color, y luego ese es mi segundo. También tengo mi fila data, y estoy extrayendo eso de mi archivo JSON que he importado. Podrías obtener esto de forma asíncrona o algo así. Y aquí están mis productos que quiero mostrar. Así que tengo mi gancho useState, y aquí está mi fila data, y luego voy a especificar esas propiedades. Voy a tener mi prop de fila data, mis definiciones de columnas, prop de definiciones de columnas. Tengo eso para mi componente AGGridReact, y luego tengo mi elemento de contenedor aquí para mi tema AGG, Quartz AutoDark, que le da a esto una cuadrícula de aspecto agradable y hermoso a la derecha. Y podemos ver que a medida que nos desplazamos hacia abajo a través de esto, creo que estamos mostrando un par de cientos de filas de data. Tenemos buenos cuadros por segundo, rápido y bonito, todo se ve bien. Y sí, y podemos mover las columnas en términos de tamaño. Podemos habilitar y deshabilitar esta función, pero esto es solo de forma predeterminada. No hemos personalizado nada aquí. También puedo arrastrar la columna de nombre y moverla, por lo que por defecto puedes arrastrar las columnas. Nuevamente, podrías deshabilitar eso para tus usuarios si no quieres eso. Y sí, así que de forma predeterminada estoy mostrando algunos data. Tengo esto funcionando. Creo que teníamos un par de preguntas, así que quiero hacer una pausa aquí. Vamos a hacer un ejercicio en un segundo. Antes de comenzar el ejercicio, sin embargo, si tienes preguntas, puedes escribirlas en el chat, o podemos darte un par de minutos y hacer tu pregunta. Genial. Tenemos un challenge rápido para ti. Este es fácil. Todo lo que vamos a hacer es que abras este ejercicio de StackBlitz. Entonces vamos a hacer este primer challenge juntos, solo para asegurarnos de que todos estemos en la misma página. Así que haz clic en el enlace para abrir el ejercicio de StackBlitz. Y luego queremos especificar la propiedad de definición de columna y vincularla al componente ag-grid-react. Vamos a configurar la propiedad de datos de fila utilizando los productos existentes de la importación de data. Y también vamos a configurar eso en el componente ag-grid-react, estableciendo el valor de la prop de fila data. Así que voy a abrir el ejercicio. Y voy a ir un poco despacio, para que podamos hacerlo juntos. De acuerdo, una vez que tengas el enlace abierto, el challenge abierto, deberías estar viendo el archivo grid.tsx. Y verás un par de líneas onduladas aquí. Creo que es solo porque no se están usando. Y dice que estas son importaciones no utilizadas. Así que no te preocupes por eso. Salta eso. Vamos a bajar aquí, y puedes ver que tenemos algunos comentarios como parte de estos desafíos para ayudar a que no tengas que alternar entre el sitio web del curso y StackBlitz. Y lo que vamos a hacer es especificar el estado de definición de columna. Y vamos a vincularlo al componente ag-grid-react. Entonces lo que quiero hacer aquí es que voy a configurar esto. Voy a usar use state. Y voy a darle dos objetos de definición de columna. Entonces voy a tener nombre. Y voy a tener color. Y si estás familiarizado con, si no estás usando TypeScript, y solo quieres code esto en un JavaScript básico, por así decirlo, o solo JavaScript sin usar TypeScript, no tienes que especificar ninguno de los genéricos de TypeScript. Si quieres, sin embargo, podemos decir que esto va a ser un arreglo de objetos de definición de columna. Y luego quiero especificar el espacio nombre. Entonces, si voy a hacer esto, y luego quiero especificar además que cada fila, o el tdata, es un objeto de fila data. Así que voy a hacer fila data. Y ahora también obtendré una buena verificación de tipos allí. Inicialmente, vimos que nuestra cuadrícula se mostraba. Pero solo decía, como, cargando. Permíteme retroceder y mostrarte cómo se veía eso. Sí, así era nuestro estado original. La cuadrícula está vacía. Solo dice cargando porque está esperando. No sabe nada sobre las definiciones de columnas o los valores de lo que se va a mostrar. Así que aquí voy a configurar mis definiciones de columnas. Y luego voy a bajar aquí, y voy a configurar la propiedad de definiciones de columnas. A colDepths. Así que ahora tengo mis definiciones de columnas, pero no tengo ningún data para mostrar. Entonces puedes ver que tengo nombre y color configurados, pero necesito configurar ese data. Así que voy a hacer lo mismo aquí abajo. Voy a obtener mi fila data. Voy a usar state, y voy a darle data.products. Y luego voy a bajar y configurar esto también. Genial. Así que aquí hemos especificado las definiciones de columnas. Aquí hemos especificado los datos de fila. Tengo mi elemento de contenedor con el tema en él. Estoy usando el componente ag-grid-react que he importado del módulo de la biblioteca ag-grid-react, por así decirlo. Y luego tengo la fila data. ag-grid-react library module, por así decirlo. Y aquí he vinculado la propiedad de definiciones de columnas y la propiedad de datos de fila. He configurado todo eso, y ahora puedo ver que se muestra el data. Y de forma predeterminada, nuevamente, obtenemos ese título en mayúscula basado en el nombre del campo. Pero si quiero cambiar eso, puedo hacerlo, y puedo decir, eh, el nombre del encabezado, en realidad quiero que digas que este es el nombre del producto o algo así. Y ahora podemos ver que obtengo este nombre de encabezado personalizado. Fantástico. Dale un pulgar hacia arriba en el chat si todo está bien, y puedes seguir el ejercicio y avanzar en él.

Creo que esta diapositiva está un poco desactualizada. Me disculpo por eso. Sí, por defecto, la propiedad sortable se establecerá en true. Y siempre puedes anular eso y establecer sortable en false. Así que vamos a jugar con eso en un ejercicio. Aquí te muestro cómo puedo personalizarlo especificando el orden de ordenación. Especifico la propiedad sorting order. Y le doy una matriz de estas cadenas. Y en este ejemplo, la columna de nombre es sortable, y se ordena de forma ascendente y luego descendente. Entonces, cuando el usuario sigue haciendo clic para cambiar ese orden de ordenación en el encabezado, simplemente cambiará entre ascendente y descendente. Por lo tanto, no mostrará los data en el orden en el que provienen del backend o de nuestras filas data. También puedo hacer una ordenación de múltiples columnas. Entonces, de forma predeterminada, el usuario puede ordenar varias columnas manteniendo presionada la tecla Shift y haciendo clic en el encabezado de la columna. También puedo especificar esa tecla de ordenación múltiple si quiero anular ese comportamiento. Tal vez quiero que sea la tecla Control o algo más con lo que el usuario esté más familiarizado. Pero tienes la opción de ordenar por múltiples columnas. Puedes ordenar por una columna, mantén presionada la tecla Shift, haz clic en el encabezado de una segunda columna y luego, si los valores son iguales, los comparará y ordenará la siguiente columna. Y nuevamente, puedes cambiar esa tecla de ordenación si lo deseas. Y es tan simple como configurarlo con la tecla de ordenación múltiple. Y aquí estoy estableciendo esto en la tecla Control. Esto establecerá la tecla de ordenación como el botón de Comando en Mac OS

Para este ejercicio, nuevamente lo haremos juntos, y este será el último que haremos juntos. Luego te lo entregaré a ti para que continúes. Entonces, lo que queremos hacer aquí, aquí está donde lo dejamos la última vez. Y tengo mi propiedad sortable y tengo mi campo aquí de nombre. Por defecto, sí. La ordenación está habilitada por defecto. Hice clic en ella. Ahora está ascendente. Está descendente. Hago clic de nuevo. Vuelve a nulo o sin orden de ordenación. Y el orden se basará en los valores que he configurado para los datos de la fila. Y también puedo, puedo mantener presionada la tecla Shift, y puedo establecer múltiples ordenaciones aquí. Entonces, si tengo dos que coinciden, puede haber algunas coincidencias aquí. Mantén esto correctamente. Ahora primero se ordenará por nombre, y luego se ordenará por color. Y podemos anular eso estableciendo la clave de ordenación de múltiples columnas. Así que vamos a jugar un poco con esto. Vamos a establecer sortable en false. Y ahora, si hago clic, estoy haciendo clic en el nombre y no sucede nada, pero aún puedo ordenar por color. Y también puedo, eliminemos esto, y hagamos el orden de ordenación. Voy a darle un array. Voy a decir ascendente, descendente. Y ahora puedo ir ascendente, descendente. Y luego, nota cuando hago clic una tercera vez, no vuelve a ese orden de ordenación nulo. No cambia de nuevo. Siempre será simplemente ascendente o descendente. Este, porque no he especificado el orden de ordenación, irá ascendente, descendente y luego volverá al orden anterior. Y puedo bajar aquí y configurar esa clave de ordenación de múltiples columnas. Y voy a establecer esto en control. Y ahora, si mantengo presionada la tecla Shift, que estoy haciendo, y hago clic entre estos, no se hace una ordenación múltiple, pero ahora tengo que mantener presionada la tecla de comando en mi teclado de macOS, y ahora obtengo una ordenación de múltiples columnas.

Genial. Adelante, eso fue más una demostración que un ejercicio. Espero que todo haya sido bastante fácil de seguir. Y sí. Sí. Puedes establecer la clave de ordenación de múltiples columnas en cosas diferentes a control. En la documentación, creo que tienen eso, así que puedes establecerlo en control aquí. Y luego puedes establecerlo en multi-column. Y luego puedes tener, así que puedes establecerlo en control aquí. Pensé que también se podía establecer en otras teclas. Tal vez solo sea control. Estoy viendo en la TypeScript que solo lo tienen como opcional y control. Eso podría ser. Esa es una buena pregunta, Florian. Parece que según la definición de TypeScript, solo es control. Siempre podemos consultar esto y vamos a la documentación y vamos a verlo. Parece que solo es control. Así que es shift de forma predeterminada. Y puedes cambiar el predeterminado para usar la tecla de control en su lugar estableciéndola en control. Sí. Parece que esas son tus dos opciones. Una de las cosas interesantes, como lo que viene de fábrica, Florian. Digamos que tus usuarios o tus clientes o lo que sea dicen, no, tiene que ser cualquier otra cosa. No sé, el número uno o la tecla de tilde o alguna otra tecla. Siempre puedes configurar un encabezado personalizado. Puedes agregar algún enlace de evento a ese escucha de eventos para esas teclas personalizadas o para ese tipo de evento de tecla presionada. Filtrar eso. Comprobar esa tecla. Y luego puedes usar lo que se llama la API de la cuadrícula. No hemos profundizado mucho en eso, pero siempre tienes acceso programático a la cuadrícula. Y así puedes usar una API de cuadrícula para decirle a la cuadrícula, ahora ordena por esta columna ascendente o algo así. Así que si realmente necesitas anularlo, probablemente podrías hacerlo. Podría requerir un poco más de esfuerzo de lo que vale potencialmente, pero las herramientas están ahí para ti, pero no de forma predeterminada. Solo puedes establecerlo, parece que en control usando la clave de ordenación de múltiples columnas. Genial. Aquí está nuestra solución. Solo para dejarlo claro. ¿Alguna pregunta, alguna otra pregunta? Adelante y déjalas en el chat. De lo contrario, seguiremos avanzando. Lo siguiente de lo que queremos hablar es la definición de columna predeterminada. Así que ciertamente, en la definición de columna para cada una de tus columnas, podrías establecer, digamos que para todas las columnas quieres deshabilitar la ordenación y quieres establecer sortable en false. Y así podrías ir, digamos que tienes 20 columnas. Podrías establecer sortable false, sortable false, sortable false, todas estas cosas. Pero eso es repetitivo. Y no queremos hacer eso. Y así tienen lo que se llama una definición de columna predeterminada. Entonces, por defecto, lo que sucederá es, cuando la columna esté siendo configurada por AG Grid, primero van a mirar la definición de columna predeterminada y van a aplicar esos comportamientos o esas propiedades. Y luego, a continuación, van a mirar la definición de columna específica para esa columna. Y siempre puedes anular cualquier cosa de la definición de columna predeterminada si quieres.

Así que tiene una especie de cadena de herencia allí. Por lo tanto, cada columna heredará la definición de columna predeterminada y luego cada definición de columna puede anular esos valores predeterminados. Veamos un ejemplo. Aquí estoy estableciendo una propiedad predeterminada llamada def. Tengo una propiedad predeterminada llamada def y esto será de tipo, es una definición de columna. Voy a especificar el genérico T data para que sea row data y voy a establecer sortable en true. Debido a que mi ejemplo es un poco incorrecto aquí, y pido disculpas por eso, lo cambiaremos en el desafío cuando juguemos con esto. Y lo que haremos es simplemente establecer esto en sortable false. De esa manera, podemos desactivarlo en todas las columnas si queremos. Luego, traigo mi propiedad predeterminada llamada def. Especifico la propiedad y la vinculo a mi variable predeterminada llamada def aquí arriba. Echemos un vistazo rápido a un ejercicio en StackBlitz. Adelante y define una nueva constante predeterminada llamada def en la función del componente. La definición de columna predeterminada será un objeto de tipo def. Y nuevamente, estamos usando TypeScript. Si quieres ignorarlo, simplemente ignóralo. Vamos a establecer la propiedad sortable. La estableceremos en false en lugar de true. Luego, vamos a vincular la constante predeterminada llamada def a la propiedad predeterminada llamada def en el componente AgGrid de React. Y luego, adelante, en una de las columnas, anula esa propiedad sortable. Así que vamos a abrir este ejercicio, sacarlo del camino. Y lo primero que vas a hacer es venir aquí y configurar tu definición de columna predeterminada, vincularla a tu componente. Y luego, si quieres, puedes anular cosas en la propia definición de columna. Así que te dejo que trabajes en eso. ¿Por qué no te tomas, no sé, dos minutos, tres minutos? Debería ser bastante fácil. Configura una definición de columna predeterminada, vincúlala al componente AgGrid de React, a la propiedad predeterminada llamada def. Y luego, según lo desees, anula cosas en tus definiciones de columna específicas y verás cómo funciona. ¿Tienes alguna pregunta? Adelante y déjalas en el chat. Ya sea relacionada con el desafío o no, estaré encantado de responder cualquier pregunta. Sí, buena pregunta. Estoy tratando de pensar. Entonces, la pregunta es si hay alguna forma de ordenar solo los datos visibles cuando se utiliza la paginación. Sí, en el modelo de fila del lado del cliente, cuando haces esta ordenación, de forma predeterminada, cuando voy a ordenar y estoy usando la paginación, se ordenarán todos los datos de fila que he proporcionado al modelo de fila del lado del cliente.

Obviamente, el modelo de fila del lado del servidor es un poco diferente. Entonces, cuando el usuario hace clic en el encabezado para ordenar, básicamente invocará una función de devolución de llamada. Tal vez sea un objeto con una propiedad en él o algo así, lo olvido. Pero básicamente dirá: `Oye, necesito que ordenes los datos y luego me los devuelvas. Avísame cuando esos datos se hayan ordenado`. Y podrías, delegar eso en el servidor. Pero no creo que haya una forma, de forma predeterminada, de ordenar solo los datos visibles al utilizar la paginación. Y creo que podrías hacerlo de alguna manera si fuera necesario, porque puedes obtener la API de la cuadrícula, conocer la página y tu desplazamiento, por así decirlo. Entonces podrías conectar eso y modificar los datos de la fila. Así que hay una forma de hacerlo, pero no de forma predeterminada, creo. Y eso podría ser un poco, para algunas de estas preguntas, es, ya sabes, ciertamente han construido los casos de uso comunes. Pero una de las cosas que aprecio de AG Grid es su capacidad de extensión. Porque tienes la API de la cuadrícula y la API de columnas y cosas similares que te exponen. Tienes un control bastante completo sobre lo que está sucediendo. Solo puede que tengas que llegar a un nivel más profundo, por así decirlo, y conectar las cosas de esa manera. Buena pregunta. Sí.

Bien, adelante y hagamos el desafío juntos. Entonces aquí queríamos configurar las definiciones de columna predeterminadas. Voy a llamar a esto como defColDef predeterminado, y esto va a ser una definición de columna de datos de fila. Y voy a establecer sortable en false. Y voy a bajar aquí. Configurarlo. Ahora, si hago clic en estos encabezados, que estoy haciendo, es difícil de decir, pero estoy haciendo clic en el encabezado y no se está ordenando nada. Pero quiero decir solo para esta columna, adelante y permite la ordenación. Y así ahora puedo ordenar por nombre, pero no puedo ordenar por color. Y como la definición de columna predeterminada es un objeto de definición de columna, cualquier cosa que esté disponible en esta definición de columna, puedes establecerla en la predeterminada. Así que digamos que el orden de ordenación, ya sabes, digamos que solo quiero ascendente. Y así ahora cuando hago clic en esto, simplemente irá en orden ascendente. Y si vuelvo a hacer clic, no hace nada, porque lo bloquea en ascendente. También puedo cambiar esto. Y puedo decir, está bien, de forma predeterminada, vamos a ir primero descendente, y luego ascendente, y luego volver al estado original. Y así ahora puedo cambiar eso. Así que irá primero en orden descendente, luego ascendente, y luego volverá al estado original. Genial. Espero que todos hayan podido seguir el ejercicio. Bien, vamos a pasar al filtrado. Echemos un vistazo. Vamos a hacer el filtrado. Y luego haremos una pequeña pausa, démosle a todos la oportunidad de alejarse si es necesario, o responder a un mensaje en Slack o lo que necesiten hacer. Voy a pasar por el filtrado. Y luego veremos cuánto tiempo tenemos. Y probablemente haremos una pausa de cinco o diez minutos solo para que tengan la oportunidad de alejarse si es necesario, estirar las piernas, tomar agua, lo que sea.

Entonces voy a hablar sobre el filtrado. AgGrid viene con varios filtros proporcionados. Hay el filtro de texto, el filtro de número, el filtro de fecha, y también está el filtro de conjunto proporcionado. Pero como vimos anteriormente, cuando estábamos viendo la documentación, el filtro de conjunto es para la edición empresarial solamente. Nuevamente, déjenme mostrarles eso. Si entro aquí y echo un vistazo al filtrado, verán que obtengo filtrado de texto, obtengo filtrado de número, filtrado de fecha. Pero si quiero usar el filtrado de conjunto, hay una pequeña E roja. Y eso me dice que esta es una función de la edición empresarial. Así que ahí es donde necesito comprar una licencia para AgGrid. De acuerdo. Entonces el filtro de texto es el predeterminado. Así que si simplemente habilito el filtrado de forma predeterminada, obtendremos el filtro de texto. Luego podemos cambiar eso si queremos hacer filtrado para números o para fechas. Y los conjuntos son algo diferente. También podemos habilitar el filtrado estableciendo la propiedad de definición de columna de filtro en true. Echemos un vistazo a eso. Entonces, si entramos en nuestra definición de columna para la columna de nombre, y simplemente establecemos filter en true, listo. Ahora, de repente tenemos filtrado de texto. También podríamos decir explícitamente a AgGrid que use el filtro de columna de texto. Entonces, true es lo mismo que esto. Así que true básicamente dice, sí, adelante y filtra esto. Y quiero filtrar por el filtro de columna de texto. Si también puedo decir explícitamente, oye, para el filtrado, quiero que uses el AgTextColumnFilter. Y veremos que también tienen para fecha, es el AgDateColumnFilter. Y tendremos que establecer eso como la clave para esta propiedad de filtro. Así que esta diapositiva anterior, donde filter se establece en true, en esta diapositiva donde establecemos el filtro en el filtro de columna de texto, esto proporcionará el mismo comportamiento a tus usuarios. Aquí está el filtro de número. Bastante fácil. Simplemente establecemos la propiedad de filtro, y la establecemos en AgNumberColumnFilter. Y ahora obtendremos el filtro de columna de número proporcionado por AgGrid. Y por supuesto, el filtro de fecha. Aquí establecemos, esta es la columna de fecha de pedido, vamos a establecer el filtro en AgDateColumnFilter. Y usan este prefijo Ag para evitar cualquier colisión. Y veremos, creo que veremos un poco de eso tal vez, o ciertamente puedes ir a la documentación y ver cómo construir tus propios filtros, lo cual ciertamente puedes hacer. De acuerdo, así que aquí tenemos el filtro de columna de fecha, y eso usará el filtrado de fecha de forma predeterminada. Bastante fácil de configurar. No hay mucho aquí en lo que profundizar en detalles. Así que hagamos un ejercicio rápido, ¿has abierto esto en StackBlitz?, y ¿por qué no configuras un par de filtros? Así que abre el ejercicio en StackBlitz. Vamos a configurar la columna de nombre del cliente para usar el filtro de texto predeterminado. Recuerda, puedes simplemente establecer filter en true para eso. Para la columna de número de cuenta, vamos a usar el filtro de número, y tendrás que especificar AgNumberColumnFilter. Para la columna de fecha de pedido, vamos a usar el filtro de fecha proporcionado, así que eso es AgDateColumnFilter. Y luego, para la columna de total, vamos a usar nuevamente el filtro de texto proporcionado. Así que por qué no tomamos un par de minutos, trabajas en eso. Y puedes ver que nuestros datos de fila se han vuelto un poco más complejos porque estoy trayendo la fecha de pedido y algunas otras cosas.

Entonces mi fila data se ve un poco diferente. Y aquí tengo un par de columnas más. Así que vas a agregar el filtrado a estas columnas, y no te preocupes demasiado por lo que tenemos aquí abajo en esta fila data. Estoy usando el gancho use memo para calcular los data porque estoy seleccionando los data de diferentes partes y haciendo coincidir algunas cosas. Lo veremos más de cerca en un segundo. Y luego, en la parte inferior, todavía tenemos nuestras definiciones de columna en nuestra fila data.

De acuerdo, así que tengo una columna de nombre de cliente, tengo un número de cuenta, fecha de pedido y una columna de total. Y quiero permitir algún filtrado en estas columnas. Entonces, de entrada, aquí mismo, voy a establecer el filtro en true. Y ahora puedes ver que cuando paso el cursor sobre la columna, el encabezado de la columna, obtengo este pequeño menú. Y ahora puedo escribir en el filtro. Así que digamos que quiero filtrar por LLC. Ahora puedo ver que estos diferentes clientes tienen LLC. Y el filtro de texto proporcionado te brinda algunas capacidades de filtrado en términos de si comienza con, termina con, contiene, ese tipo de cosas. Y luego puedes construir una expresión si quieres y decir, hey, quiero que comience con esto y contenga aquello, ese tipo de cosas. Nuevamente, aquí solo se está haciendo filtrado de texto. Y cuando tengo aplicado el filtrado, también puedo ver que hay un pequeño icono que aparece en el encabezado de la columna que indica que esta columna está siendo filtrada actualmente. Y luego puedo eliminar eso. Y vuelve y lo establece como estaba antes. Si hago clic en el número de cuenta, no tengo ningún filtrado disponible para mí porque no lo he permitido. Entonces, con el número de cuenta, queremos hacer un filtro de valor numérico. Así que voy a hacer un filtro y voy a hacer el filtro de columna de número AG. Y ahora para el número de cuenta, ya sabes, esto es un poco diferente porque espera números. Así que ahora puedo decir igual o no igual, mayor que, menor que, ese tipo de cosas. Así que hagamos algo como mayor que, supongo. Y estos son números de cuenta realmente largos. Igual, ¿cuál era? Ocho, creo. Sí, dos, seis, siete, cuatro, cinco. Adelante. Sí, solo pusiste siete dígitos, probablemente eso. Ocho dígitos. Sí, sí. Obviamente tienes que escribir el número completo aquí. Creo que entiendes la idea. Así que hay un poco, tal vez lleguemos al siguiente cuando hagamos el total. Será un poco más fácil demostrar eso. De acuerdo. Entonces, para la fecha, haremos el filtro de columna de fecha. Así que haremos filtro, filtro de columna de fecha AG. Y luego, para el total, también vamos a configurar el número. Filtro de columna de número AG. Genial. Entonces, para la fecha de pedido, si vengo aquí, obtengo lo mismo. Observa que va a usar la visualización de fecha del navegador. Así que si no te gusta eso, tienes que construir algo diferente por tu cuenta. Y veremos cómo construir tus propios editores de celdas y renderizadores de celdas. Sí, haremos ambos. También puedes construir tu propio filtro de fecha si quieres, si eso es algo que deseas hacer. Y luego, aquí en el total, podríamos decir mayor que 200. Pero estos pueden no ser números. Así que sí, nos encontramos con algo bueno aquí. Así que dije que quiero filtrar esto, quiero que sea un filtro de número mayor que 200. Pero estos valores para el filtro de total son en realidad cadenas. Y así, porque mis totales no son, estoy bastante seguro, puedo verificar esto. Pero porque mis totales no son, son solo valores de cadena. Tenemos que asegurarnos de que cuando los configuremos, tengamos la propiedad correcta, los valores correctos. Y ciertamente eso entra en juego para las fechas. Y veremos esto aquí en un segundo. De hecho, creo que tenemos algunas diapositivas al respecto. Sí. Cuando se trata de hacer filtrado de fechas y marcas de tiempo, es posible que te preguntes, ¿qué pasa con el filtrado de fechas con marcas de tiempo? Y el filtro de fecha funciona tal como está cuando la fila data utiliza un objeto de fecha de JavaScript. Entonces, si quieres usar el filtro de fecha proporcionado, funcionará tal como está, de forma predeterminada, siempre que la fila data utilice objetos de fecha de JavaScript. Pero si tienes una cadena allí, incluso si es una cadena iso, entonces deberás especificar una función comparadora. Entonces, si la fecha se proporciona utilizando otro método, como cadenas iso, entonces debemos especificar la función comparadora. Ahora echemos un vistazo rápido a eso. Aquí tengo mi columna de fecha de pedido. Y he especificado que el filtro sea la fecha de pedido. Pero esa fecha de pedido es una cadena iso. Y así, al usar el filtro de columna de fecha de AG, no funcionará, porque no son objetos de fecha. Entonces, puedo hacer dos cosas. A, cambiarlo para que mi data que estoy proporcionando a la cuadrícula utilice objetos de fecha de JavaScript, y entonces estoy listo. O B, puedo especificar la propiedad comparadora. Así que en el objeto de parámetros de filtro hay una función comparadora, que es diferente al comparador de ordenación. Esto es por qué está debajo de los parámetros de filtro. Y la función comparadora será similar al método de ordenación de matriz. Es un poco diferente. Pero básicamente, esto es una función de devolución de llamada que será invocada por AG Grid. El primer argumento de esta función será el filtro. Entonces, el filtro, bueno, el usuario establece la fecha local a la medianoche. Y luego, para cada fila en esa columna, me dará el valor. Y lo que debo hacer es devolver un valor negativo, uno o cero, al igual que array.prototype.sort, donde le estoy diciendo a AG Grid cómo ordenar esto. Ya sea que esto sea menor que la fecha local del filtro a la medianoche, mayor que la fecha local del filtro a la medianoche o igual. Y voy a devolver ese valor negativo, uno o cero. Sí, así que Christos tiene una pregunta aquí. Muéstranos el tipo exacto de filtro de columna de fecha, columna data. Entonces, si es un objeto de fecha de JavaScript, como aquí, para los valores en mi fila data, entonces el filtro de columna de fecha de AG Grid funciona tal como está. Si el valor de esos no lo es, entonces usamos la función comparadora. Y la función comparadora, puedo hacer lo que quiera. Porque obtengo ese valor de celda. Entonces aquí, espero que ese valor de celda sea esa cadena iso, nueva en un objeto de actualización.

Voy a establecer las horas en cero, para comparar la medianoche con la medianoche. Luego haré esa comparación y devolveré un valor negativo, cero o uno. Ya hemos hablado de esto. Sí, el valor negativo, uno o cero es la comparación entre el valor de la celda y el valor de medianoche del filtro local proporcionado por aggrid. Entonces, cuando el usuario selecciona el 1 de enero, te dará esa fecha local a medianoche como valor para este primer parámetro. Esa es la respuesta a la pregunta de Ali. Bien, eso nos lleva a través de todo el contenido de filtrado. Luego, el siguiente contenido en el que nos adentraremos es el renderizado de celdas. Y tenemos un par de secciones al respecto. OK, hicimos un gran trabajo. Comenzamos esta mañana. Hicimos esto por la tarde, o lo que sea para ti. Pero instalamos aggrid con React. Vimos lo fácil que es comenzar con la instalación de aggrid. Instalamos esos dos módulos de nodo, el caso de aggrid, aggrid community, así como los módulos de React de aggrid, los instalamos con npm. También vimos las definiciones de columna y cómo comenzar con aggrid. Configuramos nuestras definiciones de columna, configuramos los datos de fila. Y vimos la clasificación. Vimos cómo proporcionar la definición de columna predeterminada. Y también vimos el filtrado. Y para el filtrado, vimos los filtros proporcionados por aggrid. Vimos el filtro de columna de texto, el filtro de columna de número y el filtro de columna de fecha. Y hablamos un poco sobre algunas de las sutilezas al respecto. Específicamente sobre el filtro de columna de fecha, cómo necesitamos proporcionar objetos de fecha para usar el filtro de columna de fecha que viene con aggrid. O necesitamos proporcionar a la función de parámetros de filtro una función de comparación. Y esa función de comparación es la que nos permite decirle a aggrid cómo hacer el filtrado para los valores de fecha. En este ejemplo, nuestros valores de fecha eran cadenas iso, por lo que pudimos analizar esa cadena iso. Establecimos la hora en medianoche, o la hora, minuto, segundos, milisegundos en cero. Y luego hicimos nuestra comparación entre el valor de la celda que es, y esa función comparadora es invocada por aggrid para cada celda para determinar eso. Y lo compararíamos con la entrada del usuario para el filtro a medianoche.

A continuación, vamos a ver el renderizado de celdas. Y específicamente para el renderizado de celdas, vamos a ver la función value getter, el formateador de valor y la función de renderizado de celda. Sin ninguna personalización, y en su forma más simple, cada celda en aggrid se renderiza como una cadena basada en el campo especificado en los datos de fila proporcionados. Sin embargo, muchas veces, una implementación de aggrid no será tan simple. Ahí es donde podemos aprovechar la canalización para renderizar celdas. Tenemos la función value getter, el formateador de valor y una función o componente de renderizado de celda. Y vamos a ver la función de renderizado de celda. También puedes construir componentes de React personalizados y registrarlos y proporcionarlos como renderizadores de celdas, donde realmente obtienes un componente de React dentro de esa celda. Y puedes usar hooks y eventos y todo eso que viene con un componente. Pero también puedes usar una función simple para renderizar HTML y agregar escuchadores de eventos y cosas así. Así que vamos a sumergirnos en la función value getter. La función value getter nos permite obtener los datos de fila para las columnas donde el uso de la propiedad field no es una opción. También podemos usar la función value getter para tal vez modificar los datos antes de proporcionarlos a la cuadrícula. Nuevamente, piensa en nuestro filtrado de fechas. Digamos que los datos que obtenemos de nuestro backend van a ser, nuevamente, esas cadenas iso. Y queremos modificar esos datos antes de proporcionarlos a la cuadrícula. Y queremos proporcionar realmente un objeto de datos de JavaScript como parte de eso. Y así podría usar la función value getter para hacer eso. La función value getter es una función que se invocará por aggrid para cada celda. Y la configuraré en mi definición de columna. Y la función se invoca con el objeto de parámetros value getter. Así que vamos a especificar esa función, la función value getter. Y el parámetro será el objeto de parámetros value getter. Y el genérico es el tipo de datos T. Así que sea lo que sea que haya configurado para mis datos de fila. Vamos a profundizar un poco más aquí. Echemos un vistazo a la interfaz de parámetros value getter. Este es el objeto con el que se llamará a mi función value getter. Se proporcionará este parámetro. Y esto vendrá de aggrid. Y este objeto de parámetros value getter tiene muchas cosas realmente útiles. He aludido o referenciado la API de la cuadrícula. Y puedes buscar más información al respecto en la documentación. Pero cuando estoy usando la función value getter, es posible que necesite tener acceso a la API para hacer algo más. Y se me proporciona eso. Así que tengo la API de la cuadrícula. Tengo la definición de columna. Así que la definición de columna real que configuré. Si necesito hacer referencia a eso, puedo hacerlo. Tengo el objeto de columna. También tengo la API de columna, que es ligeramente diferente a la API de la cuadrícula. También está este contexto, que puedes usar para conectar un contexto global dentro de aggrid. Y eso es algo que necesitas hacer. También se te proporcionará eso. También se te darán los datos. Así que todos los datos para esa fila. Nuevamente, un value getter específico para una celda. Y lo configuramos en la definición de columna. Pero también se me da acceso a los datos. Así que cualquier dato para toda la fila, a medida que itera sobre la matriz de objetos. Correcto. Siempre puedo hacer referencia a otros fragmentos de datos, lo cual es realmente útil. Y eso será de tipo T, que es ese tipo genérico que especificamos para la definición de columna. También tengo un callback para obtener el valor. Y puedo invocar esta función de obtención de valor y proporcionarle un campo, una cadena. Y me dará el valor que está en esa celda. También tengo acceso a lo que se llama el nodo de fila. No nos adentraremos en eso. Pero solo sepa que también hay este concepto de un nodo de fila.

Y eso nos da un poco más de exposición a las cosas en la cuadrícula que podemos necesitar. OK. Y ya los desglosé para nosotros. Quiero destacar la función get value. Este método de utilidad te permite obtener los valores de las columnas. También puedes usar esa misma notación de punto a la que hago referencia al principio para la propiedad field. Entonces, si necesitas obtener un valor, también puedes hacerlo. La API de la cuadrícula es extremadamente útil. Y la usamos para cosas como interactuar programáticamente con la cuadrícula, tal vez agregar escuchadores de eventos a la cuadrícula, acceder a funciones de portapapeles y muchas otras cosas más. La API de columna es útil para interactuar con columnas específicas, tal vez mover una columna programáticamente, fijar su tamaño, etc. Y puedes explorar todos los métodos y cosas así en la API de columna en la documentation. Un nodo de fila representa una sola fila en la cuadrícula. Esto es útil para cosas como la API de selección de filas, actualizar los data de la fila y agregar escuchadores de eventos a la fila.

De acuerdo. Ahora que hemos hablado un poco sobre cómo se invoca la función value getter por Agigrid, echemos un vistazo rápido a un ejemplo. Aquí tengo mis definiciones de columna. Y aquí estoy viendo la columna de precio. He establecido el nombre del encabezado como precio. Necesito establecer eso porque notarás que no estoy usando la propiedad field. Ya no estoy usando la propiedad field. Estoy usando el value getter para proporcionar el valor de vuelta a Agigrid. Así que necesito especificar un nombre de encabezado porque aquí no hay nada para capitalizar porque no he proporcionado un field. Y en el value getter, voy a proporcionar esta función de devolución de llamada. Y esta función de devolución de llamada se invocará con los parámetros del value getter. Y lo primero que quiero hacer es verificar si tengo data. Si estás utilizando cosas como agrupación y tal vez tablas dinámicas, hay un par de casos específicos dentro de Agigrid donde tu fila o tu celda pueden no tener ningún data porque estás haciendo cosas como agrupación. Y la agrupación probablemente especificará que una celda en la fila tendrá data. Y luego, cuando abres ese grupo, ahora ves todos los data. Y así quiero verificar eso básicamente. Entonces, si los data son indefinidos, en este caso, para el precio, simplemente devolveré cero. Es posible que desees devolver una cadena vacía o algo así. Y lo que eso significa es que no queremos calcular, hacer math.round de indefinido y obtener una excepción en tiempo de ejecución porque data puede ser indefinido. Entonces, si tengo data para esta celda en particular de la columna, para la columna de precio, simplemente redondearé ese precio. Usaré math.round. En el objeto de parámetros, ese objeto de parámetros del value getter, tengo los data. Y luego accederé a la propiedad precio dentro de ese objeto data.

De acuerdo, hagamos un ejercicio. Así que ve y abre el ejercicio en StackBlitz. Y luego, nota que la columna de total está vacía actualmente. Quiero que uses un value getter para sumar el total de cada pedido. Tal vez quieras mirar la solución de antemano en este caso, porque sumar es un poco complejo ya que tienes que hacer un filtrado, mapeo y reducción. Y no quiero que tengas que escribir todo eso. Así que tal vez quieras adelantarte a la solución porque el total de un pedido se basará en una búsqueda. Recuerda, miramos los data anteriormente. Necesitas buscar los productos y el precio del producto y sumarlo todo para ese pedido en particular. Y no quiero que te enredes con la complejidad de hacer ese cálculo. Así que tal vez quieras configurar el value getter y luego venir aquí y copiar y pegar este valor. Si realmente quieres codearlo tú mismo, adelante. Pero solo quería señalarte eso. Así que ve y abre ese ejercicio. Y luego, en la columna de total, hagamos un value getter. Nuevamente, en este caso, no puedo usar simplemente el campo porque para mi pedido, no tengo solo un campo de total en este caso. Así que necesito sumar el total de cada pedido. Y para eso vamos a usar la función value getter. Tengo aquí alguna información en términos de algunas hints sobre cómo hacerlo. ¿Por qué no seguimos adelante y tomamos tres o cuatro minutos? Trabaja en ese ejercicio una vez que hayas terminado con el ejercicio o estés listo para continuar. Solo dame un pulgar hacia arriba en el chat. Y luego revisaremos la solución juntos.

Sí, tenemos una pregunta aquí. Tengo una confusión. La función value getter obtiene el valor de cada celda. Eso es correcto. Básicamente, se configura el value getter por columna. Entonces vamos a establecer la propiedad value getter en el objeto de definición de columna. Así que voy a decir para la columna total, así es como quiero que uses este value getter. Esta es una función de devolución de llamada. Así es como vas a obtener el valor que se mostrará dentro de cada celda. Cada fila de los data que se muestra en la cuadrícula. Sí, el value getter se configura por columna, pero la función se invocará para cada celda a medida que se va recorriendo. La cuadrícula va a iterar sobre cada fila que proporcionas en los datos de fila. Y cuando llegue a esa columna, en lugar de buscar el campo en los datos de fila, dirá: `Oh, tienes un value getter aquí. Permíteme invocar esa función. Espera que esa función devuelva ese valor. Y luego ese valor es el que se establece como el texto interno dentro del desarrollo. Y nuevamente, vamos a pasar al value formatter. Así que hay una especie de proceso para renderizar una celda. Primero tienes el value getter, que va a devolver el valor que se mostrará en la celda. Pero si quieres dar formato a ese valor, digamos para esta columna total, en lugar de devolver un número, quieres decir, ya sabes, quieres poner un símbolo de moneda, quieres tener, euros, ya sabes, dos euros o lo que sea que vaya a haber ahí. Ahí es donde puedes usar el value formatter. Y puedes usar ambos en conjunto. Puedes decirle al value getter, así es como obtienes el valor de la celda. Y luego, ag-Grid dirá: `Oh, ¿quieres que lo formatee? En lugar de simplemente poner el valor como texto interno en este desarrollo. Y ahí es donde puedes tener otra función de devolución de llamada que vamos a ver a continuación llamada value formatter, que se llamará con el valor, sin importar cómo se haya obtenido, ya sea a través de la propiedad de campo, el value getter o cualquier otra cosa. Y luego llamará a ese value formatter. Y luego puedes, ya sabes, darle formato en consecuencia. Sí, el value getter obtiene el valor para cada celda en la columna que has especificado para esa propiedad value getter.

Bien, echemos un vistazo al ejercicio. Voy a abrir esto en StackBlitz. También voy a volver aquí y voy a saltar adelante y copiar este code porque no quiero escribirlo todo. Muy bien, estamos viendo nuestra columna total, y vemos de entrada aquí, tengo una columna total configurada aquí abajo, y tengo un filtro de columna en ella, pero no hay valor porque no he especificado un campo o un value getter. Y así que probablemente podría haber hecho el mismo trabajo si quisiera hacerlo antes de conectar los data. Podría haber utilizado los datos que vienen de mi backend, podría haber usado eso y luego usar eso para vincularlo a mis datos de fila y calcular el total allí. Pero también puedo usar el value getter. Este es un buen ejercicio de aprendizaje. Así que voy a usar el value getter, y eso se llamará con ese objeto params. Y simplemente le voy a dar una función de flecha. Y lo primero que voy a decir es si params.data es igual a cero, es indefinido, quiero devolver cero. También podría devolver una cadena vacía. De lo contrario, lo que quiero hacer es calcular este valor aquí. Así que ahora, si voy a total, ¿qué pasó aquí? ¿No lo alineé correctamente? Algo pasó con mis órdenes de devolución. No. Oh, data.products en lugar de products. Oh, ya veo. Buena observación. Sí, tenía esto correcto. Ahí vamos. Ahí vamos. No estoy seguro de por qué. Supongo que sí, posiblemente sea indefinido. Solo porque estamos trayendo este JSON data, tal vez TypeScript nos está quejando un poco pero lo ignoraremos por ahora. Probablemente algo que quieras solucionar en una aplicación de producción. De acuerdo, aquí tengo mis params que vienen. Tengo acceso a los data, y estoy obteniendo esos elementos de orden. Así que volvamos a ver nuestro modelo de data de nuevo. Y vamos a data.JSON y echémosle un vistazo. Aquí están mis clientes, y estoy recorriendo mis órdenes. Y en nuestras órdenes, tenemos elementos de orden y tenemos órdenes. Y para calcular el total, lo que queremos hacer es filtrar esos elementos de orden para obtener los elementos de la orden, y luego vamos a mapearlos a un producto basado en el ID del producto de ese elemento de orden. Y luego vamos a sumarlos todos usando array.reduce. Y así vamos a tomar el precio del producto y sumarlos todos basados en el precio total. Así que para todos los elementos que están en la orden, obtenemos el producto, obtenemos el precio del producto y lo sumamos todo, lo que nos da nuestro total de la orden. Y lo que podemos ver ahora es que nuestra columna total tiene el total de la orden adecuado. Así que este es un ejemplo que se basa en este conjunto de datos de muestra con el que estamos trabajando. Pero obviamente, con el value getter, esta es una función de devolución de llamada que puedes usar para básicamente poblar los data en la cuadrícula cuando no estás usando la propiedad de campo. Muy útil.

Y siempre puedes consultar esa solución en StackBlitz si quieres ir directamente a ella. De esa manera, puedes ver una versión funcional.

Lo siguiente que quiero mostrarte es cómo podríamos usar un value getter reutilizable. Por supuesto, proporcionar la función value getter en línea es muy razonable y fácil de usar. Sin embargo, es posible que desees tener una solución más reutilizable. Digamos que tienes muchas cuadrículas que se muestran en toda tu aplicación. Y este concepto de obtener, digamos, un total de orden es bastante común. Es posible que tengas varias cuadrículas donde se muestran los detalles de la orden o cosas así para un cliente. Tal vez una en una página de orden, tal vez una en una página de cliente donde se muestran todas sus órdenes o lo que sea. Y es posible que desees tener un value getter reutilizable. Ahora, estas son solo funciones. Por lo tanto, es muy fácil sacar esta función de la definición de columna y convertirla en una función reutilizable o de orden superior. Y lo que vamos a hacer aquí en este ejemplo es echar un vistazo a una función value getter multiplicadora. Esta es una función de orden superior que vamos a llamar multiplicadora value getter como una función. Y le proporcionaremos un valor y un multiplicador. Y eso devolverá la función value getter. Así que es una función de orden superior.

Entonces es una función que devuelve esta función que luego se proporciona a AgGrid que básicamente multiplicará el valor en función del multiplicador que proporciono. Aquí hay un poco de cosas de TypeScript sucediendo. Así que no te preocupes demasiado por eso. Lo bueno de esto es, en primer lugar, esto es agradable y muy fácil de probar. Tengo una función aquí. Puedo escribir una prueba unitaria alrededor de esto. Puedo poner esto en un archivo .ts o .js. Puedo importar este módulo y usar este ValueGetter multiplicador en todas partes en mi aplicación. Es una función pura. Es fácil de probar. Está un poco aislada, lo cual es agradable y reutilizable. Podemos usar una función de orden superior para hacer algo como esto. Tengo una explicación si quieres profundizar más en ese ValueGetter multiplicador de función de orden superior que mostré. Pero aquí tienes un ejemplo de cómo se verá eso. Entonces aquí, voy a proporcionar la propiedad ValueGetter a mi definición de columna para el precio. Y en este caso, lo que quiero hacer es llamar realmente a mi función ValueGetter multiplicadora. Y la razón por la que he usado una función de orden superior es básicamente para permitir que sea un poco personalizada. Y lo que estoy diciendo es que para el precio en esta columna, quiero que obtengas el valor basado en el precio. Pero quiero que lo multipliques por la tasa de impuestos. Así que digamos que esto es, nuevamente, estamos usando datos de muestra, un poco hipotéticos. Pero lo que esta función ValueGetter multiplicadora hará es devolver una función ValueGetter después de ser invocada que será invocada por aggrid y vamos a calcular este precio basado en el precio y la tasa de impuestos.

Y vamos a echar un vistazo a este ejemplo en StackBlitz. Esto es un buen ValueGetter reutilizable. Así que dentro del directorio de origen ahora, tengo un par de directorios diferentes aquí. Vamos a echar un vistazo a estos. Pero tenemos algunos ValueGetters reutilizables, algunos ValueFormatters reutilizables y algunos renderizadores de celdas en los que vamos a profundizar. Y aquí, en este ValueGetter, puedo ver que tengo este MultiplierValueGetter, muy similar, un poco diferente aquí, tal vez un poco más ampliado y haciendo algunas comprobaciones adicionales. Eso va a tomar ese valor que es una clave de nuestros datos de fila y nuestro multiplicador. Y va a hacer esa multiplicación por nosotros. Y luego, si vuelvo a nuestro precio, ahora puedo ver que el precio de estos productos, y ahora solo estamos viendo un producto específico, no un pedido. Así que los increíbles pantalones congelados, que suenan increíbles, y vienen en color blanco, podemos ver que el precio es de 55.56. Y eso incluye el impuesto. Entonces, si volvemos a nuestro archivo grid.tsx, ahora puedo ver que estoy usando MultiplierValueGetter. Y aquí, en la columna de precio para el ValueGetter, he especificado la función MultiplierValueGetter, especificado la fila data como el genérico. Y estoy diciendo, adelante y usa el valor de precio para cada celda, y luego multiplícalo por la tasa de impuestos. Y esa tasa de impuestos también proviene de la fila data. Entonces, ese es un ejemplo de cómo podrías escribir una función de orden superior para cada celda. Y luego, veremos lo mismo para los formateadores de valor en un segundo.

No creo que tengamos un ejercicio sobre eso, porque no es realmente complejo, sino simplemente debido a su naturaleza. Pero es un buen ejemplo. Y siempre puedes consultarlo cuando lo necesites.

Como prometí, vamos a echar un vistazo al formateador de valores a continuación. Entonces, después de que se conozca, calcule o recupere el valor de la celda, la función de devolución de llamada OptionalValueFormatter nos permite formatear el valor dentro de esa celda. La función ValueFormatter también es invocada por AGGrid para cada celda. Se configura en la definición de columna. Se invoca la función. Esta vez, en lugar del objeto de parámetros ValueGetter, se invoca con el objeto de parámetros ValueFormatter . Veamos eso.

El objeto de parámetros ValueFormatter se ve así. Y tenemos muchas de las mismas propiedades en esto. Tenemos una API, la definición de columna, la columna en sí, la API de columna, el contexto, data. La diferencia es que, en lugar de tener una función getValue, tenemos el propio valor. Porque ya hemos recuperado el valor para esa celda en la columna que hemos configurado el ValueFormatter para. Entonces, en el caso de nuestra columna de total, el valor se ha recuperado o calculado para el valor. Pero ahora, tal vez quiero formatearlo. Nuevamente, tal vez quiero poner un símbolo de moneda delante o un icono u otra cosa dentro de esa celda. Y ahora, puedo devolverlo desde el ValueFormatter. Puedo formatear ese valor según sea necesario en función del valor. Entonces podría, por ejemplo, redondearlo, entre otras cosas. Entonces, nuevamente, ya lo mencioné. Y la diferencia entre los parámetros ValueFormatter y los parámetros ValueGetter es el método getValue frente al valor real que se va a formatear. Aquí tienes un ejemplo de uso del ValueFormatter. Entonces, aquí tengo esa columna de precio. Y he especificado la propiedad ValueFormatter en la definición de columna. Y eso es invocado por AGrid con el objeto de parámetros ValueFormatter. Voy a crear un nuevo formateador usando el InternationalNumberFormatter. Aquí, estoy usando EN-US como localización, especificando los dígitos mínimos y máximos de fracción. Si el valor es indefinido, simplemente devolveré 0.

Así que voy a verificar ese valor, solo para asegurarme antes de llamarlo, si de hecho es indefinido. Es posible que nuestro obtenedor de valores haya devuelto indefinido o que el valor del campo sea indefinido. Y luego voy a devolver, voy a invocar el método de formato en el formateador con el valor del objeto de parámetros. Así que tengo el objeto de parámetros ValueFormatter. Y estoy usando esa propiedad de valor y formateando ese valor para mi columna de precio.

Así que hagamos un ejercicio rápido, para que practiques un poco con esto. El objetivo de este ejercicio es aprender a usar una función de obtención de valores. Abre el ejercicio en StackBlitz. Quiero que agregues un formateador de valores a la columna de total para formatear el valor usando esa clase de formato de número. Así como lo hice yo. Si quieres consultar las diapositivas, si no lo has usado antes, o puedes simplemente avanzar, echar un vistazo a la solución. Si no quieres code esto, siéntete libre de copiarlo. Y voy a hacer lo mismo para que no tengas que verme escribir. Así que quiero que uses el formateador de valores para formatear la columna de total. Voy a tomar esto de la solución, al menos esta parte de ella. Sí, estamos usando un formateador de números aquí. Puedes usar tu librería favorita si quieres, Lux y lo que sea, moment. Sí, date fns. Bueno, supongo que eso es más para fechas que para números en realidad, supongo. Pero si estuvieras formateando fechas, sí, todo ese tipo de cosas. Formateador de valores. Bien, tenemos muchas personas que han terminado y están listas para continuar. Así que voy a seguir adelante y empezar con este ejercicio. Así que cierra esto. Vuelve a nuestro ejercicio y ábrelo. Bien. Y solo voy a asegurarme de tener la tabla correcta. Así que voy a seguir adelante y empezar con este ejercicio. Bien. Y queremos agregar esa función de formateador de valores a la columna de total. Así que voy a bajar aquí hasta el total. Nuevo formateador de valores. Voy a obtener el objeto de parámetros. También podrías usar la desestructuración de objetos aquí, si quieres solo obtener el valor o lo que sea. Voy a decir si no params.data o lo que sea. Voy a devolver una cadena vacía. De lo contrario, quiero devolver este formateador de valores. Solo voy a usar el formato de número internacional y crearlo aquí. Estoy usando la localización en inglés de EE. UU., la moneda y el USD y luego llamo al método de formato en eso con params.value. Y si venimos aquí, ahora puedo ver que obtengo un bonito formato de moneda con dólares y centavos y todas esas cosas. Perfecto. Bastante fácil de usar. Nuevamente, ten en cuenta que estamos siguiendo un orden aquí porque el obtenedor de valores se llama primero, ¿verdad? Así que si no tuviera un campo aquí, podría especificar el obtenedor de valores. Y luego a partir de ese valor, el formateador de valores es el siguiente. Y eso nos da la oportunidad después de que se haya calculado o calculado o lo que sea el valor. Ahora puedo formatear ese valor. Y en el objeto de parámetros del formateador de valores, en lugar de una función de obtención de valores que acepta un campo, hay una propiedad de valor real. Y esa propiedad de valor va a ser el valor en sí para esa celda. Bien. Genial. Si tienes alguna pregunta, déjalas en el chat. Estoy encantado de echarles un vistazo. De lo contrario, vamos a seguir adelante. También tengo aquí un formateador de valores reutilizable. Voy a repasarlo rápidamente. Es muy similar a la función de obtención de valores multiplicadores que mostré anteriormente. Así que esta es una función de orden superior. Nuevamente, muy útil y reutilizable, fácil de probar porque es una función pura. Por lo tanto, es algo que puedo compartir en todas mis tablas.

Hasta luego, Sergio. Gracias, amigo. Sí. Esto es solo un formateador de valores reutilizable. Y tenemos un ejemplo de esto. Tengo una especie de desglose en caso de que estés interesado en algunos de los genéricos de TypeScript y cómo se construye esto. Así es como usaríamos esto. Aquí, para mi formateador de valores, voy a llamar al formateador de valores decimal. Y le voy a dar algunos tipos de TypeScript aquí, básicamente diciéndole qué esperar para el valor. Y luego le estoy diciendo a la función del formateador de valores que he escrito, este formateador decimal de valores, una función de orden superior, que quiero formatearlo con dos decimales. Si echamos un vistazo a ese ejemplo en StackBlitz, y bajamos, aquí está el formateador de valores decimal en sí. Y lo estoy exportando de mi formateador de valores. Y luego en la cuadrícula, voy a importar ese formateador de valores. Y en mi columna de precio, estoy usando ese multiplicador para tomar el precio y multiplicarlo por la tasa de impuestos.

Y luego también estoy diciendo para el formateador de valores, nuevamente, podría simplemente escribir una función aquí. Y eso está bien y bueno. Pero digamos que lo estoy usando en todas partes. Y quiero uno reutilizable, de alta calidad, ya sabes, que pueda probar y asegurarme de que sea bueno para usar en todas mis cuadrículas. Ahora tengo mi formateador de valores decimal aquí para el precio. Y aquí podemos ver que tengo dos decimales. Nuevamente, podríamos hacer un formateador de valores de moneda o algo así si quisieras. Es bastante fácil imaginar cómo podrías construir estos. Me gusta escribirlos como funciones de orden superior para que puedas componerlos entre tus cuadrículas. OK, finalmente, en el proceso de renderizado de celdas, tenemos el obtenedor de valores, el formateador de valores, y luego tenemos un renderizador de celdas. Entonces, después de que se determina el valor de una celda y opcionalmente hemos formateado el valor, también podemos usar un renderizador de celdas para tener un control total sobre cómo se renderiza la celda en AG Grid. Es importante saber que realmente solo queremos usar estos renderizadores de celdas cuando sea necesario porque a menudo pueden tener implicaciones de performance. Por defecto, el contenido de texto de los elementos HTMLElement de la celda, simplemente un div, se establece en el valor opcionalmente formateado. Entonces, después de que se calcula y opcionalmente se formatea el valor, AG Grid simplemente establece ese contenido de texto en ese elemento div. Y eso es lo que se renderiza dentro de la celda. Y luego hay un poco de relleno y todo eso. Pero digamos que queremos agregar cosas adicionales a esa celda. Tal vez queremos que sea interactivo o queremos agregar un ícono en la celda o lo que sea queramos. Queremos tener un control total sobre eso. Y lo tenemos porque es simplemente insertar HTML, o si quieres, un componente dentro de ese elemento div HTML que es la propia celda. Y ahí es donde entra en juego el renderizador de celdas. Y podemos usar un renderizador de celdas con una función de devolución de llamada y también podemos registrar componentes personalizados con renderizadores de celdas y luego renderizar un componente dentro de cada celda si queremos. Entonces, el renderizador de celdas para una definición de columna básicamente acepta los siguientes valores. Podemos proporcionar indefinido, lo que renderizará el valor de la celda tal como está usando ese contenido de texto. Así que podemos anular eso. Así que digamos que teníamos una definición de columna predeterminada para un renderizador de celdas personalizado.

Pero queríamos anular eso por alguna razón. Podríamos simplemente establecer el renderizador de celdas en indefinido y no usará ningún renderizador de celdas heredado. Simplemente volverá al comportamiento predeterminado de insertar el valor en el contenido de texto, estableciendo el contenido de texto igual a ese valor. También podemos especificar una cadena que haga referencia a un renderizador de celdas registrado, donde estés usando como un componente, o podemos proporcionar una referencia al propio componente.

Echemos un vistazo a un par de estos. Entonces, echemos un vistazo a la función de renderizador de celdas. En realidad, supongo que esta diapositiva necesita ser actualizada porque también puedo tener una función que es invocada por AG Grid que devuelve HTML o un elemento HTML que se renderiza dentro de la celda. Cuando uso la función en lugar de un componente, puedo, nuevamente, esto no es una función de React. Es solo una función de JS básica que es invocada por AG Grid que devuelve tanto una cadena HTML que se establece como la propiedad HTML interna en el elemento div, que es la celda, o un objeto elemento HTML de JS básico, que luego se establece como el hijo, creo, dentro de ese div es como el elemento hijo.

Cuando usamos una función de renderizador de celdas, será invocada por AG Grid y se invocará con un objeto de parámetros de renderizador de celdas. Y así es como se ve esa interfaz. Nuevamente, se llama con la API y la definición de columna, la columna, la API de columna. Obtengo los datos, el nodo y el valor. Echemos un vistazo a un ejemplo de una función de renderizador de celdas. En este ejemplo, estoy viendo la columna de precio y quiero hacer una representación personalizada. En este ejemplo muy forzado, todo lo que estoy haciendo es formatear, pero he tomado el mismo code del formateador de valores y lo he insertado en el renderizador de celdas, y podemos ver que esto funcionará, porque esto devolverá una cadena que luego se colocará en el renderizador de celdas. También puedo devolver HTML, y también puedo devolver un objeto HTML. Entonces, creo que lo que queremos hacer aquí, esto... Sí, está bien. Vamos a hacer este ejercicio rápidamente juntos, porque creo que este ejemplo que mostré aquí, muestra cómo podemos usar simplemente el renderizador de celdas, y se llama. Pero casi parece un formateador, así que quiero mostrarte cómo podemos realmente devolver una cadena HTML. Así que vamos a hacer este ejercicio juntos. Permíteme mostrarte esto.

Lo que queremos hacer es agregar un renderizador de celdas a la columna de fecha de pedido. Vamos a verificar el valor y, si no está definido, vamos a devolver algo de JSX que incluye un icono de material junto a la cadena de fecha formateada, y lo voy a renderizar usando esto. En realidad, déjame avanzar y obtener todo aquí, para que no tengas que verme escribirlo todo. Muy bien, vamos a ir a la fecha de pedido. ¿Dónde está esa fecha de pedido? Aquí vamos. Entonces vamos a decir para el renderizador de celdas, quiero usar esta función de devolución de llamada que va a devolver JSX. Voy a decir si no hay params.data, entonces voy a devolver, creo que es null o una cadena. No recuerdo. Sí, puedes devolver null. Creo que también puedes devolver una cadena, o tal vez un fragmento. En este caso, lo que quiero hacer es devolver un poco de JSX, y voy a establecer un div contenedor, y luego dentro de eso quiero tener un icono de material, y luego aquí voy a formatear la fecha. Entonces, lo que he hecho, podría haber usado simplemente un formateador de celdas. Todo lo que quería hacer era formatear la fecha, pero en este caso, quería mostrar algo de HTML adicional. Quería mostrar un icono junto a eso. Junto a eso. Ahora, si vengo aquí, lo veo aquí, puedo ver aquí que tengo mi icono, y tengo mi fecha de pedido. También podría agregar tal vez algo de espacio aquí, y darle un espacio de 10 píxeles, 20 píxeles, y ahora tenemos un pequeño espacio entre los dos. Lo bueno del renderizador de celdas es que tengo control total sobre todo lo que está dentro de esa celda. Es solo un elemento HTML, pero ahora tengo control total sobre él. Puedo hacer esto interactivo. Puedo agregar escuchadores de eventos, todo tipo de cosas aquí. Si entramos y echamos un vistazo a esto, puedes ver aquí, déjame aumentar un poco el tamaño de mis herramientas de desarrollo. Entonces aquí está, es un poco difícil porque está todo envuelto y tal, pero aquí está el div de la celda real. Normalmente, si miramos, por ejemplo, si miramos el elemento anterior aquí, podemos ver que esto solo tiene el valor del número de cuenta aquí. Podemos ver el número de cuenta, y está simplemente establecido, la cuadrícula AG en este div ha establecido el contenido de texto para que sea ese valor que está opcionalmente formateado, que hemos conectado. Pero en este caso, hemos proporcionado el HTML, y en este caso, el JSX, que se va a renderizar dentro de este elemento div. Así que en lugar de solo contenido de texto, nuevamente, puedo hacer lo que quiera aquí, ¿verdad? Así que tengo este div con algún estilo en él. Tengo mi icono y mi fecha. Y así podemos ver que esto se muestra bien aquí dentro. Entonces, los renderizadores de celdas son realmente poderosos en el sentido de que si quiero hacer una celda interactiva, quiero realmente diseñar eso. Quiero hacer lo que quiera dentro de la celda. Ahí es donde puedo usar un renderizador de celdas para tener control total sobre eso. Entonces, aquí está la solución. Echa un vistazo si quieres. Pero eso nos lleva al final del renderizador de celdas. Avísame si tienes alguna pregunta. Voy a entrar en la edición de celdas en el último momento aquí. OK. Así que acabamos de hacer, primero, hicimos nuestras definiciones de columna. Hablamos sobre la clasificación y el filtrado y los filtros proporcionados y todo eso. Luego vimos el proceso de renderizado de celdas. Hablamos sobre el obtenedor de valores, el formateador de valores y el renderizador de celdas en sí. Y ahora vamos a echar un vistazo a la edición de celdas. Muy rápido, tenemos una pregunta. Quiero establecer un nivel de profundidad de columna.

Sí, muy buena pregunta. Entonces ahí es donde puedes usar un renderizador de celdas. Y vas a usar un renderizador de celdas que se invocará con esos parámetros. Tienes acceso a los data y al valor. Y luego puedes establecer eso. Establécelo como un flexbox. Establécelo en columna, muestra y luego puedes establecerlo en una columna, y luego puedes hacer una profundidad de columna. Solo usa flexbox, establécelo en columna, muestra, flex y establece la dirección de flexión en columna y ese tipo de cosas. Y luego puedes tener esas fechas una encima de la otra. Es importante saber, sin embargo, a medida que comienzas a trabajar con la altura de una fila, puedes tener desbordamiento. Y tienes que hacer un poco de CSS allí, ¿verdad? Entonces ahora tienes que lidiar tal vez con la altura de cada fila si vas a expandirla para que sea un poco más alta o algo así. Y puedes hacer eso con AG Grid. Definitivamente revisa la docs. OK. Así que echemos un vistazo a la edición de celdas. Habilitamos la edición de celdas usando la propiedad editable en la definición de columna. Y establecemos eso como un booleano para habilitar o deshabilitar la edición del valor de la celda. Podemos establecer editable como una función, si queremos, para determinar si la edición está habilitada. Entonces podemos establecerlo como un simple booleano, o podemos proporcionar una función de devolución de llamada que devuelve ese booleano que determina si la celda se puede editar o no. Y podrías hacer eso, digamos que tienes algún tipo de interruptor maestro donde la edición está habilitada o deshabilitada. Y podrías usar esa función editable en la definición de columna predeterminada para alternar si la edición de celdas está habilitada o no en la cuadrícula. Finalmente, también puedes controlarlo a través de la API de la cuadrícula. De manera programática, puedes establecer si una celda es editable o no usando esa API de la cuadrícula.

Así que habilitamos la edición de celdas usando la definición de columna. Bastante simple aquí. Vamos a tener en nuestra columna de nombre de cliente, tenemos nuestro encabezado y nuestro campo, y vamos a establecer editable en falso. Perdón, verdadero. Lo que permitirá al usuario cambiar el valor. También podemos habilitarlo a través de la API de la cuadrícula. Una vez que tengo acceso a la API de la cuadrícula, que puedes obtener cuando la cuadrícula está lista a través del componente aggrid-react que se invocará y te proporcionará una referencia a la API de la cuadrícula. O en algunas de estas otras instancias donde hemos visto que se nos proporciona como objeto de parámetros, se nos proporciona una instancia, una referencia a esa API de la cuadrícula. Podemos llamar al método start editing cell. Y le proporcionamos el índice de fila y la clave de columna. Notarás que anteriormente en esta columna especifiqué el ID de la columna. Entonces, el ID de la columna es generado por aggrid de forma predeterminada, si no lo proporcionas. De lo contrario, puedes proporcionar explícitamente el ID de la columna. Y luego puedo usar eso cuando quiero hacer referencia a esa columna específica de forma programática cuando estoy editando una celda, o quiero comenzar o detener la edición. Esto iniciará la edición de esa celda. Y luego en la API de la cuadrícula, también hay un método stop editing, que volverá al modo de vista de esa celda. Echemos un vistazo a algunos de los editores de celdas proporcionados. Entonces aggrid proporciona los siguientes, muy similares a cuando vimos los filtros. Tienes un editor de texto, un editor de texto largo, un editor de fecha, un editor de selección. Y también hay un editor de selección rica que requiere una licencia enterprise. El editor de texto es el predeterminado. Entonces, cuando usamos la propiedad cell editor en la definición de columna para especificar un editor de celdas proporcionado o personalizado, podemos usar el editor de celdas de texto. También podemos especificar el editor de celdas de texto largo. Estos son muy similares a lo que hicimos con los filtros, donde teníamos como filtro de columna agnumber o filtro de columna agtext. Lo mismo es cierto aquí para la propiedad cell editor en la definición de columna. Puedo establecer esta propiedad de editor de celdas. Y aquí estoy diciendo que quiero permitir la edición de esta celda. Bueno, he permitido la edición a través de editable, y lo he establecido en el valor booleano verdadero. Y luego para el editor de celdas, he dicho que quiero usar este editor de celdas. Si no proporciono una propiedad de editor de celdas, de forma predeterminada usará el editor de celdas de texto. Aquí estoy usando el editor de celdas de texto largo, que mostrará el valor, que se mostrará en una pequeña ventana emergente, encima de la celda misma o debajo de ella. Así que en lugar de la edición en línea, por así decirlo, hace una ventana emergente grande separada. Nuevamente, puedes tener control sobre el tamaño y la visualización de esto con CSS y este tipo de cosas. Pero luego eso permite al usuario ingresar más contenido, si es necesario. También podemos especificar el editor de celdas de selección incorporado. Y como dije, también está el editor de celdas de selección rica que requiere una licencia enterprise. Genial. Vamos a hacer otro challenge. Abrámoslo en StackBlitz. Queremos habilitar la edición de celdas para la columna de nombre de cliente. Y vamos a usar el editor de celdas de texto largo para la columna de número de cuenta.

Buena pregunta. Tenemos una pregunta en el chat. ¿La edición de celdas también cambia la fecha en el array de productos? Sí, de forma predeterminada, el editor de celdas va a mutar el valor. Sí, y vamos a hablar de la persistencia al final. Y voy a mencionar algunas opciones que tienes en términos de persistir los valores. Y hablaremos de cómo puedes establecer la cuadrícula en un modo, si no es de solo lectura, como un modo específico, lo señalaré, donde puedes evitar la mutación de esos data. Pero también hay una función de devolución de llamada. Entonces, cuando el data cambia, se te notifica al respecto. Y luego puedes persistir eso, ya sabes, en tu backend o lo que sea necesario. Y sí. Entonces, cuando simplemente haces la edición de celdas, va a cambiar el data en el array de productos, va a mutar ese data. Puedes usar redux, si eso es lo tuyo. Hay un par de soluciones diferentes en torno a esto. Entonces, AG Grid te deja elegir cómo quieres manejar la persistencia de ese data y si quieres que se mute o no. Y una vez que hayas terminado con el ejercicio, estés listo para continuar. Solo dame un pulgar hacia arriba en el chat y comenzaremos el ejercicio juntos. OK, tenemos otra pregunta. Veamos. ¿Hay alguna verificación de validación incorporada después de editar una celda? No creo que haya ninguna validación incorporada. Tipo, OK, para eso usamos un code diferente. Solo muestra la edición en una celda. Sí, sí. Para el tipo de cosas de persistencia, eso es un code diferente. Llegaremos a eso al final de esto.

Y no tenemos ejemplos concretos para mostrarte en esta masterclass en particular para la persistencia de esos valores. Pero puedes imaginar cómo los usarías. Podrías decir, OK, tenemos una celda aquí que se está persistiendo y vamos a... Pero puedes imaginar cómo usarías esas funciones de devolución de llamada para... conectar eso de forma persistente, ya sabes, con tu backend o lo que sea necesario. Sí, los números se tratarán como cadenas por el editor. Sí, estamos usando el editor de celdas de texto. Así es. Si retrocedemos un poco en nuestras diapositivas aquí. Sí, no hay un editor de números. Hay un editor de fechas y un editor de selección, pero no hay un editor de números. Entonces, cuando obtienes ese cambio de valor, es cuando podrías formatearlo o analizarlo como un número, cosas así. Sí, eso es exactamente correcto. Básicamente, insertará ese valor nuevamente como en el... mutará el valor, lo insertará y lo establecerá, y llamará a esa misma canalización después de que los valores hayan cambiado. Correcto. Llamará al formateador y luego al renderizador de celdas. Muy bien, echemos un vistazo a nuestro ejemplo. Vamos a habilitar la edición de celdas en la columna del nombre del cliente. Así que vamos a bajar aquí, nombre del cliente, tengo filtro verdadero. Voy a hacer editable, establecer eso en verdadero. Correcto. Y ahora para el nombre del cliente, si hago doble clic en él, puedes ver aquí que tengo un cambio aquí. Voy a poner mi nombre allí y ha cambiado el valor. Y ahora eso es lo que se muestra. Así que es como un doble clic. Creo que también puedes ingresar. Así que si resalto, ya sabes, también puedo moverme con las flechas y creo que la tecla tabulador tal vez. Oops, también puedes moverte con la tecla tabulador, más o menos lo que esperarías en términos de la capacidad de enfoque. Y luego, si voy a cliente, si presiono enter, eso habilitará la edición, presiono escape, eso deshabilitará la edición. Vas a venir aquí y cambiar esos valores. Lo siguiente que queríamos hacer también era habilitar la edición para el número de cuenta, y vamos a usar un editor de texto largo. Así que vamos a entrar aquí, establecer esto en verdadero, y luego ahora vamos a hacer editor de celdas AG, texto largo. Uh, olvidé el nombre de eso, texto largo, así que editor. Eso es lo que son los números de cuenta ahora. Y si hago doble clic, obtengo esto. Uh, no está muy bien formateado. Uh, no es un buen ejemplo porque tengo el editor aquí. Me gusta, ni siquiera puedo desplazarme por esto. Es difícil mostrar esto aquí. Como esto. En comparación con esto, ya sabes, no sé si tal vez hice algo en el estilo. Um, uh, porque normalmente esto lo hago bien. ¿Usaste el editor de celdas de texto largo? Eso se ve bien para mí. Por lo general, tal vez sea este tema que cambié, acabo de, el tema de la corteza es, es bastante nuevo y me gusta. Um, oops, no quería hacer eso. Veamos. Sí. El editor de celdas de texto largo, tal vez sea porque esto es una cadena. No se está desbordando correctamente. Um, tal vez haya una mejor demostración en el sitio web de AG Grid de esto, pero esto es normalmente, ya sabes, normalmente aparece como una ventana emergente más grande aquí. Sí, de todos modos. Uh, supongo que lo bueno es que podemos, la lección que aprendemos aquí es que tenemos algunas opciones en torno al editor de celdas de texto proporcionado y tenemos el en línea versus el grande, y sí, aparece correctamente para ti. ¿No es eso extraño? No se ve bien para mí. No sé qué está pasando, pero bueno. Me alegra que haya funcionado para ti, Patrick. Sí. Veo la celda bien. Tal vez refrescar. Sí. Extraño. Huh? Sí. Okay. Extraño. Okay. Así que tenemos un par de editores de celdas. Aquí está nuestra solución aquí. Oh, sabes qué? Olvidé. Eso es. Eso es lo que olvidé. Disculpas. Así que ahora ahí eso es mucho mejor. Así que ahora estoy diciendo, Oye, quiero que uses el editor de celdas de texto largo y quiero que lo pongas en una ventana emergente. Y ahora esto es obviamente puedes imaginar, digamos que tenías mucho, ya sabes, esto es solo un número de cuenta, pero si tenías muchos datos que estabas poniendo aquí ahora, obtengo como un área de texto completo, uh, y puedes editarlo, uh, de esa manera. Definitivamente. Definitivamente una experiencia de usuario mucho más agradable que lo que estaba experimentando anteriormente. Genial. Okay. Echemos un vistazo al componente de editor de celdas personalizado. Los editores de celdas proporcionados son definitivamente adecuados. Funcionan bastante bien, pero también podemos construir un editor de celdas personalizado para satisfacer los requisitos del usuario de nuestra aplicación. Y podemos aprovechar un framework como React, Angular o Vue. Nuevamente, AG Grid funciona con todos ellos de forma nativa y sólida, creo ahora. Um, y así podemos construir un componente de editor de celdas personalizado.

Lo que queremos hacer es construir un componente de editor de celdas personalizado de color. Vamos a utilizar React, por supuesto, y vamos a utilizar la entrada de color incorporada del navegador. Antes de crear el componente, vamos a ver la API imperativa. Suena bien. Hasta luego. Gracias por asistir.

Vamos a utilizar la interfaz de la API imperativa que establece el contrato entre nuestro componente personalizado y AG Grid. Voy a declarar una interfaz llamada 'eye cell editor' y voy a tener una función llamada 'get value' que va a devolver cualquier valor. El método 'get value' se invocará después de que se complete la edición para proporcionar el valor a la cuadrícula. Esto tendrá sentido a medida que profundicemos un poco más. Así que vamos a ver cómo crear esto.

Para establecer la comunicación con AG Grid, vamos a construir un controlador imperativo a partir de la referencia que se reenvía desde AG Grid. Vamos a utilizar una función de reenvío de referencia. Esta función de reenvío de referencia utilizará el gancho 'use imperative handle', que devuelve un objeto que cumple con la interfaz 'eye cell editor'. Puedes ver que lo he proporcionado como un genérico de TypeScript aquí. También estoy utilizando el estado para el valor. Estoy obteniendo el valor de las props que se pasan a esta función de editor de color, a este componente. Y luego voy a devolver mi JSX.

Aquí tengo un input. Estoy utilizando la entrada de color incorporada del navegador. El valor proviene de mi estado. Y luego, cuando cambie, llamaré a 'set value' y obtendré el valor del selector de color. Pero tengo este controlador imperativo que AG Grid utilizará para obtener el valor de este componente. Vamos a crear un editor de celdas personalizado utilizando el selector de color del navegador. Vamos a llevar esto un poco más lejos. Aquí tengo el mismo reenvío de referencia. Tengo mi valor. Y ahora tengo una referencia de input que estoy utilizando con el gancho 'use ref'. Y ese genérico de TypeScript va a ser el elemento de input de HTML. Y tengo mi referencia establecida aquí. Tengo mi gancho 'use imperative handle' que va a devolver un objeto con la propiedad 'get value', que es una función que devuelve el valor de mi estado. Y eso se utilizará como un contrato entre este editor de selector de color y AG Grid. También tengo un gancho 'use effect' inicial que no tiene dependencias. Básicamente, si tengo una referencia de input, voy a enfocarla. Esto hará que cuando el usuario comience a editar la celda, se enfoque inicialmente en el input, lo que hará que el navegador muestre el selector de color. Echemos un vistazo a este ejemplo en StackBlitz. Aquí está mi editor de color. Aquí está el mismo código que acabamos de ver antes. Y si bajo y veo mi cuadrícula, ahora para mi color, puedes ver que en lugar de utilizar uno de los editores de celdas proporcionados, estoy dando referencia a mi componente que utiliza el reenvío de referencia. Aquí está mi editor de color. Y eso es lo que se utilizará como editor cuando el usuario comience a editar esa celda en particular. Y voy a utilizar ese 'get value'. Esto debe utilizarse como parte del contrato con AG Grid. Cuando se detiene la edición de la celda, invocará ese 'get value' para obtener el valor y establecerlo como el valor de la celda en la cuadrícula. Echemos un vistazo a la demostración de esto, pero ve a color. También estoy utilizando un renderizador de celdas personalizado, y aquí tengo un renderizador de color. Y si hago doble clic en esto, puedo ver que puedo entrar aquí y seleccionar un color diferente. Y ahora lo he cambiado. Lo siento, presioné escape. La edición de colores en el navegador nunca es perfecta. Así que ahora, cuando presiono enter en lugar de escape, puedo ver que he cambiado el valor al código hexadecimal de ese color en particular. Y puedo hacer lo mismo aquí y tal vez cambiar esto a un bonito rosa intenso. Y ahora he cambiado el valor utilizando un editor de celdas personalizado. También tengo aquí un renderizador de celdas personalizado. Si quieres echar un vistazo a eso, podemos ver nuestro renderizador de color. Y puedo ver que aquí tengo un renderizador de celdas personalizado. Y si hago clic en esto, eso es lo que voy a utilizar. Aquí está nuestro renderizador de color, donde devuelve este JSX de este elemento div. Y especifica el color de fondo y una altura y anchura codificadas para mostrar el color en la cuadrícula. Tal vez este sea el color. Esto sería más apropiado para el producto en lugar del nombre del cliente. Pero es un ejemplo de cómo se ve con un renderizador de celdas personalizado, así como un editor de celdas personalizado. Este editor de celdas utiliza esa interfaz imperativa para devolver el valor a AG Grid. Eso es bastante importante. No olvides esa parte cuando empieces a construir estos editores de celdas. Sí, tengo algunas cosas adicionales que puedes leer aquí en el contenido del curso sobre lo que estamos haciendo. También hay un par de formas diferentes de registrar esto, ya sea como un renderizador de celdas o un editor de celdas. En nuestro ejemplo, puedes ver que estoy especificando una referencia al propio componente, ¿verdad?, a esa función. Y eso está bien en este ejemplo. Pero es posible que te preguntes, ¿qué pasa si quiero tomar esta definición de columna y quiero que el usuario pueda cambiar cosas? Como tal vez el usuario pueda controlar cómo se muestra esa columna. Tal vez el orden de la columna o si está fija o si la columna no está fija. O si la columna se puede editar o no, algo así. Y tal vez quiero persistirlo en algunas aplicaciones. Es el caso en el que el requisito es persistir este estado de definición de columna en una base de datos o en el backend. Y quieres que esto sea serializable. Y no podemos serializar estos. Así que lo que podemos hacer es, en lugar de hacer referencia o registrarlos simplemente con una referencia a una función, podemos utilizar una definición de cadena y luego registrar esas cadenas en estos renderizadores o editores, lo que nos permitirá serializar la definición de columna y luego persistirla en nuestra base de datos o tal vez en el almacenamiento local o algo así. En ese caso, puedes ver que el componente del editor de datos. Creo que ese es el fragmento de código incorrecto. Vamos a ver, oops. He presionado el botón de retroceso. Maldición. Este es el fragmento de código incorrecto aquí, creo. Lo siento. Podemos consultar la documentación para esto. Podemos registrar un componente asociado a una constante de cadena.

Y luego, cuando decimos como renderizador de celda, en lugar de usar g como prefijo, podríamos usar lo que quieras para tu prefijo. Podrías decir algo como mi renderizador de color. Y así cuando entremos a ver si podemos mostrar esto rápidamente. De acuerdo. Aquí debajo de la documentación podemos ver que podemos usar una referencia directa. Tal como lo hicimos aquí en el renderizador de celdas. Hicimos referencia a este componente cubo. Pero también podemos hacerlo con una cadena y puedes ver aquí que estoy diciendo en el renderizador de celdas que use el componente cubo como una cadena. Y luego observa en estos componentes, que lo enlazo a la propiedad components. He establecido el componente cubo para que sea igual a este componente cubo que he importado aquí arriba. Y la parte buena de eso es que ahora puedo serializar las definiciones de columna porque tengo solo un valor de cadena aquí. Así que esa es la idea principal que quería que te llevaras. De acuerdo. Echemos un vistazo a lo que vamos a hacer en un ejercicio. Así que una vez que abras este ejercicio y este es un ejercicio sobre la creación de un componente de editor de celdas personalizado. Así que este es bastante divertido. Vas a abrir el ejercicio en StackBlitz. Implementa el gancho useState para capturar el valor inicial de las props. Vas a implementar el método getValue en el manejo imperativo para devolver el valor capturado por el gancho useState y actualizar la definición de columna para el campo de color para que sea editable utilizando el editor de color como editor de columna. Así que si abrimos esto en StackBlitz. Ven aquí. Ya he configurado la mayor parte de esto para ti. Así que no te preocupes. No tienes que configurarlo todo. Ya he creado el reenvío de referencia y tengo mi editor de color. Se llamará con props. Entonces lo que necesito que hagas es que uses el valor de las props para establecer el valor inicial. Y luego vamos a implementar el getValue aquí. Y eso espero que ayude a reforzar un poco el aprendizaje. No quiero que escribas mucho código, solo configura la sintaxis para el reenvío de referencia. Eso te dará un buen ejemplo de cómo usar esto para construir un editor de celdas personalizado. Voy a retroceder un poco.

De acuerdo, así que establecemos en el, ¿qué hicimos? En useState, estamos obteniendo el valor de las props. También voy a implementar el método getValue para devolver el valor al input. Así que aquí, simplemente voy a decir getValue. Y voy a devolver el valor de mi estado. Tengo todo esto configurado más abajo. Voy a ir al archivo de la cuadrícula, grid.tsx. Voy a establecer editable en true. Voy a establecer el editor de celdas como el editor de color. Y déjame asegurarme de recargar eso. Ahora, si hago doble clic en esa columna, obtengo mi editor de celdas. Y ahora puedo hacer clic y cambiar el valor de esto. Y podemos cambiar nuestro editor de celdas aquí, cambiarlo a un bonito naranja brillante o lo que sea. Así que sí, hay un par de cosas en esto. Necesitamos asegurarnos de establecer el valor inicial del estado desde nuestras props. Necesitamos implementar el gancho useImperativeHandle y implementar la interfaz iCellEditor aquí que devuelve un objeto con la propiedad getValue que es una función que será invocada por AGGrid cuando se detenga la edición de la celda y proporcionará el valor de vuelta a la cuadrícula. Y en la cuadrícula misma, para la definición de columna en la columna de color, voy a establecer editable en true, para que el usuario pueda editar el valor. Y voy a usar un editor de celdas personalizado en lugar del editor de texto proporcionado. Y luego en esta instancia, voy a establecer una referencia a mi función o componente de editor de color. Genial. Así es como construimos un editor de celdas personalizado. Nuevamente, lo bueno de AGGrid es su capacidad de extensión. Por lo que puedes construir estos editores de celdas y estos renderizadores de celdas. Todos son solo componentes. Este editor de celdas se puede usar en cualquier otro lugar donde necesites un editor de color en esta cuadrícula o en cualquier otra cuadrícula en la que lo necesites. También es fácil de probar.

Ahora que hemos permitido al usuario realizar cambios en los valores de nuestra cuadrícula, tenemos un par de opciones para persistir esos datos. Por defecto, el campo al que está vinculada la fila de datos se actualizará o mutará. Hablamos un poco de esto antes porque teníamos una pregunta al respecto. También tenemos un par de opciones después de que se cambia la fila de datos. También hay una función establecedora de valor que es invocada opcionalmente por AGGrid para establecer o persistir el valor en la fila de datos. También hay una API de cuadrícula en el evento cellValueChanged al que podemos conectar y escuchar eventos de cambio de valor. También hay un evento de solicitud de edición de celda que nos permite intervenir en el flujo de edición de AGGrid donde podemos tener control sobre esa edición y persistir los datos. Echemos un vistazo a la función establecedora de valor. En esta instancia, los datos todavía son gestionados por la cuadrícula, lo que significa que los valores en la fila de datos todavía están siendo mutados, ¿verdad? Esto es como el inverso de la función getter de valor. Será invocada por AGGrid con el objeto de parámetros de la función establecedora de valor. Y debemos decirle a AGGrid al final de esta función, debemos devolver true o false, y debemos decirle a AGGrid lo que queremos que haga. Si devolvemos true, indicamos a la cuadrícula que el valor se ha actualizado correctamente y queremos que actualice la celda. Y eso hará que AGGrid obtenga el valor, opcionalmente lo formatee y lo renderice. Si devolvemos false, por cualquier motivo, desde la función establecedora de valor, eso le dice a AGGrid que el valor no se ha actualizado. Y aquí es donde tenemos, tal vez, si queremos hacer algún tipo de análisis de los datos o algo antes de permitir que los datos se establezcan o muten en los datos que están siendo gestionados por la cuadrícula. Así que digamos que si queremos tener algún tipo de verificación o validación o algo así, si no cumple con ese criterio, podemos devolver false y luego no sucede nada. El valor no se actualiza o muta por la cuadrícula y la representación tampoco se activa. No invocará la función getter de valor, el formateador de valor o el renderizador de celdas. Echemos un vistazo a un ejemplo. Aquí, he establecido la propiedad editable en true y también he implementado un establecedor de valor. Y esta será una función que será invocada por AGGrid con el objeto de parámetros del establecedor de valor. Hay dos propiedades en este objeto que son importantes. Eso es el valor antiguo y el valor nuevo. Y si el valor antiguo es igual al valor nuevo, puede ser que simplemente no quiera hacer nada. No quiero pasar por el proceso de renderizado de celdas, cambiar el valor y volver a hacerlo. No tiene sentido porque son iguales. El usuario comenzó a editar y luego canceló o algo así. Y así los valores son iguales. Así que simplemente voy a devolver false desde mi establecedor de valor. Si el valor ha cambiado en mis props a mi función de cuadrícula, tal vez quiera llamar a alguna función de devolución de llamada y hacer que un componente padre lo sepa. Así que podría llamar a una función de devolución de llamada, llamada onNameChange, que se invoca con los datos.

Y luego voy a devolver true. Así que en esta instancia, voy a dejar que algún componente padre. Básicamente voy a decir, hey, el nombre ha cambiado. Invoca la función de devolución de llamada que se proporcionó como una prop a esta función de cuadrícula. Le voy a dar los datos. Y voy a devolver true porque todavía voy a permitir que AGGrid mute los datos y luego vuelva a representar los datos dentro de la cuadrícula. Pero esto me da la oportunidad de hacerle saber a ese componente padre que el nombre del cliente ha cambiado y que haga algo. Tal vez enviar una solicitud a mi API o mi backend o lo que sea. Persistir ese valor.

La siguiente opción que tenemos para persistir el valor se llama on cell value changed. Así que nuevamente, en esta instancia, los datos están siendo gestionados por la cuadrícula. Y el evento on cell value change se emite cada vez que se actualiza el valor de una celda después de que el usuario haya completado la edición de ese valor. Una nota importante aquí es que on cell value changed solo se actualiza o se invoca cuando el usuario ha actualizado a través de una edición del usuario a través de la interfaz de usuario, no si han pegado datos desde el portapapeles. Y así está el portapapeles. Puedes usarlo como copiar y pegar con AgGrid. Y puedes permitir que el usuario cambie valores en la cuadrícula utilizando el portapapeles, pero eso no activará el evento on cell value changed. Así que tenlo en cuenta. Vamos a usar la propiedad on cell value change enlazada al componente AgGrid de React. Y eso emitirá el objeto de evento de cambio de valor de celda con los valores genéricos T datos y T valor. Y eso contendrá el valor antiguo y el valor nuevo. Echemos un vistazo rápido a un ejemplo de eso. Aquí tengo la propiedad on cell value changed enlazada a esa prop. Y le voy a dar esa función de devolución de llamada, ese controlador que se llamará con un evento de cambio de valor de celda. Y en esta instancia, solo estoy registrando algunos valores. Ahí está el valor antiguo y ahí está el valor nuevo. Finalmente, también tenemos el evento on cell edit request. Este evento se envía cuando el valor de la celda ha cambiado después de la edición. Para usar esto, los datos no están siendo gestionados por la cuadrícula. Aquí es donde podrías pensar en usar algo como Redux, donde tienes datos inmutables. La cuadrícula debe usar el modo de solo lectura. Y te mostraré cómo hacerlo. Necesitamos poner la cuadrícula en modo de solo lectura. Y usaremos el evento on cell release. Y eso será un evento de solicitud. Y usaremos la propiedad on cell edit request enlazada al componente AgGrid de React. Y eso emitirá el objeto de evento de solicitud de edición de celda. Y así es como se ve eso. Aquí voy a establecer read only edit en true. De esa manera he entrado en este estado de datos inmutables diciéndole a AgGrid, no quiero que gestiones los datos aquí. Yo me encargo. Déjame hacerlo. Y luego voy a proporcionar el evento on cell edit request o prop que se llamará con el evento de solicitud de edición de celda. Y nuevamente, solo voy a registrar los valores aquí dentro.

Entonces, es posible que te preguntes, pero espera un segundo. ¿Cómo se actualiza el valor de la celda en ese último ejemplo? Pero como solo estamos registrando los data, el valor de la celda nunca se actualiza. Así que necesitamos usar una estrategia para actualizar ese valor de celda. Nuevamente, si volvemos aquí, en on cell edit request, porque estamos en modo de edición de solo lectura, tengo que implementar cómo cambian realmente los valores, porque aggrid ya no los va a mutar por mí. Así que necesito implementarlo. Y hay un par de formas diferentes de hacerlo. Podemos usar el on cell edit request junto con lo que se llama la función get row ID, que utiliza data inmutable. Nuevamente, puedes usar algo como Redux. Puedes usar la API de la cuadrícula para establecer realmente los datos de la fila. O también puedes usar lo que se llama transacciones, donde estás mutando fragmentos de data a través de la API de la cuadrícula en esos datos de la cuadrícula. Entonces, la parte importante aquí es que cuando usas este on cell edit request, aggrid ya no está gestionando los data. Tú lo estás haciendo, lo que significa que tienes que conectar algunas cosas. Y así puedes usar la función get row ID con data inmutable. Puedes usar el método set row data. O puedes aplicar una transacción. Y en este masterclass, no profundizo en eso. Definitivamente puedes consultar la docs sobre el método set row data y cómo implementar get row ID con data inmutable y cómo puedes desencadenar, creo, lo que ellos llaman detección de cambios dentro de aggrid, que en realidad activará los data cuando esa referencia de objeto inmutable, cuando se cambie, activará un cambio en la cuadrícula, lo que provocará la representación de toda la fila.

De acuerdo. Genial. Casi hemos terminado. Solo nos quedan un par de minutos. Quiero ser consciente de nuestro tiempo aquí. Creo que puede haber un par de ejercicios en esto o tal vez no. Así que voy a repasar algunas de las diferentes opciones para el formateo y el estilizado, o perdón, para el formateo y el estilizado. Entonces, cuando se trata de formatear o estilizar aggrid, tienes un par de opciones diferentes. Aggrid viene con varios temas predefinidos que puedes usar, y vamos a echar un vistazo a esos. Y esos temas son personalizables mediante variables CSS, y también hay un envoltorio CSS o SAS para eso si quieres usarlo. También puedes anular los estilos CSS globales. aggrid te expone esos y te permite y te anima a cambiar esos estilos CSS, como ag-row, ag-row, ag-row-even, ag-row-odd, ese tipo de cosas, si quieres hacer alguna alternancia de filas. También puedes hacer estilizado personalizado de celdas específicas, así como estilizado de filas. Quiero señalar aquí rápidamente, cuando estás anulando los estilos CSS globales, ten en cuenta de no cambiar lo siguiente: posición, desbordamiento o eventos de puntero, porque aggrid utiliza esos estilos CSS específicamente para manejar el desplazamiento, la posición y la interacción del usuario en la cuadrícula. Y si empiezas a modificar esos estilos CSS, te encontrarás con algunos problemas, así que tenlo en cuenta. Echemos un vistazo al estilizado de celdas. El estilizado de celdas nos permite especificar estilos de celda en la definición de columna. Podemos agregar clases utilizando la propiedad de clase de celda, y luego podemos agregar y eliminar clases utilizando la propiedad de reglas de clase de celda. Entonces aquí, podemos especificar el estilo de celda para el nombre del cliente en la columna, para el nombre del cliente, y vamos a establecer el color y el color de fondo. Perdón. También podemos agregar una clase a estas celdas en particular. Entonces, en ese elemento div para cada celda en esa columna, ya sabes, cada fila en esa columna de arriba abajo, vamos a agregar una clase llamada customer-name, y luego podemos tener CSS asociado con esa clase para estilizarlas como queramos. También podemos proporcionar una función que se invoca con el objeto de parámetros de clase de celda. Nuevamente, la propiedad de clase de celda solo agrega clases y nunca las elimina. Así que tenlo en cuenta. Entonces aquí, puedo decir, bueno, para el valor, si no tengo ningún valor, quiero una clase de error. De lo contrario, quiero la clase customer-name en esta celda. Tal vez quiero estilizar esto de manera diferente para llamar la atención del usuario. La propiedad de reglas de clase de celda es un mapeo de objetos de clases a funciones de predicado que se invocan con el objeto de parámetros de clase de celda. Estas clases de celda se agregarán o eliminarán cada vez que cambie el valor. Entonces, cada vez que cambie el valor, similar a un formateador de valor, cada vez que cambie el valor, invocará estas funciones de predicado. Si devuelven true, esta clase se aplica a ese elemento div, a esa celda. Si la función de predicado devuelve false, esta clase se elimina de ese elemento. Entonces, si necesitas alternar esas clases en función del valor, debes usar reglas de clase de celda, no solo la clase de celda. Si solo usas la clase de celda, solo se agregará esa clase. Nunca se eliminará. Así que es algo importante que debes saber.

Sí. Sergio señala, sí, esto es genial para el tamaño de columna, especialmente el ancho dinámico, dependiendo de los data que se están extrayendo. Sí, absolutamente. Entonces eso es el estilizado de celdas. Para el estilizado de filas, es muy similar. Tenemos un estilo de fila, es como code, es casi como un estilo en línea, ¿verdad? Aplicamos code duro en ese elemento div que contiene todas las columnas, o todas las celdas en esa fila. Vamos a aplicar un estilo a través del estilo de fila. Podemos usar get row style como una clase. Entonces podemos decir, okay, voy a obtener el estilo de fila. Usar get row style como una devolución de llamada para agregar estilos condicionalmente. Podemos usar row class para establecer las clases para todas las filas. Podemos usar get row class como una devolución de llamada para agregar clases condicionalmente. Y nuevamente, si necesitamos agregar y eliminar, podemos usar row class rules. Así que echemos un vistazo a eso. Aquí, voy a configurar una función de devolución de llamada para get row class. Estoy estableciendo una clase de fila en una constante. Tengo algunas reglas de clase de fila, o puedo simplemente incluir un objeto y establecer el estilo de fila. Así es como podrían verse esas reglas de clase de fila. Nuevamente, esto es solo un objeto donde la propiedad es la clase que se aplica condicionalmente en función de la función de predicado que se invocará. Creo que es otra interfaz, tal vez como reglas de clase de celda, parámetros, o algo así. Estoy extrayendo el data del objeto. Y estoy comprobando si el total es mayor que 100. Quiero resaltarlo, o tal vez en este caso, si la fecha es anterior o es un pedido antiguo, resaltarlo quizás con una clase de peligro. Y esas se alternarán porque estoy usando reglas de clase de celda. Si solo uso una función de devolución de llamada llamada get row class, esto solo agregará la clase de resaltado de fila o en este caso, nada. Solo estoy devolviendo una cadena vacía. Puedo usar eso para aplicar clases condicionalmente al elemento de la fila, pero nunca eliminarlas. Este resaltado de fila podría nunca ser eliminado. Ahí es donde, si necesitas agregar y eliminar clases en la fila, vas a usar esas reglas de clase de fila.

Muy bien. Última sección, ¿qué tal la selección de filas? ¿Hay algún cambio en eso? Sí, con la selección de filas, también hay una clase que puedes usar, a nivel global, puedes estilizarla. Creo que se llama agrow selected. Si entras y ves la demo, Sergio, en la docs, puedes ver la selección de filas. Así que definitivamente puedes cambiar cuando una fila está seleccionada con un nombre de clase. La fila se selecciona ya sea programáticamente o con un checkbox, algo así. Sabes, el usuario selecciona una fila, como en tu bandeja de entrada de Gmail, seleccionas una fila, puedes resaltarla, cambiar el color de fondo, el borde, todas esas cosas. Tienes control sobre ese elemento div. Y dentro están los divs para cada celda. Entonces ag-grid agregará una clase a eso y puedes apuntar a esa clase si quieres. Así que lo hace súper fácil. También tienen clases para filas impares y pares. Entonces, si quieres rayar tus filas o algo así, puedes apuntar a las filas impares y pares. De hecho, si entras rápidamente, lo veremos antes de llegar a nuestros temas. Aquí está mi fila. Puedes verlo. Déjame aumentar esto un poco para ti. Es un poco difícil de leer aquí. Pero puedes ver esto como agrow, puedo apuntar a esa clase. Es par, así que agrow even. Tiene algo de nivel en él. Sí, así que hay un par de clases diferentes que puedo alternar allí y la selección es una de ellas.

De acuerdo, nos hemos pasado un par de minutos. Voy a resumir esto rápidamente para que podamos cubrir todo el contenido. Espero que no nos hayamos pasado demasiado. Lo último de lo que queremos hablar son los temas que vienen con AG Grid. De serie, AG Grid ofrece varios temas. Tienes el tema original ballham. Es muy denso y ha estado disponible durante mucho tiempo. Es muy bueno si estás trabajando con muchos datos porque es bastante denso. No hay mucho espacio en blanco ni relleno. También está el diseño material de Google. Puedes utilizar ese tema si ya lo estás utilizando y estás familiarizado con él. Es definitivamente menos denso, tiene mucho espacio en blanco y es muy espacioso. Es fácil de usar, pero no podrás mostrar muchos datos en pantalla si estás trabajando en una aplicación bancaria o algo similar donde estés mostrando un libro mayor o algo así. Tendrá mucho espacio. El tema quartz es el más nuevo. Es moderno, de alto contraste y espacioso. Es un tema agradable que han creado. Me gusta. También tienen un tema alpine que lanzaron hace unos años. Recomiendan utilizar el tema quartz en la actualidad, pero el tema alpine todavía está disponible si quieres utilizarlo. Es muy similar, moderno y tiene un buen relleno. Pero hoy en día no debes optar por el tema alpine, sino por el tema quartz si buscas ese aspecto. Todos esos temas vienen con opciones de modo oscuro. También puedes personalizar completamente estos temas. Tienen documentación completa sobre variables CSS. Puedes aplicar reglas CSS y tienen un envoltorio SCSS o SAS que puedes utilizar. Las variables CSS se introdujeron en la versión 28, así que tenlo en cuenta si tienes una instalación anterior. Antes de eso, puedes consultar la documentación de versiones anteriores y aún puedes personalizar las cosas, solo que es un poco diferente porque no se utilizaban variables CSS. Tenías que utilizar más mixins y variables SCSS. Aquí puedo seleccionar el tema AGI quartz y anular el color de fondo, el color del primer plano y tal vez el color del borde. Hay una lista completa de todas las opciones de variables CSS, una documentación de referencia disponible en el sitio web de AG Grid. Así que échale un vistazo cuando estés utilizando estos temas y quieras comenzar a aplicarles estilos. También puedes utilizar reglas CSS básicas. Esto te permite utilizar las variables CSS existentes y anular cosas a medida que te adentras más en la cuadrícula. Siempre debes agregar el prefijo del tema. Aquí estoy diciendo que para el tema AG quartz, quiero anular los elementos de celda del encabezado y estilizar el color de fondo y el borde adecuadamente. Aquí puedo hacer referencia a la variable CSS de color de fondo de AG. Aquí tienes un ejemplo de las filas pares. Tal vez quiera cambiar el estilo de las filas pares. Por último, también tenemos un envoltorio SCSS para aquellos que prefieren este enfoque. Debes incluir el envoltorio SCSS y configurar el tema, y luego puedes comenzar a anular cosas. Nuevamente, este es un ejemplo muy pequeño. Definitivamente consulta la documentación si quieres utilizar SCSS. El enfoque recomendado es utilizar variables y reglas CSS para el estilo de la cuadrícula. Y con eso, hemos llegado al final del contenido. Nos hemos pasado un par de minutos. Así que gracias a todos por estar aquí. Si tienen alguna pregunta, estaré aquí un par de minutos más. Estoy encantado de responder cualquier pregunta. Si quieres ponerte en contacto conmigo, puedes visitar liveloveapp.com. Y si necesitas ayuda con AG Grid, no dudes en contactarnos. Estaremos encantados de ayudarte. Realizamos muchas consultorías y implementaciones complejas utilizando AG Grid. También puedes seguirme en Twitter. Dejaré el enlace directamente en el chat. Así que gracias a todos por venir. Si tienen alguna pregunta, estaré aquí un rato más.

SERGIO GUADANCHESEA Hola, gracias, Ryan. Soy Sergio. Quería hacerte una pregunta sobre el renderizado de filas infinitas, ¿sabes? Sí, tuvimos que hacer algunas cosas especiales para lograrlo. ¿Hay algún cambio desde la versión 26? No he revisado las últimas versiones, pero ¿hay alguna forma más fácil de implementar el modelo de fila?

¿Cuál era la pregunta de nuevo? ¿Sobre el modelo de fila infinita? Quiero decir, intentar implementar uno es como el agrupamiento de filas limitado, y el otro es el modelo de fila infinita que estás mostrando aquí. ¿Hay alguna mejora en eso? ¿En el modelo de fila infinita? No sé si ha habido alguna mejora en la última versión importante en esto. Lo bueno es que el modelo de fila infinita está en la edición comunitaria. Tiene licencia MIT. Puedes usarlo. Básicamente, es el modelo de fila del lado del cliente, pero con fragmentación o bloqueo, ¿verdad? Donde se bloquea la carga de datos. Ten en cuenta que AG Grid ya virtualiza columnas y filas. Incluso si tienes 10,000 filas, no muestra las 10,000 filas en el DOM. Lo llaman virtualización. Creo que es una buena palabra para describirlo. Pero no tengo conocimiento de, en cuanto a tu pregunta específica, no tengo conocimiento de grandes cambios en el modelo de fila infinita en la última versión. Vale. Sí, el modelo de fila infinita es como una combinación del modelo de fila del lado del cliente y del modelo de fila del lado del servidor, y luego tienes que configurar esta fuente de datos. La fuente de datos es una clase u objeto que tiene estas funciones de devolución de llamada que se llaman en esta interfaz. Compromiso de hacer llamadas a la API al backend y el backend puede devolver una cierta cantidad de filas de la base de datos y todo eso, lo siento, todos los registros y cosas así. Es como un compromiso en eso. Sí, lo es. Y, ya sabes, a medida que voy desplazándome hacia abajo, puedes ver algunas filas en blanco a medida que me desplazo rápidamente. No sé si se ve en el zoom. Pero sí, lo bueno de esto es que aún puedes obtener cosas del backend, creo, porque aún tienes la capacidad de obtener cosas por bloque. Pero estoy tratando de recordar, he utilizado el modelo de fila infinita en el pasado. Sí. Y creo que sigue siendo asíncrono en el sentido de que tienes esta devolución de llamada de éxito o devolución de llamada de error. Si tuviera que ser crítico con la API, preferiría que fuera verdaderamente basada en promesas y verdaderamente asíncrona. Pero tienes la capacidad de utilizar el modelo de fila infinita para obtener datos de forma asíncrona para un bloque o fragmento determinado y luego llamar a esta devolución de llamada cuando sea exitoso. Sí, siempre con el objetivo del rendimiento, ya sabes, porque cuando tienes tantos, quiero decir, el tráfico es alto y el usuario espera que las cosas se rendericen en menos de un minuto, a veces. Sí. Sí, estoy revisando si hay alguna, pero es, ya sabes, muchas cosas personalizadas y desarrollo, y, ya sabes, con la versión comunitaria, no sé si la versión premium o la versión empresarial tiene alguna mejora en eso, tal vez. El modelo de fila del lado del servidor es algo completamente diferente. Es similar al modelo de fila infinita, pero muy diferente. Pero aún así, sigues haciendo muchas solicitudes asíncronas de datos. Y hay muchas estrategias, puedes comenzar a precargar datos, todo tipo de cosas para intentar que sea más eficiente en cuanto al rendimiento. Pero aún estás haciendo muchas cosas entre el backend y el frontend, es decir, estás volviendo y obteniendo datos. Y puedes controlar el tamaño del bloque, es decir, puedes establecer el tamaño del bloque. Exactamente, hay algunas propiedades que puedes configurar, por ejemplo, exactamente, hay cien filas o 150 filas por fragmentos o algo así, y depende de los requisitos del usuario. Sí, exactamente. Totalmente, sí, estoy de acuerdo. Sí. Muchas gracias, Bryan. Ha sido genial refrescarse. Sí. Genial, hombre, un placer conectarme contigo. Gracias. Sí. Tenemos otra pregunta aquí de Christopher, como experto en desarrollo de Google, ¿has utilizado AG Grid con fuentes de datos de Firebase? Sí, claro. Lo he utilizado, hay una empresa llamada SaberSim, es algo de Estados Unidos. No sé dónde te encuentras, Christopher, pero ellos hacen, es un optimizador de apuestas deportivas. Lo utilizan mucho AG Grid y utilizan fuentes de datos de Firebase sin duda. Y no creo que esté filtrando información sensible. He utilizado, hemos utilizado, lo hemos utilizado tanto con la base de datos en tiempo real como con Firestore. Sí, y sí, definitivamente puedes, en este caso, es un proyecto de Angular. Están utilizando Firebase con Angular. Utilizan mucho RxJS para la vinculación de datos y cosas así. Y así obtienes esos datos de Firebase que se transmiten de forma asíncrona a través de un socket web que llega. No sé si Firestore realmente utiliza un socket web o más bien una solicitud periódica, pero de todos modos, no importa. Hay un proyecto llamado AngularFire, que no he utilizado en un tiempo, pero proporciona una capa de compatibilidad con RxJS alrededor del SDK de JavaScript de Firebase que te permite utilizar más fácilmente RxJS para transmitir datos de forma asíncrona en tu aplicación. Y todo eso para decirte que definitivamente puedes transmitir datos a AG Grid desde Firebase, ya sea que estés utilizando JavaScript básico en el SDK de JavaScript de Firebase o algo más avanzado como RxJS. Por supuesto, hay otras bibliotecas, no tienes que usar RxJS, pero RxJS en Angular está bastante cerca del metal. Y así puedes hacerlo, simplemente funciona bien junto con Firebase. Firebase AngularFire, que nuevamente es solo un envoltorio de RxJS, por así decirlo, o proporciona cierta funcionalidad de RxJS alrededor de las API de JavaScript para Firebase que te permite transmitir datos a AG Grid de forma asíncrona. Sí, definitivamente. Y si tienes problemas con eso, Christopher, no estoy tratando de vender nada aquí. Pero si necesitas ayuda, hombre, contáctame. Estoy encantado de ayudarte con eso o algo así. Definitivamente he utilizado eso con fuentes de datos de Firebase. Funciona bastante bien, lo cual es genial. Funciona muy bien. Y como dije, no los estoy promocionando en absoluto, pero hay una empresa con la que he trabajado en el pasado llamada Saber Sam. Y hacen, es un optimizador para ligas deportivas diarias y cosas así para apuestas deportivas. Y han construido una herramienta y puedes verla aquí mismo. Esta es AG Grid aquí mismo en esta imagen. No se parece mucho. Pero esta es una cuadrícula que han construido y ofrece muchas funcionalidades porque estás trabajando con toneladas de datos si te gustan los deportes y todas estas cosas con proyecciones y todo eso. Y sí, puedes optimizar algunas de tus cosas en torno a eso. Y sí, gran parte de estos datos proviene de un backend, ciertamente, una infraestructura más persistente, una infraestructura más escalable para algunas de esas cosas. Pero luego, muchos de los usuarios, están utilizando la aplicación y cambiando y anulando datos. Utilizan Firebase para todo eso, y funciona muy rápido y muy bien. Puedes transmitir datos, lo cual es bastante genial. Un placer conocer a todos. Gracias por asistir. Y sí, puedes seguirme en Twitter si quieres o visitar el sitio web. Y sí, buena suerte con AG Grid y espero que todo vaya bien. Gracias a todos.