Construye un Datagrid Poderoso con AG Grid

Bienvenidos a todos. Gracias por inscribirse en la masterclass. Estoy emocionado de pasar esta mañana o esta tarde con ustedes, sea la hora que sea para ustedes. Nuevamente, estoy ubicado aquí en la Costa Oeste de los Estados Unidos. Mi nombre es Brian Love. Soy un Google Developer Expert en tecnologías web. Hago mucho frontend. Hago mucho backend. Uso React y Angular y Vue principalmente. Y un amigo mío, Mike Ryan, y yo tenemos una pequeña consultoría aquí que pueden ver llamada LiveLoveApp. Y así que 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 courses, eso los llevará directamente a nuestra página de inicio del curso. Y desde aquí, adelante, hagan clic en Comenzando con AG Grid y React. Y una vez que hagan eso, estarán directamente en el contenido de nuestro curso, y es ahí donde vamos a comenzar hoy.

Así que un poco sobre mí. Soy padre de una sola hija. Ella es una preciosa niña de dos años en este momento. Así que es muy divertida. 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 en este tipo de cosas, definitivamente me encontrarán en las montañas, haciendo ciclismo de montaña, esquiando, pescando, simplemente disfrutando del aire libre, mucho campamento, cosas así. Así que disfruto estar tanto frente a la computadora como afuera en la naturaleza. Y sí, estoy realmente emocionado de pasar un 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í ni nada. Así que adelante, escriban en el chat, sin embargo. Déjenme saber simplemente dónde 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. Adelante, compártanlo en el chat. Sería genial ver de dónde viene cada uno.

Este contenido de hoy, vamos a realmente solo, esto está pensado para que comiences con AG Grid. Así que vamos a hablar primero de cómo instalar AG Grid, súper simple. Y luego vamos a empezar a profundizar en lo que se llama definición de columnas, configurando las columnas en tu AG Grid. Y hablaremos sobre los datos de filas y el ordenamiento, sobre cómo configurar una definición de columna predeterminada y algo de filtrado.

Y luego vamos a entrar en algo de personalización alrededor del renderizado de celdas. Así que cosas que puedes hacer para realmente personalizar cómo se están renderizando los valores y si, como de dónde viene ese valor, cómo se formatea ese valor, o incluso crear un renderizador de celdas personalizado donde realmente quieras tener control sobre lo que se muestra en una celda particular en AG Grid. Y así que también entraremos en eso. Y luego nos moveremos hacia la edición de celdas. Así que eso te permite realmente que tus usuarios editen los datos que se están mostrando en la cuadrícula. Así que hablaremos sobre algunos de los editores de celdas integrados o proporcionados que vienen con AG Grid. Y luego entraremos en lo que se llama el componente editor de celdas. Así que cómo puedes realmente construir tu propio editor de celdas usando React. Luego hablaremos un poco sobre la persistencia de datos de edición de celdas. Y solo tocaremos un poco sobre la persistencia. Quiero advertirte un poco, porque la persistencia, obviamente, tendrás que, hay un par de formas diferentes de persistir datos. Y por supuesto, vas a enviar eso a, ya sabes, una API o tu backend o lo que sea que parezca para realmente persistir los cambios. Y así que no cubriremos todo el espectro de eso. Solo presentaremos un poco sobre cómo se ve eso y algunas de las opciones que tienes alrededor de persistir esos cambios en los datos que los usuarios hicieron.

Y finalmente, veremos el estilo de AG Grid y cómo puedes hacer el estilo de celdas y el estilo de filas, y luego cómo puedes usar sus temas integrados, así como cómo puedes personalizar esos temas. Así que ese es un poco el plan para hoy. Para todo esto, nos gusta mantener las cosas un poco prácticas. Así que el formato de hoy es que tenemos alrededor de tres horas reservadas para la masterclass. A veces no llegamos a las tres horas completas, depende de cuánto tiempo tomen los ejercicios y los desafíos. Pero será práctico. Así que voy a presentar un concepto, mostrarte algo de código, abriremos algo en StackBlitz, lo miraremos. Y luego al principio, haremos el desafío juntos. Así que solo recorreremos el desafío. Nos aseguraremos de que funcione. Y luego lo miraremos y nos aseguraremos de que funcione en StackBlitz y todos avanzaremos desde allí. Y luego, a medida que comencemos a movernos de los primeros desafíos, voy a dejar que ustedes hagan los desafíos por su cuenta. Así que comenzaremos el desafío y luego les daré un par de minutos, probablemente como cinco minutos más o menos, para trabajar en el desafío. Si necesitas ayuda, siempre puedes saltar y mirar la solución. Nuevamente, queremos solo poner algunas manos en los teclados, familiarizarnos un poco con algunas de las API. De esa manera, habrás ganado algo de conocimiento sobre el uso de ag-grid con React.

Genial. Así que vamos a sumergirnos. Quiero mencionar una última cosa sobre mí, porque a veces la gente se confunde, como quién soy y mi relación con ag-grid. Verás mi pequeña foto en la portada del sitio web de ag-grid, porque trabajo mucho con ellos, pero no trabajo para ag-grid. Así que no estoy empleado por ag-grid. Conozco a su CEO Nial y a algunas de las personas que trabajan en ag-grid. Son un equipo fantástico. Tienen grandes ingenieros. Tienen un gran equipo de soporte, todo eso. Solo hago mucha consultoría y muchos de mis clientes trabajan con grandes cantidades de datos. He hecho consultoría, ciertamente en el ámbito de la banca y cosas así, donde estás mostrando toneladas de datos a los usuarios y ellos necesitarán ver esos datos en un formato de cuadrícula o un formato de tabla y quieren poder interactuar con ello o copiar-pegar de ello o editar los datos y cosas así. Y así, tendemos a usar ag-grid mucho con nuestros clientes. Y así, lo encontramos realmente poderoso. Y como resultado, hemos establecido esta relación con ag-grid donde dicen, oye, ustedes deberían simplemente hacer esta masterclass para nosotros porque, ya saben, lo usan en el campo. Nosotros lo construimos, ustedes lo usan. Y así, esa es mi perspectiva. No construyo ag-grid. Estoy familiarizado con los internos, pero no soy un ingeniero de ag-grid. Soy un tipo de JavaScript como ustedes. Y así, encontrarán que a medida que avancemos en este curso, traeré esa experiencia o esa perspectiva. Así que, si no hay preguntas, adelante y comenzaremos. Si tienen preguntas, estaré monitoreando el chat. Así que, siéntanse libres de dejar cualquier cosa en el chat si tienen preguntas.

Y así, sí. Así que, con gusto tomaré esas preguntas cuando lleguemos a una buena pausa. Así que, sí. Encantado de conocer a todos. Parece que algunas personas están aquí solo para aprender qué es ag-grid. Algunas personas están familiarizadas con él, ese tipo de cosas. Así que, sí. Así que, nos sumergiremos y comencemos.

Entonces, lo primero que queremos hacer para comenzar con ag-grid y React es que queremos instalarlo. Así que, vamos a ir aquí a esta primera sección. Voy a dejar este enlace aquí en el chat por si te unes un poco tarde. Aquí es donde estamos. Estamos en el sitio web del curso y estamos viendo cómo instalar ag-grid con React. También quiero señalar que en este sitio web del curso, si quieres seguirme en modo de diapositivas, notarás que simplemente alterné en Chrome entre los dos. Si presionas el punto o la tecla de punto en tu teclado, eso abrirá la vista de diapositivas y luego puedes usar las teclas de flecha en tu teclado para avanzar y retroceder y luego escape te sacará de esa vista de diapositivas. No tienes que hacer eso. Solo lo menciono por si quieres seguir. Así que, estaré haciendo eso a veces. Sí, tenemos una pregunta. Déjame abordar esto. Usualmente haré una pausa. Esperaré hasta una pausa para preguntas, pero definitivamente quiero abordar esto de inmediato. Y vamos a hablar un poco sobre esto cuando entremos en los Modelos de Roles. Así que, muchas personas preguntan si ag-grid es gratuito o si viene con una suscripción. Nuevamente, no trabajo para ag-grid, así que no estoy tratando de venderte nada. Ag-grid tiene dos modelos de licencia. Tienen una Edición Comunitaria de código abierto MIT, y luego también tienen lo que llaman una Licencia Empresarial. Y ahí es donde tendrás que pagar. Y hay una diferenciación en las características. Así que, voy a abrir el sitio web rápidamente. Y si vamos a los documentos en el sitio web de ag-grid, verás que a medida que entras en algunas de estas características, déjame ver dónde están. Aquí vamos. Cualquier cosa que tenga este pequeño e rojo al lado, eso significa que es una característica solo para empresas. Así que, necesitas, tienes que tener una licencia para eso. Y tienes que pagar por eso. Su licencia. Nuevamente, no trabajo para ag-grid. No soy un vendedor. Su licencia es un poco confusa para las personas que no la han usado inicialmente. Básicamente compras una licencia de versión, y luego eso te da un año de soporte y actualizaciones. Pero puedes, tu versión termina en ese año, así que digamos que la compré el 1 de enero de este año, compro una licencia. También tengo que comprar asientos. Así que, compro una licencia para ag-grid. Tengo, trabajo con, ya sabes, otras cuatro personas y mi equipo es un equipo de cinco. Así que, tengo que comprar la licencia. Tengo que comprar cinco asientos. Y eso me da un año de soporte y actualizaciones. Al final de ese año, el 31 de diciembre, cualquiera que sea la versión de ag-grid, estoy un poco, si no renuevo, estoy bloqueado. Y bloqueado significa que puedo usar esa versión para siempre en perpetuidad. Es una palabra difícil de decir. Puedo usar esa versión para siempre, ¿verdad? Así que, he comprado esa licencia, y estoy bien para usarla. Pero no obtendré más soporte, y no puedo actualizar más allá de esa versión de cualquiera que sea esa fecha de finalización. Así que, si quieres seguir recibiendo soporte y quieres seguir actualizando, entonces tienes que renovar anualmente o lo que sea. Estoy seguro de que si tienes un gran equipo, les encantaría hablar contigo y probablemente harán algún precio personalizado alrededor de eso o lo que sea que parezca. No lo sé. No me cites en eso. He trabajado con clientes que compran ag-grid seguro porque podrían ser como un gran banco o algo así, y ellos necesitan el modelo de soporte. No son solo las características, sino que también necesitan tener software soportado. Así que, espero que eso responda a tu pregunta desde el principio. Así que, verás esto nuevamente, este E rojo aquí como que significa en su documentación que esta es una característica empresarial. Así que, cuando se trata de estos filtros, puedes hacer filtrado de texto, filtrado de números, filtrado de fechas. Puedes escribir tu propio filtrado y usar la API, y lo he hecho. Pero si quieres usar lo que se llama filtros de conjunto, entonces tienes que comprar la licencia empresarial de ag-grid. Y tienen instrucciones aquí en términos de ir directamente a la página de precios, y luego te ingresarán. Y diré esto, nuevamente, como usuario, porque trabajo con clientes que usan ag-grid, y trabajo con ag-grid, su soporte es bastante bueno. Definitivamente, en términos de si eso es parte de tu decisión de compra, usan zendesk, creo. Envías un ticket y generalmente obtienes una respuesta dentro de, no sé, tal vez 24 horas. Tal vez pagas por un nivel más alto en eso. No estoy seguro, pero su soporte es bastante bueno, y tienden a responderte en todo. Así que, tienen código abierto, tienen un repositorio de GitHub también, y puedes enviar problemas al repositorio de GitHub de ag-grid, pero si eres un cliente que paga, simplemente te dirán, oye, ¿puedes enviar esto a zendesk o lo que sea, o referirte a esto, para que puedan gestionar tu soporte. Bien, genial. Sacamos eso del camino. Nuevamente, no trabajo para ag-grid, así que no estoy tratando de venderte una licencia. La mayoría de mis clientes en realidad usan la Edición Comunitaria. Solo es a menudo cuando necesitan el soporte o cuando necesitan algunas características realmente robustas que tienden a buscar esa licencia empresarial.

Bien, así que para comenzar con ag-grid, bastante fácil. Vamos a usar npm. Puedes usar pnpm, yarn, lo que sea. Creo que bun, estoy bastante seguro, para instalar también y usar esto si quisieras. Pero de todos modos, así que adelante y simplemente ejecuta npm install, y luego vas a instalar ag-grid-community, y ese es como su paquete base. Y luego tienes que instalar el módulo ag-grid-react también, y eso te da algunos de los componentes y hooks de React y todas esas cosas que necesitarás. Si estás usando otro marco de frontend como Vue o Angular, también los soportan. Es similar, es como ag-grid-vue, ag-grid-angular. Lo siguiente que necesitas hacer después de instalarlo es que tienes que importar los archivos CSS base y de tema necesarios. Así que esto es requerido. Básicamente tienes que traer ese archivo CSS base, ag-grid.css, y luego necesitas traer un tema, y tienen algunos temas integrados, y veremos más de esos al final de la masterclass. Pero querrás traer ambos para que obtengas el estilo. De lo contrario, la cuadrícula no va a funcionar, porque la cuadrícula es realmente altamente eficiente, y una de las formas en que lo hace es posicionando cosas y usando CSS. Así que es realmente importante que los traigas. Y eso es todo, así es como comenzamos.

Así que digamos que tus datos de fila no son solo un array de objetos simples. Tal vez tienes un array de usuario. Y dentro de ese usuario, tienes un objeto de cuenta. Y dentro de ese objeto de cuenta, tienes una propiedad de nombre que es una cadena. Y tal vez un apellido que es un hermano, y eso es una cadena. Y querías extraer de ese valor. Así que dentro de esa misma propiedad field, puedes hacer field colon. Y luego vas a darle una cadena. Vas a decir usuario punto cuenta punto nombre. Y luego va a profundizar en la referencia dentro de ese objeto de datos de fila para encontrar eso y renderizarlo en la celda para ti.

Como ya mencioné, si estás usando, tal vez estás en un gran proyecto y ya tienes ag-grid instalado, parte del soporte de TypeScript se introdujo alrededor de la versión 28. Ahora están en la 29 algo. Así que ya han pasado esto. Pero solo quiero señalar esto, si comienzas a usar algunos de estos genéricos de TypeScript y cosas, y dices, esto no está funcionando. ¿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 más antiguas no tienen realmente mucho soporte de TypeScript, o no muy. Es solo que el soporte de TypeScript es muy pequeño o no está allí en absoluto. Y solo quiero señalar eso para aquellos de ustedes que ya podrían tener ag-grid instalado en su proyecto, y tal vez están en una versión más antigua. Así que eso podría darte un incentivo para actualizar si eso es algo que es importante para ti.

OK, echemos un vistazo a los datos de fila. Así que en términos generales, hay dos lo que llaman modelos de fila que son proporcionados por ag-grid. Tienes el modelo de fila del lado del cliente y el modelo de fila del lado del servidor. Y eso suena justo como piensas que suena, ¿verdad? Así que el modelo de fila del lado del cliente está construido con la intención de que el renderizado y el ordenamiento y filtrado y todo eso, como los datos, todo eso va a estar en el cliente. Así que si estás construyendo una aplicación de una sola página usando React y estás usando el modelo de fila del lado del cliente, vas a esperar conectar todos los datos y vas a dejar que el ordenamiento y filtrado y todo eso suceda en el cliente. En el lado opuesto, está el modelo de fila del lado del servidor. Así que cuando estás manejando grandes conjuntos de datos, tiendo a encontrar que con algunos de mis clientes el modelo de fila del lado del cliente te lleva bastante lejos. También depende de cuántos datos quieres enviar por el cable y ese tipo de cosas. Pero la mayoría de los modernos, especialmente si tienes clientes empresariales, tal vez usuarios que están en un escritorio, un escritorio bastante potente, tienen una calidad de conexión bastante buena, ese tipo de cosas. Puedes enviar un par de miles, tal vez 10, 20, 50,000 depende de cuán grandes sean tus conjuntos de datos, por supuesto. Pero puedes ejecutar esos bastante eficientemente en el modelo de fila del lado del cliente y salirte con la tuya, por así decirlo. Quizás no esté demasiado optimizado. Pero una vez que entras en los cientos de miles de filas y entras en los millones de filas, es cuando tiendes a tener que apoyarte en el modelo de fila del lado del servidor. Y de nuevo, el modelo de fila del lado del servidor va a estar obteniendo datos de manera asíncrona y haciendo el ordenamiento y filtrado. Y vas a empujar mucho de ese trabajo a tu capa de base de datos o lo que sea que estés usando para persistencia. Así que cuando el usuario está filtrando o ordenando a través de 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 back end. Vas a decir, oye, dame las siguientes 500 filas ordenadas por este valor o lo que sea, esta columna, y ascendente. Y si estás usando SQL, vas a tener una declaración order-by o algo así. Y así tienes que construir ese back end de lo que sea que estés usando. Y puedes usar Node o C Sharp o lo que sea tu sabor en el back end para hacer el modelo de fila del lado del servidor.

Aquí es donde obtienes una separación en esa edición gratuita de la que ya hablé, esa Community Edition con licencia MIT y la Enterprise Edition. En general, las características del lado del cliente están disponibles en la Community Edition. Y luego si necesitas ese modelo de fila del lado del servidor, es donde tienes que recurrir a la Enterprise Edition y comprar una licencia de ADGrid. De nuevo, creo que llegas bastante lejos con el lado del cliente. Y vamos a estar usando el modelo de fila del lado del cliente durante esta mañana o esta tarde, sea la hora que sea para ti. Vamos a estar usando el modelo de fila del lado del cliente en este curso. Simplemente no estamos trabajando con un gran conjunto de datos. Y es mucho más fácil de enseñar. Pero muchos de los fundamentos van a cruzarse. Así que aprenderás a usar ADGrid. Y si necesitas un modelo de fila del lado del servidor y necesitas sacarlo del estante, creo que encontrarás que mucho de esto todavía se aplica.

OK, genial. Así que echemos un vistazo a un ejemplo. Y luego vamos a abrir esto en StackBlitz y comenzar a ejecutar algo de código, porque hemos estado hablando y mirando cosas. Quiero que ustedes comiencen a jugar. Así que voy a configurar nuestras columnas. De nuevo, ya echamos un vistazo a esto. Y ya tengo, aquí está mi HTML, lo que sea, TSX, JSX. Tengo mi ContainerElement. Tengo mi componente ADGrid React. Anteriormente, estábamos proporcionando las definiciones de columna. Y luego aquí voy a especificar la propiedad row data. Y voy a proporcionar esos datos de fila. Y aquí, voy a usar state también. Y voy a decir que tengo un array de estos objetos de datos de fila. Y voy a obtener esos objetos de este data.products. Así que en nuestros ejemplos, voy a usar solo un archivo JSON que tiene una especie de orden, línea de pedido, datos de tipo de producto. Si estuvieras usando un comercio electrónico, estás construyendo una solución de comercio electrónico o algo así. Y eso va a ser nuestro conjunto de datos de ejemplo para hoy. Así que voy a obtener esos datos de fila. Y voy a vincular eso a mi elemento ADGrid React. Vamos a cargar esto en StackBlitz. Así que si haces clic en ese enlace en el curso, si no estás en el modo de diapositivas, si simplemente bajas aquí, vas a ver justo aquí es donde vas a hacer clic para abrir ese StackBlitz. Y luego aquí en un minuto, vamos a comenzar con nuestro primer ejercicio. Y podrás abrir eso justo allí. OK. Así que aquí estamos. Estamos ejecutando ADGrid. Tenemos – voy a profundizar, entrar en esto un poco. Déjame dejar el enlace al repositorio de nuevo para aquellos que lo quieran. No necesitas clonar el repositorio o referenciarlo. Pero quiero señalar eso que aquí es donde se está extrayendo el código. Así que aquí está el código para el 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. Así que si alguna vez quieres mirar esos, también están todos allí. Pero vamos a StackBlitz. En StackBlitz, tengo esto configurado, y estoy mirando la solución column-def-01, y estoy mirando el archivo grid.tsx. De nuevo, voy a profundizar un poco en esto la primera vez, y luego a medida que avancemos en el curso, vamos a saltarnos algunas de estas cosas iniciales. Voy a traer mis temas, el CSS de ADGrid así como el tema que estoy usando. También voy a traer la interfaz de definición de columna de ADGrid community, y luego estoy importando el componente ADGrid React del módulo ADGrid React.

Y también estoy importando estos data de este archivo JSON. Ya vimos esto, pero quiero repasarlo rápidamente de nuevo. Aquí está mi interfaz para mis datos de fila. Así estoy diciéndole al compilador de TypeScript que mis datos de fila son un objeto que contiene al menos estas dos propiedades, nombre y color, y ambos son string. Y luego aquí, voy a exportar mi función predeterminada llamada grid, y voy a configurar mis definiciones de columnas usando el hook useState. Y he especificado el genérico de TypeScript para ser un array de objetos de definición de columna, donde los data de la definición de columna o los T data son mi interfaz de datos de fila. Y verás que esto es a lo que me estoy refiriendo, estos T data. También he especificado el nombre del encabezado y el campo de los datos de fila donde quiero que cada columna obtenga su valor. Así que en la primera columna, de nuevo, estas columnas son por defecto, cuando las configuro en las definiciones de columnas, van a ser ordenadas de izquierda a derecha. Así que 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 mis datos de fila, y los estoy sacando de mi archivo JSON que he importado. Podrías obtener esto de forma asíncrona o algo por el estilo. Y aquí están mis productos que quiero mostrar. Así que tengo mi hook useState, y aquí están mis datos de fila, y luego voy a especificar esas props. Voy a tener mis datos de fila prop, mis definiciones de columna, prop de defs de columna. Tengo eso para mi componente AGGridReact, y luego tengo mi elemento contenedor aquí para mi tema AGG, Quartz AutoDark, que da este bonito y hermoso aspecto de la cuadrícula a la derecha. Y podemos ver que a medida que vamos bajando a través de esto, creo que estamos mostrando un par de cientos de filas de data. Tenemos buenos ratios de fotogramas, es rápido y todo se ve bien. Y sí, y podemos mover las columnas en términos de tamaño. Podemos habilitar y deshabilitar esta característica, pero esto es solo de serie. No hemos personalizado nada aquí. También puedo arrastrar la columna de nombre y moverla un poco, así que por defecto puedes arrastrar las columnas. De nuevo podrías deshabilitar eso para tus usuarios si no quieres eso. Y sí, así que de serie estoy renderizando algunos data. Lo tengo en marcha. Creo que tuvimos un par de preguntas, así que quiero hacer una pausa allí. Vamos a entrar en un ejercicio aquí en un segundo. Antes de empezar el ejercicio, sin embargo, si tienes preguntas, puedes dejarlas en el chat, o podemos darte un par de minutos y adelante y haz tu pregunta. Genial. Tenemos un rápido challenge para ti. Este es fácil. Todo lo que vamos a hacer es que abras este ejercicio de StackBlitz. Así que vamos a hacer esto primer challenge juntos, sólo para asegurarnos de que estamos todos en la misma página. Así que adelante y haz clic en el enlace para abrir el ejercicio de StackBlitz. Y luego queremos especificar la def definición de columna y vincularla al componente ag-grid-react. Vamos a establecer la propiedad de datos de fila usando los productos existentes de la importación de data. Y vamos a configurar eso con el componente ag-grid-react también, vamos a establecer ese valor de prop de datos de fila. Así que voy a abrir el ejercicio. Y voy a pasar por esto un poco lentamente, de esa manera podemos hacerlo juntos. Vale, una vez que tengas abierto el enlace, el challenge, deberías estar mirando el archivo grid.tsx. Y verás un par de líneas onduladas aquí. Creo que es sólo porque no se están usando. Y está diciendo que son importaciones no utilizadas. Así que no te preocupes por eso. Pasa por alto 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 así lo que vamos a hacer es que vamos a especificar la definición de columna estado. Y vamos a vincular al componente ag-grid-react. Así que lo que quiero hacer aquí es que voy a seguir adelante y configurar esto. Voy a usar use state. Y voy a darle dos objetos de definición de columna. Así que voy a tener nombre. Y voy a tener color. Y si estás familiarizado con, si no estás haciendo TypeScript, y sólo quieres codificar esto en JavaScript puro, por así decirlo, o simplemente 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 array de columnas definición de objetos. Y luego quiero especificar el espacio de nombres. Así que si voy a hacer esto, y luego quiero especificar aún más que cada fila, o los tdata, es un objeto de datos de fila. Así que voy a hacer datos de fila. Y ahora voy a obtener una buena comprobación de tipos allí también. Así que inicialmente, vimos que nuestra cuadrícula se estaba mostrando. Pero sólo decía, como, cargando. Déjame retroceder y mostrarte cómo se veía eso. Sí, este era nuestro estado original. La cuadrícula está vacía. Sólo 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 seguir adelante y obtener mis definiciones de columnas. Y luego voy a venir aquí abajo, y voy a establecer la propiedad de definiciones de columnas. A colDepths. Así que ahora tengo mis definiciones de columnas, pero no tengo ningún data para mostrar. Así que puedes ver que tengo nombre y color configurados, pero necesito establecer esos data. Así que voy a hacer lo mismo aquí abajo. Voy a obtener mis datos de fila. Voy a usar use state, y voy a darle algunos datos.products. Y luego voy a venir aquí abajo y a configurar esto también. Genial. Así que aquí especificamos las definiciones de columnas. Aquí hemos especificado los datos de fila. Tengo mi elemento contenedor con el tema en él. Estoy usando el componente ag-grid-react que importé del módulo de la biblioteca ag-grid-react, si se quiere. Y luego tengo los datos de fila. módulo de la biblioteca ag-grid-react, si se quiere. Y luego aquí he vinculado a la prop de definiciones de columnas y la prop de datos de fila. Lo configuré todo, y ahora puedo ver que los data se están mostrando. Y por defecto, de nuevo, obtenemos ese caso de título basado en el nombre del campo. Pero si quisiera cambiar eso, podría hacerlo, y podría decir, oye, el nombre del encabezado, en realidad quiero que digas que esto va a ser el nombre del producto o algo así. Y ahora podemos ver que tengo este nombre de encabezado personalizado. Fantástico. Adelante y dame un pulgar arriba en el chat si todo está bien, y eres capaz de seguir el ejercicio y hacerlo a través de él.

Creo que mi diapositiva aquí está un poco desactualizada. Pido disculpas por eso. Sí, así que el ordenamiento por defecto, el sortable se va a establecer en verdadero. Y siempre puedes anular eso y establecer sortable en falso. Así que jugaremos un poco con eso aquí en un segundo con un ejercicio. Aquí es cómo puedo personalizar especificando el orden de ordenamiento. Así que especifico la propiedad de orden de ordenamiento. Y le doy un array de estas cadenas. Y así, en este ejemplo, la columna de nombre es ordenable, y ordena en ascendente y luego en descendente. Así que cuando el usuario sigue haciendo clic para cambiar ese orden de ordenamiento en el encabezado, simplemente va a alternar entre ascendente y descendente. Así que no mostrará los data en el orden que vino del back end o de nuestra fila data. También puedo hacer un ordenamiento de múltiples columnas. Así que, de serie, el usuario puede ordenar varias columnas manteniendo pulsada la tecla shift y haciendo clic en el encabezado de la columna. También puedo especificar esa tecla de multi-ordenamiento si quiero anular ese comportamiento. Tal vez quiero que sea la tecla control o algo más con lo que el usuario pueda estar más familiarizado. Pero tienes ordenamiento de múltiples columnas. Así que puedes ordenar por una columna. Mantienes shift, haces clic en un segundo encabezado de columna, y luego, sea cual sea el valor que sea igual, comparará y ordenará la siguiente columna. Y de nuevo, puedes cambiar esa tecla de ordenamiento si quieres. Y es tan simple como configurar esto con multi-sort key. Y luego aquí estoy configurando esto para la tecla control. Así que esto va a establecer esa tecla de ordenamiento para ser el botón Command en Mac OS

Así que para este ejercicio, de nuevo, lo haremos juntos, y este será el último que haremos juntos. Y luego te lo dejaré a ti. Así que lo que queremos hacer aquí, aquí está nuestro mismo tipo de donde lo dejamos la última vez. Y tengo mi propiedad sortable y tengo mi campo aquí de nombre. Y por defecto, sí. Así que el ordenamiento está habilitado por defecto. Así que hice clic en él. Así que ahora es ascendente. Es descendente. Hago clic de nuevo. Vuelve a nulo o sin orden de ordenamiento. Y así el orden va a estar basado en los valores que he establecido para la fila data. Y también puedo hacer, puedo mantener la tecla shift, y puedo establecer múltiples ordenamientos aquí. Así que si tengo dos que coinciden, puede que haya algunas coincidencias aquí. Mantén esto correctamente. Ahora primero ordenará por nombre, y luego ordenará por color. Y podemos anular eso estableciendo la clave multi-sort. Así que vamos a jugar un poco con esto. Pondremos sortable en falso. Y ahora si voy a hacer clic, estoy haciendo clic en el nombre y no pasa nada, pero todavía puedo ordenar por color. Y también puedo hacer, vamos a deshacernos de esto, y vamos a hacer el orden de ordenamiento. Le voy a dar un array. Voy a decir ascendente, descendente. Y ahora puedo ir ascendente, descendente. Y luego observa cuando hago clic una tercera vez, no vuelve a ese orden de ordenamiento nulo. No cambia de nuevo. Siempre será simplemente ascendente o descendente. Este, porque no he especificado el orden de ordenamiento, irá ascendente, descendente, y luego volverá a lo que fuera el orden anterior. Y puedo venir aquí abajo y puedo establecer esa clave multi-sort. Y voy a poner esto en control. Y así que ahora si estoy manteniendo la tecla shift, que es lo que estoy haciendo, y hago clic entre estos, no está haciendo multi-sort, pero ahora tengo que mantener pulsada la tecla command en mi teclado macOS, y ahora obtengo ordenamiento de múltiples columnas.

Genial. ¿Por qué no sigues adelante y yo solo, eso fue más una demostración que un ejercicio. Espero que todo fuera bastante fácil de seguir. Y sí. Sí. Así que puedes establecer la clave multi-sort a cosas distintas de control. En la documentación, creo que tienen algo así como la, así que puedes establecerlo en control aquí. Y luego puedes establecerlo en multi-columna. Y luego puedes algo así como la, así que puedes establecerlo en control aquí. Pensé que podrías establecerlo en otras teclas también. Tal vez sea solo control. Estoy viendo en el TypeScript que solo tenían esto como opcional y control. Eso podría ser. Esa es una buena pregunta, Florian. Parece que basado en la definición de TypeScript, es solo control. Siempre podemos abrir esto e iremos a los documentos y miraremos el. Parece que es solo control. Así que es shift o control es lo que parece. Así que es shift de serie. Y puedes cambiar el defecto para usar la tecla control en su lugar estableciéndolo en control. Sí. Así que parece que esas son tus dos opciones. Una de las cosas que es genial, como que ciertamente es lo que viene de serie, Florian. Digamos que tus usuarios o tu cliente o lo que sea, no, tiene que ser lo que sea. No sé, el número uno o la tecla tilde o alguna otra tecla. Siempre podrías configurar un encabezado personalizado. Podrías añadir algún enlace de evento a ese oyente de eventos para esas teclas personalizadas o para ese evento de tipo key down. Filtra eso. Comprueba esa tecla. Y luego puedes usar lo que se llama la API de la cuadrícula. No hemos entrado en eso mucho, pero siempre tienes acceso programático a la cuadrícula. Y así podrías usar una API de cuadrícula para decirle a la cuadrícula, hey, ahora ordena por esta columna ascendente o algo así. Así que si realmente necesitas anularlo, probablemente podrías. Podría ser un poco más de esfuerzo del que vale potencialmente, pero los ganchos están ahí para ti, pero no de serie. Solo puedes establecerlo, parece que a control simplemente usando la clave multi-sort. Genial. Aquí está nuestra solución. Solo para que lo veas. ¿Alguna pregunta, alguna otra pregunta? Adelante y déjalas en el chat. De lo contrario, vamos a seguir adelante. Lo siguiente de lo que queremos hablar es la definición de columna por defecto. 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 el ordenamiento, y quieres establecer sortable en falso. Y así que podrías entrar, digamos que tienes 20 columnas. Podrías establecer sortable falso, sortable falso, sortable falso, todas estas cosas. Pero eso es un poco repetitivo. Y no queremos hacer eso. Y así que tienen lo que se llama una definición de columna por defecto. Así que por defecto, lo que pasará es, así que cuando la columna está siendo conectada por AG grid, primero van a mirar la definición de columna por defecto, y van a aplicar esos comportamientos o esas propiedades. Y luego, 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 por defecto si quieres.

Así que tiene una pequeña cadena de herencia. Así que cada columna heredará la definición de columna por defecto, y luego cada definición de columna puede anular esos valores por defecto. Así que veamos un ejemplo. Aquí estoy estableciendo un valor por defecto llamado def aquí. Así que simplemente tengo por defecto llamado def, y esto va a ser de tipo, es una definición de columna. Voy a especificar el T data genérico para ser fila data, y voy a establecer sortable en verdadero. Porque mi ejemplo es un poco incorrecto aquí, y pido disculpas por eso, cambiaremos esto en el challenge cuando empecemos a jugar con esto. Y lo que haremos es, simplemente lo estableceremos en sortable falso. De esa manera, podemos simplemente desactivarlo en todas las columnas si queremos. Y luego traigo mi valor por defecto llamado def. Especifico la propiedad, y voy a vincular eso a mi variable por defecto llamada def aquí arriba. Así que echemos un vistazo rápido a un ejercicio en StackBlitz. Adelante y define un nuevo valor por defecto llamado def constante en la función del componente. La definición de columna por defecto será un objeto de tipo llamado def. Y de nuevo, estamos usando TypeScript. Si quieres ignorar eso, simplemente ignóralo. Vamos a establecer esa propiedad sortable. La vamos a establecer en falso en lugar de verdadero. Y luego vamos a vincular la constante por defecto llamada def a la propiedad por defecto llamada def en el componente AgGrid React. Y luego adelante en una de las columnas, anula esa propiedad sortable. Así que saquemos este ejercicio, quitémoslo del camino. Y lo primero que vas a hacer es, vas a entrar aquí, y vas a establecer tu definición de columna por defecto, conecta eso a tu componente. Y luego si quieres, puedes anular cosas en la definición de columna en sí. Así que voy a dejar que ustedes sigan con eso. ¿Por qué no toman, no sé, dos minutos, tres minutos. Debería ser bastante fácil. Establece una definición de columna por defecto, vincula eso al componente AgGrid React, a la propiedad por defecto llamada def. Y luego como quieras, anula cosas en tus definiciones de columna específicas, y verás cómo funciona eso. ¿Tienes alguna pregunta? Adelante y déjalas en el chat. Ya sea que esté relacionado con el challenge o no, estoy encantado de responder a cualquier pregunta. Sí, buena pregunta. Estoy tratando de pensar. Así que la pregunta es, ¿hay alguna manera de ordenar solo los data visibles cuando se usa la paginación? Sí, así que en el modelo de fila del lado del cliente, cuando haces este ordenamiento por defecto, por así decirlo, cuando voy a ordenar, y estoy usando la paginación, va a ordenar todos los data de fila que he proporcionado al modelo de fila del lado del cliente.

Entonces, mis datos de fila data se ven un poco diferentes. Y luego aquí tengo un par de columnas más. Vas a agregar el filtrado a estas columnas, y luego no te preocupes demasiado por lo que tenemos aquí en este valor de fila data. Estoy usando el gancho use memo para calcular los data porque estoy sacando data de diferentes partes y emparejando algunas cosas. Echaremos un vistazo más de cerca a esto en un segundo. Y luego, en la parte inferior, todavía tenemos nuestras definiciones de columna y nuestros datos de fila.

Bueno, entonces tengo una columna de nombre de cliente, tengo un número de cuenta, fecha de pedido, y una columna total. Y quiero permitir algún filtrado en estas columnas. Así que de entrada, aquí mismo, voy a establecer el filtro en verdadero. 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 filtrado. Entonces, digamos que quiero filtrar por LLC. Ahora puedo ver que estos diferentes clientes tienen LLC. Y el filtro de texto proporcionado te da algunas capacidades de filtrado en términos de si comienza con o termina con contiene ese tipo de cosas. Y luego puedes construir una expresión si quieres y decir, oye, quiero que empiece con esto y contenga eso, ese tipo de cosas. De nuevo, solo está haciendo filtrado de texto aquí. Y cuando tengo el filtrado aplicado, también puedo ver que hay un pequeño icono que aparece en mi encabezado de columna que indica que esta columna está siendo filtrada actualmente. Y luego puedo ir adelante y borrar eso. Y vuelve y lo establece en lo que era antes. Si hago clic en el número de cuenta, no tengo ningún filtrado disponible para mí para estos porque no lo he permitido. Así que 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 entro. Ya sabes, esto es un poco diferente porque espera números. Así que ahora puede decir igual o no igual, mayor que, menor que, ese tipo de cosas. Y entonces hagamos como un, hagamos 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í, pusiste solo siete dígitos, probablemente eso. Ocho dígitos. Sí, sí. Obviamente tienes que introducir todo el número aquí. Creo que captas la idea. Así que hay un poco, tal vez llegaremos al siguiente cuando hagamos el total. Será un poco más fácil de demostrar eso. Bueno. Así que para la fecha haremos el filtro de columna de fecha. Así que haremos el filtro, filtro de columna de fecha AG. Y luego total, también configuramos el número. Filtro de columna de número AG. Genial. Así que para la fecha de pedido, si vengo aquí, obtengo lo mismo. Notarás 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 echaremos un vistazo a 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 quieres hacer. Y luego aquí en el total, podríamos decir mayor que 200. Pero estos pueden no ser números. Así que sí, así que nos estamos encontrando 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 total son en realidad cadenas. Y entonces porque mis, estoy bastante seguro, puedo comprobar esto. Pero porque mis totales no son, son solo valores de cadena. Tenemos que asegurarnos de que cuando estamos configurando estos, que tenemos la propiedad correcta, como los valores correctos. Y ciertamente eso entra en juego para las fechas. Y lo veremos aquí en un segundo. Realmente creo que tenemos algunas diapositivas sobre esto. Sí. Así que cuando se trata de hacer filtrado de fechas y marcas de tiempo, podrías estar preguntándote, ¿qué pasa con el filtrado de fechas con marcas de tiempo? Y el filtro de fecha funciona tal cual cuando los datos de fila usan un objeto de fecha de JavaScript. Así que si quieres usar el filtro de fecha proporcionado, funcionará tal cual, de serie, siempre y cuando los datos de fila usen objetos de fecha de JavaScript. Pero si tienes una cadena allí, incluso si es como una cadena iso, entonces vas a necesitar especificar una función comparadora. Así que si la fecha se proporciona usando otro método, como cadenas iso, entonces tenemos que especificar la función comparadora. Ahora echemos un vistazo rápido a eso. Así que aquí tengo mi columna de fecha de pedido. Y he especificado el filtro para ser la fecha de pedido. Pero esa fecha de pedido es una cadena iso. Y entonces al usar el filtro de columna de fecha ag, no va a funcionar, porque estos no son objetos de fecha. Así que puedo, A, cambiarlo para que mis data que estoy proporcionando a la cuadrícula usen objetos de fecha de JavaScript, y entonces estoy listo para ir. 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 a la comparadora de ordenación. Por eso esto está debajo de los parámetros de filtro. Y la función comparadora va a ser similar a el método de ordenación de array. Es un poco diferente. Pero básicamente, voy a ser, esta es una función de devolución de llamada que va a ser invocada por ag grid. El primer argumento para esta función va a ser el filtro. Así que el filtro, bueno, el usuario establece la fecha local a medianoche. Y luego para cada fila en esa columna, me va a dar el valor. Y lo que necesito hacer es que necesito devolver ya sea un menos uno, uno, o un cero, justo como array.prototype.sort donde le estoy diciendo a ag grid, le estoy diciendo cómo ordenar esto realmente. Si esto es menor que el filtro de fecha local a medianoche, mayor que el filtro de fecha local a medianoche, o igual. Y voy a devolver ese menos uno, uno o cero. Sí, así que Christos tiene una pregunta aquí. Muéstranos el tipo exacto de filtro de columna de fecha, columna data. Así que si es un objeto de fecha de JavaScript, como aquí, para los valores en mis datos de fila, entonces el filtro de columna de fecha de ag grid funciona de serie. Si el valor de esos no es, entonces usamos la función comparadora. Y la función comparadora, tengo que hacer lo que quiera. Porque obtengo ese valor de celda. Así que aquí, estoy esperando que ese valor de celda sea esa cadena ISO, nueva en una actualización de objeto.

Voy a seguir adelante y establecer las horas a cero, de esa manera estoy comparando medianoche con medianoche. Y luego voy a hacer esa comparación y devolver un menos uno, cero, o uno. Hablamos un poco de esto. Sí, el menos uno, uno o cero, es la comparación entre el valor de la celda y el valor proporcionado del filtro de fecha local a medianoche que te da ag grid. Así que cuando el usuario selecciona el 1 de enero, te va a dar esa fecha local a medianoche como el 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. Y luego el siguiente contenido en el que vamos a entrar es el renderizado de celdas. Y tenemos un par de secciones alrededor de eso. OK, hicimos un gran trabajo. Empezamos esta mañana. Hicimos esta tarde, lo que sea para ti. Pero instalamos ag grid con React. Vimos lo sencillo que es empezar a instalar ag grid. Instalando esos dos módulos de nodo, el caso de ag grid, ag grid community, así como los módulos de ag grid react, instalamos esos con npm. También vimos las definiciones de columnas y cómo empezar con ag grid. Así que establecimos nuestras definiciones de columnas, establecimos los datos de fila. Y vimos la ordenación. Vimos cómo proporcionar la definición de columna por defecto. Y luego también vimos el filtrado. Y para el filtrado, vimos los filtros proporcionados que vienen con ag grid. 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 alrededor de eso. Así que específicamente alrededor del filtro de columna de fecha, cómo necesitamos proporcionar objetos de fecha para usar el filtro de columna de fecha que viene con ag grid. O necesitamos proporcionar al objeto de parámetros de filtro una función de comparación de devolución de llamada. Y esa función de devolución de llamada es lo que nos permite decirle a ag grid cómo hacer el filtrado para los valores de fecha. En este ejemplo, nuestros valores de fecha eran cadenas ISO, y por lo tanto pudimos básicamente analizar esa cadena ISO. Establecimos el tiempo para ser medianoche, o la hora, minutos, segundos, milisegundos para ser cero. Y luego hicimos nuestra comparación entre el valor de la celda que es - y eso la función de comparación es invocada por ag grid para cada celda para determinar eso. Y compararíamos eso con la entrada del usuario para el filtro a medianoche.

A continuación, vamos a echar un vistazo al renderizado de celdas. Y específicamente para el renderizado de celdas, vamos a echar un vistazo al obtentor de valores, al formateador de valores, y a la función de renderizado de celdas. Así que sin ninguna personalización, y en la forma más sencilla, cada celda en ag grid se renderiza como una cadena basada en el campo especificado en los datos de fila proporcionados. Sin embargo, a menudo, una implementación de ag grid ciertamente no va a ser tan sencilla. Y ahí es donde podemos aprovechar la tubería para renderizar celdas. Así que tenemos el obtentor de valores, el formateador de valores, y una función o componente de renderizado de celdas. Y vamos a echar un vistazo a la función de renderizado de celdas. También puedes construir componentes personalizados de React y registrar y proporcionar esos 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 simple función también para renderizar complejo o para renderizar HTML y para añadir oyentes de eventos y cosas así. Así que vamos a sumergirnos directamente en el obtentor de valores. Así que la función de obtención de valores nos permite obtener los datos de fila para las columnas, donde el uso de la propiedad de campo no es una opción. También podemos usar la función de obtención de valores para quizás mutar los datos antes de proporcionar los datos a la cuadrícula. De nuevo, piensa en nuestro filtrado de fechas. Digamos que los datos que obtenemos de nuestro backend van a ser, de nuevo, esas cadenas iso. Y queremos mutar esos datos antes de proporcionarlos a los datos antes de proporcionar los datos a la cuadrícula. Y queremos proporcionar realmente un objeto de datos de JavaScript como parte de eso. Y entonces podría usar la función de obtención de valores para hacer eso. Así que el obtentor de valores es una función que va a ser invocada por aggrid para cada celda. Y voy a configurar eso en mi definición de columna. Y la función es invocada con el objeto de parámetros del obtentor de valores. Así que vamos a especificar esa función, la función de obtención de valores. Y el parámetro va a ser el objeto de parámetros del obtentor de valores. Y el genérico es el T data. Así que lo que he establecido para mis datos de fila. Profundicemos un poco más aquí. Así que echemos un vistazo a la interfaz de parámetros del obtentor de valores. Así que este es el objeto que mi función de obtención de valores va a ser llamada con. Se le proporcionará este parámetro. Y esto va a venir de aggrid. Y este objeto de parámetros del obtentor de valores tiene un montón de cosas realmente útiles en él. He aludido a la API de la cuadrícula. Y puedes buscar más información sobre eso en la documentación. Pero cuando estoy usando la función de obtención de valores, puede que necesite tener acceso a la API para hacer algo más. Y por eso me lo proporcionan. Así que tengo la API de la cuadrícula. Tengo la definición de la columna. Así que la definición de la columna real que configuré. Así que si necesito hacer referencia a eso, puedo. Tengo el objeto de la columna. También tengo la API de la columna, que es ligeramente diferente a la API de la cuadrícula. También está este contexto, que puedes usar para configurar un contexto global dentro de aggrid. Y eso es algo que necesitas hacer. También te lo proporcionarán. También te darán los data. Así que todos los data para esa fila. Así que de nuevo, un obtentor de valores específico para una celda. Y lo configuramos para la definición de la columna. Pero también me dan acceso a los data. Así que cualquier data es para toda la fila, ya que está iterando sobre el array de objetos. Correcto. Así que siempre puedo hacer referencia a otras piezas de data, lo cual es realmente útil. Y eso será de tipo T data, que es ese tipo genérico que especificamos para la columna definición. También tengo una devolución de llamada de obtención de 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. Así que si quiero hacer referencia a otro valor de celda, puedo usar la función de obtención de valor para hacer eso. También tengo acceso a lo que se llama el nodo de fila. Y no vamos a profundizar en eso. Pero sólo sé que también hay este concepto de un nodo de fila.

Y eso nos da un poco más de exposición a cosas en la grid que podríamos necesitar. OK. Y ya desglosé un poco eso para nosotros. Quiero señalar la función get value. Este método de utilidad te permite obtener valores de columna. También puedes usar esa misma notación de punto que mencioné al principio para la propiedad de campo. Así que si necesitas obtener un valor, también puedes hacerlo. La API de grid es extremadamente útil. Y la usamos para cosas como interactuar programáticamente con la grid, tal vez añadir oyentes de eventos a la grid, acceder a las características del portapapeles y muchas más cosas. La API de columna es útil para interactuar con columnas específicas, tal vez mover una columna programáticamente, anclar, dimensionar, 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 grid. Esto es útil para cosas como la API de selección de filas, actualizar los data de fila y añadir oyentes de eventos a la fila.

OK. Así que ahora que hemos hablado un poco sobre cómo la función value getter es invocada por Agigrid, echemos un vistazo rápido a un ejemplo. Así que aquí tengo mis definiciones de columna. Y aquí estoy mirando la columna de precio. Así que he establecido el nombre del encabezado a ser precio. Necesito establecer eso porque notarás que no estoy usando la propiedad de campo. Ya no estoy usando la propiedad de campo. Estoy usando el value getter para proporcionar el valor de vuelta a Agigrid. Y así necesito especificar un nombre de encabezado porque no hay nada para titular aquí porque no he proporcionado un campo. Y el value getter, voy a proporcionar esta función de devolución de llamada. Y esta función de devolución de llamada va a ser invocada con los parámetros del value getter. Y lo primero que quiero hacer es comprobar que tengo data. Si estás usando cosas como agrupación y tal vez tablas pivotantes, hay un par de instancias específicas dentro de Agigrid donde tu fila o tu celda puede 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, entonces ahora ves todos los data. Y así quiero básicamente comprobar contra eso. Así que si los data son indefinidos, en esta instancia, para el precio, voy a devolver cero. Puedes querer devolver una cadena vacía o algo así. Y lo que eso significa es que no queremos calcular, hacer math.round indefinido y obtener una excepción en tiempo de ejecución porque data puede ser indefinido. Así que si tengo data para esta celda en particular para la columna, para la columna de precio, voy a seguir adelante y simplemente redondear ese precio. Así que voy a usar math.round. En el objeto de parámetros, ese objeto de parámetros del value getter, tengo los data. Y luego voy a acceder a la propiedad de precio dentro de ese objeto data.

OK, hagamos un ejercicio. Así que adelante, abre el ejercicio en StackBlitz. Y luego observa que la columna total está actualmente vacía. Quiero que uses un value getter para sumar el total de cada pedido. Puede que quieras mirar la solución de este porque sumar es un poco complejo porque tienes que hacer un poco de filtrado, mapeo y reducción. Y no quiero que tengas que escribir todo eso. Así que puede que quieras echar un vistazo a la solución porque el total de un pedido se basará en buscar. Recuerda, miramos los data antes. Necesitas buscar los productos y el precio del producto y sumar todo eso para ese pedido en particular. Y no quiero que te atasques con la complejidad de hacer ese cálculo. Así que puede que quieras echar un vistazo a cómo configurar el value getter y luego venir aquí y copiar y pegar este valor. Si realmente quieres codificarlo tú mismo, adelante. Pero sólo quería señalarte eso. Así que adelante, abre ese ejercicio. Y luego en la columna total, hagamos un value getter. De nuevo, en este caso, no puedo usar simplemente field porque para mi pedido, no tengo simplemente un campo total en este caso. Así que necesito sumar el total de cada pedido. Y para eso vamos a usar la función value getter. Y tengo aquí alguna información en términos de algunas hints para hacer eso. ¿Por qué no tomamos tres o cuatro minutos? Trabaja en ese ejercicio una vez que hayas terminado con el ejercicio o estés listo para continuar. Sólo dame un pulgar 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. Configuras el Value getter en una base por columna. Así que 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 va a mostrar dentro de cada celda. Cada fila de los data que se muestran en la cuadrícula. Entonces, sí, el Value getter se configura en una base por columna, pero la función se va a invocar para cada celda en esa medida que va bajando. Así que la cuadrícula va a iterar en bucle, ya sabes, cada fila que estás proporcionando en la fila data. Y luego cuando llega a esa columna, en lugar de buscar el campo fuera de la fila data, dice, oh, tienes un Value getter aquí. Déjame invocar esa función. Espera que esa función devuelva ese valor. Y luego ese valor es lo que se establece como el texto interno dentro del desarrollo. Y de nuevo, vamos a seguir, vamos a entrar en el formateador de valor. Así que hay una especie de en la tubería para renderizar una celda. Primero, tienes el Value getter, que va a devolver el valor que va a estar en la celda. Pero si querías formatear ese valor, digamos para esta columna total, en lugar de devolver un número, querías decir, ya sabes, querías poner como un símbolo de moneda, querías tener como, euro, ya sabes, dos euros o lo que sea que vaya a estar ahí. Ahí es donde te apoyarías en el formateador de valor. Y puedes usar ambos en conjunto. Puedes decir el Value getter, así es como obtienes el valor de la celda. Y luego, aggrid dirá, Oh, ¿quieres que lo formatee? En lugar de simplemente meter el valor y es el texto interno en este desarrollo. Y ahí es donde puedes tener otra función de devolución de llamada a la que vamos a llegar a continuación llamada formateador de valor, que será llamada con el valor, sin embargo fue recuperado ya sea a través de la propiedad del campo, el Value getter o de otra manera. Y luego llamará a ese formateador de valor. Y luego puedes, ya sabes, lo formateas en consecuencia. Entonces, sí, el Value getter está obteniendo el valor de cada celda en la columna que has especificado para esa propiedad Value getter.

Muy bien, echemos un vistazo al ejercicio. Así que voy a abrir esto en StackBlitz. También voy a volver aquí, y voy a saltar adelante y agarrar este código porque no quiero escribirlo todo. Muy bien, estamos mirando nuestra columna total, y vemos de inmediato 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í podría haber hecho probablemente el mismo trabajo si hubiera querido antes de conectar los data. Podría haber, ya sabes, lo que sea data viene de mi back end, podría haber usado eso y luego usar eso para vincularlo a mi fila data y calcular el total allí. Pero también puedo usar el Value getter. Este es un buen tipo de ejercicio de aprendizaje. Así que voy a usar el Value getter, y eso va a ser llamado 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, está indefinido, quiero seguir adelante y simplemente devolver cero. También podría devolver una cadena vacía. De lo contrario, lo que quiero hacer es quiero calcular este valor aquí. Así que ahora si vengo a total, ¿qué pasó aquí? ¿No alineé esto correctamente? Algo pasó con mis órdenes de retorno. No. Oh, data.products en lugar de productos. Oh, ya veo. Buena captura. Sí, tenía esto bien. Ahí vamos. Ahí vamos. No estoy seguro de por qué. Supongo que, sí, es posiblemente indefinido. Sólo porque estamos trayendo estos JSON data, tal vez TypeScript se está quejando un poco con nosotros, pero vamos a ignorar esos por ahora. Probablemente algo que querrías arreglar en una aplicación de producción. Bueno, así que aquí tengo mis params entrando. Tengo acceso a los data, y estoy obteniendo esos artículos de pedido. Así que volvemos y miramos nuestro modelo de data de nuevo. Y vamos a data.JSON, y echamos un vistazo a eso. Aquí están mis clientes, y estoy recorriendo mis pedidos. Y en nuestros pedidos, tenemos artículos de pedido, y tenemos pedidos. Y para calcular el total, lo que queremos hacer es queremos tomar esos artículos de pedido y queremos filtrarlos para obtener los artículos para el pedido, y luego vamos a mapearlos a un producto basado en el ID del producto de ese artículo de pedido. 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 artículos que están en el pedido, obtener el producto, obtener el precio del producto, y sumarlo todo, lo que nos da nuestro total de pedido. Y lo que podemos ver ahora aquí es que ahora nuestra columna total tiene el total de pedido correcto. Así que este es un ejemplo que se extrae de este conjunto de datos de muestra con el que estamos trabajando. Pero obviamente, con ValueGetter, 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 del campo. Así que bastante útil.

Y siempre puedes obtener esa solución en StackBlitz si quisieras llegar directamente a ella. De esa manera, puedes ver una versión funcional de eso.

Lo siguiente que quiero mostrarte es cómo podríamos usar un ValueGetter reutilizable. Proporcionar la función ValueGetter en línea es definitivamente muy razonable, fácil de usar. Sin embargo, es posible que quieras tener una solución más reutilizable. Digamos que tienes muchas cuadrículas que estás mostrando en toda tu aplicación. Y este concepto de obtener, digamos, un total de pedido es bastante común. Podrías tener múltiples cuadrículas donde estás mostrando detalles de pedidos o cosas así para un cliente. Quizás uno en una página de pedidos, quizás uno en una página de clientes donde muestras todos sus pedidos o lo que sea. Y podrías querer tener un ValueGetter reutilizable. Ahora, estas son solo funciones. Así que es realmente fácil sacar esta función de la definición de columna y hacerla una función de orden superior o reutilizable. Y lo que vamos a hacer aquí en este ejemplo es que vamos a echar un vistazo a una función ValueGetter multiplicadora. Así que esta es una función de orden superior que va a - vamos a llamar a este multiplicador ValueGetter como una función. Y le vamos a proporcionar un valor y un multiplicador. Y eso va a devolver la función ValueGetter. Así que es una función de orden superior.

Por lo tanto, es una función que devuelve esta función que luego se proporciona a AgGrid que va a multiplicar básicamente el valor en función del multiplicador que proporciono. Hay un poco de cosas de TypeScript sucediendo aquí. Así que no te preocupes demasiado por eso. Lo bueno de esto es, en primer lugar, que es agradable y muy fácil de probar. Tengo una función aquí. Puedo escribir una unit test 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 a lo largo de mi aplicación. Es una función pura. Es fácil de probar. Está algo aislado, 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 función de orden superior que mostré. Pero aquí tienes un ejemplo de cómo se verá eso. Así que 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 que voy a llamar 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 entonces 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, de nuevo, estamos usando datos de muestra data, un poco hipotéticos. Pero lo que hará esta función ValueGetter multiplicadora es que va a devolver una función ValueGetter después de ser invocada que va a ser invocada por aggrid que vamos a calcular este precio en función del precio así como de la tasa de impuestos.

Y vamos a echar un vistazo a este ejemplo en StackBlitz. Este es un ValueGetter reutilizable agradable. 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, es un poco diferente aquí, quizás un poco más expandido y haciendo algunas comprobaciones más. Eso va a tomar ese valor que es una clave de nuestros datos y nuestro multiplicador. Y va a hacer esa multiplicación por nosotros. Y entonces, si vuelvo a nuestro precio, ahora puedo ver que el precio de estos productos, y ahora estamos mirando 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 55.56. Y eso incluye el impuesto. Así que si volvemos a nuestro archivo grid.tsx, ahora puedo ver que estoy usando el MultiplierValueGetter. Y aquí abajo en la columna de precio para el ValueGetter, he especificado la función MultiplierValueGetter y especificado la fila data como genérica. Y estoy diciendo, adelante y usa el valor del precio para cada celda, y luego multiplícalo por la tasa de impuestos. Y esa tasa de impuestos también viene de la fila data. Así que ese es un ejemplo de donde podrías escribir una función de orden superior para cada celda. Y luego, veremos lo mismo para los formateadores de valor aquí en un segundo.

No creo que tengamos un ejercicio alrededor de eso, porque no es realmente complejo, pero solo por la naturaleza de ello. Pero es un buen ejemplo. Y siempre puedes sentirte libre de referenciar eso según lo necesites.

Como prometí, vamos a echar un vistazo al formateador de valor a continuación. Entonces, después de que se conoce, se calcula o se recupera 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. Está configurada en la definición de la columna. La función es invocada. Esta vez, en lugar del objeto params de ValueGetter, se invoca con el objeto params de ValueFormatter. Echemos un vistazo a eso.

Entonces, el objeto params de ValueFormatter se ve así. Y tenemos muchas de las mismas propiedades en esto. Tenemos una API, la definición de la columna, la columna en sí, la API de la columna, el contexto, data. La diferencia es que, en lugar de tener una función getValue, tenemos un valor en sí. 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 total, se ha recuperado o calculado el valor. Pero ahora, tal vez quiero formatearlo. De nuevo, tal vez quiero poner un símbolo de moneda delante de él o un icono o algo más dentro de esa celda. Y ahora, puedo devolver desde el ValueFormatter. Puedo formatear ese valor según sea necesario en función del valor. Entonces, podría, lo que sea, redondearlo, todo tipo de cosas. Entonces, de nuevo, ya lo señalé. Y la diferencia entre los params de ValueFormatter y los params de ValueGetter es el método getValue versus el valor real a formatear. Aquí hay un ejemplo de uso del ValueFormatter. Entonces, aquí, tengo esa columna de precio. Y he especificado la propiedad ValueFormatter en la definición de la columna. Y eso es invocado por AGrid con el objeto params de ValueFormatter. Voy a crear un nuevo formateador usando el InternationalNumberFormatter. Aquí, estoy usando EN-US como la configuración regional, especificando los dígitos fraccionarios mínimos y máximos. Si el valor no está definido, simplemente voy a devolver 0.

Así que voy a comprobar ese valor, sólo para asegurarme antes de llamarlo, si es de hecho indefinido. Es posible que nuestro getter de valor devolviera 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 params. Así que tengo el objeto params de ValueFormatter. Y estoy utilizando esa propiedad de valor y formateando ese valor para mi columna de precio.

Así que vamos a hacer un rápido ejercicio, para que practiques con este. El objetivo de este ejercicio es aprender a usar una función getter de valor. Así que abre el ejercicio en StackBlitz. Quiero que añadas un formateador de valor a la columna total para formatear el valor utilizando esa clase de formato de número. Así como lo hice yo. Así que si quieres referirte a las diapositivas, si no has usado eso antes, o puedes siempre adelantarte, echar un vistazo a la solución. Si no quieres codificar esto, siéntete libre de tomar eso. Y voy a hacer lo mismo para que no tengas que verme escribir. Así que quiero que uses el formateador de valor para formatear la columna total. Voy a tomar la solución, entrar aquí y tomar esto, al menos esta parte de ella. Sí, sólo estamos usando un formateador de números aquí. Podrías usar tu lib favorita si quieres, Lux y lo que sea, momento. Sí, date fns. Bueno, supongo que eso es más para fechas que realmente para los números, supongo. Pero si estuvieras haciendo formateo de fechas, sí, todo ese tipo de cosas. Formateador de valor. Bien, tenemos un montón de gente que ha terminado y está lista para seguir adelante. Así que voy a empezar con este ejercicio. Así que cierro esto. Vuelvo a nuestro ejercicio y lo abro. Bien. Y sólo voy a asegurarme de que tengo la tabla correcta. Así que voy a empezar con este ejercicio. Bien. Y queremos añadir esa función de formateador de valor a la columna total. Así que voy a bajar aquí a la total. Nuevo formateador de valor. Voy a obtener el objeto params. Podrías usar la desestructuración de objetos aquí también, si quieres simplemente sacar 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 valor. Sólo voy a usar el formato de número internacional y lo voy a crear aquí. Estoy usando la configuración regional de inglés de EE.UU., la moneda y el USD y luego llamando al método de formato en eso con el params.value. Y si vengo aquí, ahora puedo ver que obtengo un bonito formato de moneda con dólares y centavos y todo eso. Así que perfecto. Muy fácil de usar. De nuevo, ten en cuenta, estamos yendo en orden aquí porque primero se llama al getter de valor, ¿verdad? Así que si no tuviera un campo aquí, podría especificar el getter de valor. Y luego de ese valor, entonces el formateador de valor es el siguiente. Y eso nos da una oportunidad después de que el valor es calculado o computado o lo que sea. Ahora puedo formatear ese valor. Y en el objeto params en los params del formateador de valor, en lugar de una función get value 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éjala en el chat. Encantado de echarles un vistazo. De lo contrario, vamos a seguir avanzando. También tengo aquí un formateador de valor reutilizable. Voy a repasar rápidamente esto. Esto es muy similar a la función getter de valor multiplicador de orden superior que mostré anteriormente. Así que esto es una función de orden superior. De nuevo, agradable y reutilizable, fácil de probar porque es sólo una función pura. Así que es algo que puedo compartir en todas mis grillas.

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

Y luego también estoy diciendo para el formateador de valor, de nuevo, podría simplemente escribir una función aquí. Y eso está muy bien. Pero digamos que estoy usando esto en todas partes. Y quiero uno reutilizable agradable, alto, ya sabes, puedo probarlo y asegurarme de que es bueno para usar en todas mis cuadrículas. Ahora tengo mi formateador de valor decimal aquí para el precio. Y podemos ver aquí que tengo dos decimales. De nuevo, podríamos hacer un formateador de valor 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 pipeline de renderización de celdas, tenemos el getter de valor, el formateador de valor, y luego tenemos un renderizador de celdas. Así que después de que se determina el valor de una celda y hemos formateado opcionalmente el valor, también podemos usar un renderizador de celdas para tener un control total sobre cómo se renderiza la celda en ADGrid. Es importante saber que realmente sólo queremos usar estos renderizadores de celdas cuando sea necesario porque a menudo estos pueden venir con implicaciones de performance. Así que por defecto, el contenido de texto del HTMLElement de la celda, sólo un div, se establece en el valor formateado opcionalmente. Así que después de que el valor se calcula y se formatea opcionalmente, ADGrid simplemente establece ese contenido de texto en ese elemento div. Y eso es lo que se renderiza dentro de la celda. Y luego hay algo de padding y todo eso. Pero digamos que queríamos añadir cosas adicionales a esa celda. Queríamos tal vez hacerlo interactivo o queríamos añadir un icono en la celda o lo que sea que sea. Queremos tener un control total sobre ello. Y lo hacemos porque simplemente estamos metiendo HTML, o si quieres, un componente dentro de ese elemento div HTML que es la celda en sí. Y ahí es donde entra en juego el renderizador de celdas. Y podemos usar un renderizador de celdas con una función de callback y también podemos registrar componentes personalizados con renderizadores de celdas y luego renderizar un componente dentro de cada celda si queremos. Así que el renderizador de celdas para una definición de columna básicamente acepta los siguientes valores. Podemos proporcionar undefined, que renderizará el valor de la celda tal como está usando ese texto contenido. Así que podemos anular eso. Así que digamos que teníamos una definición de columna por defecto para un renderizador de celdas personalizado.

Pero queríamos anular eso por cualquier motivo. Podríamos simplemente establecer el renderizador de celda en indefinido y no utilizará ningún renderizador de celda heredado. Simplemente volverá al comportamiento predeterminado de introducir el valor en el contenido del texto, estableciendo el contenido del texto igual a ese valor. También podemos especificar una cadena que haga referencia a un renderizador de celda registrado, donde estás utilizando como un componente, o podemos proporcionar una referencia a un componente en sí.

Así que vamos a echar un vistazo a un par de estos. Así que echemos un vistazo a la función de renderizador de celda. 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, de nuevo, esto no es una función de React. Es simplemente una función de JS vainilla que es invocada por AG Grid que devuelve ya sea HTML cadena que se establece como la propiedad HTML interna en el elemento dev, que es la celda, o HTML objeto de elemento, JavaScript vainilla HTML elemento, que luego se establece como el hijo, creo, en dentro de ese div es como el elemento hijo.

Cuando usamos una función de renderizador de celda, va a ser invocada por AG Grid, y va a ser invocada con un objeto de parámetros de renderizador de celda. Y aquí es cómo se ve esa interfaz. Así que de nuevo, se llama con la API y la definición de la columna, la columna, la columna API. Obtengo los datos, el nodo, y el valor. Así que echemos un vistazo a un ejemplo de una función de renderizador de celda. En este ejemplo, estoy mirando la columna de precio, y quiero hacer una renderización personalizada. En este ejemplo muy forzado, todo lo que estoy haciendo es formatear, pero he tomado el mismo código del formateador de valor y lo he metido en el renderizador de celda, y podemos ver que esto va a funcionar, porque esto va a devolver una cadena que luego va a ser introducida en el renderizador de celda. También puedo devolver HTML, y también puedo devolver un objeto HTML. Así que creo que lo que queremos hacer aquí, esto... Sí, está bien. Vamos a pasar por este ejercicio rápido juntos, porque creo que este ejemplo que mostré aquí, muestra cómo podemos usar simplemente el renderizador de celda, y se llama. Pero casi parece un formateador, así que quiero mostrarte cómo podemos devolver realmente una cadena HTML. Así que vamos a pasar por este ejercicio juntos. Déjame mostrarte esto.

Así que lo que queremos hacer es queremos añadir un renderizador de celda a la columna de fecha de pedido. Vamos a comprobar el valor si es indefinido, y si no, vamos a devolver algo de JSX que incluye un icono de material junto a la cadena de fecha formateada, y así voy a renderizar eso usando esto. En realidad, déjame adelantarme y conseguir todo el pedazo aquí, así que no tienes que ver me lo escribo todo. Muy bien, así que vamos a la fecha de pedido. ¿Dónde está esa fecha de pedido? Aquí vamos. Así que vamos a decir para el renderizador de celda, quiero usar esta función de callback que va a devolver JSX. Voy a decir si no params.data, entonces simplemente voy a devolver, creo, ¿es nulo o una cadena? Olvidé. Sí, puedes devolver nulo. Creo que puedes devolver una cadena también, o quizás un fragmento. En este caso, lo que quiero hacer es quiero devolver algo de JSX, y voy a establecer un div contenedor, y luego dentro de eso quiero tener un icono de material, y luego aquí estoy va a formatear la fecha. Así que lo que he hecho, podría haber usado simplemente un formateador de celda. Todo lo que quería hacer era formatear la fecha, pero en este caso, quería mostrar algo adicional HTML. Quería mostrar un icono al lado de eso. Al lado de eso. Ahora si vengo, echo un vistazo a eso, puedo ver aquí que tengo mi icono, y tengo mi fecha de pedido. También podría añadir quizás algo de espacio aquí, y darle como un espacio de 10 píxeles, 20 píxeles, y ahora tenemos un poco de espacio entre los dos. Lo bueno del renderizador de celda es que puedo controlar todo lo que está dentro de esa celda. Es sólo un elemento HTML, pero ahora tengo un control total sobre él. Puedo hacer esto interactivo. Puedo añadir oyentes de eventos, todo tipo de cosas aquí. Si entramos y echamos un vistazo a esto, puedes ver aquí, déjame aumentar el tamaño de mis herramientas de desarrollo un poco. Así que aquí está, es un poco difícil porque está todo envuelto y cosas así, pero aquí está el div de la celda real. Normalmente, si miramos, por ejemplo, si miramos el elemento anterior aquí, podemos ver que esto sólo tiene el valor del número de cuenta aquí. Podemos ver el número de cuenta, y está simplemente establecido, el AG grid en este div ha establecido el texto contenido para ser ese valor que está opcionalmente formateado, que hemos conectado. Pero en este caso, hemos proporcionado el HTML, y en este caso, el JSX, que va a ser renderizado dentro de este elemento div. Así que en lugar de sólo contenido de texto, de nuevo, puedo hacer lo que quiera aquí, ¿verdad? Así que tengo este div con algo de estilo en él. Tengo mi icono y mi fecha. Y así podemos ver que esto se muestra muy bien dentro de aquí. Así que los renderizadores de celdas son realmente poderosos en que si quiero hacer una celda interactiva, quiero realmente diseñar. Quiero hacer lo que quiera dentro de la celda. Ahí es donde puedo usar un renderizador de celda para tener un control total sobre él. Así que de nuevo, aquí está la solución. Echa un vistazo a eso si quieres. Pero eso nos lleva al final del renderizador de celda. Déjame saber si tienes alguna pregunta. Voy a entrar en la edición de celdas en el último poco aquí. OK. Así que acabamos de hacer, primero, nuestras definiciones de columna. Hablamos de la ordenación y el filtrado y los filtros proporcionados y todo ese tipo de cosas. Luego miramos el pipeline de renderización de celdas. Hablamos del getter de valor, el formateador de valor, y el propio renderizador de celda. Y ahora vamos a echar un vistazo a la edición de celdas. Rápido, tenemos una pregunta. Quiero establecer un nivel de profundidad de columna.

Sí, excelente pregunta. Así es donde puedes usar un renderizador de celdas. Y vas a usar un renderizador de celdas que se va a invocar con esos parámetros. Tienes acceso a los data y al valor. Y luego puedes configurar eso. Configúralo como un Flexbox. Configúralo en columna, visualización y luego puedes configurarlo en una columna y luego puedes hacer una profundidad de columna. Simplemente usa Flexbox, configúralo en columna, visualización, flex y configura 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, que a medida que empiezas a entrar en la altura de una fila, puedes desbordar. Y tienes que hacer un poco de CSS allí, ¿verdad? Así que ahora tienes que lidiar con quizás la altura de cada fila si vas a expandir eso para ser un poco más alto o algo así. Y puedes hacer eso con AAPDgrid. Definitivamente revisa los docs. OK. Así que echemos un vistazo a la edición de celdas. Así que habilitamos la edición de celdas utilizando la propiedad editable en la definición de la columna. Y lo establecemos en un Booleano para habilitar o deshabilitar la edición del valor de la celda. Establecemos el editable en una función, si queremos, para determinar si la edición está habilitada. Así que podemos establecerlo en un simple Booleano, o podemos proporcionar una función de devolución de llamada que devuelve ese Booleano que determina si la celda puede ser editada o no. Y podrías hacer eso como si tuvieras 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 por defecto 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. Así que, de manera programática, puedes establecer si una celda es editable o no usando esa API de la cuadrícula.

Así que vamos a habilitar la edición de celdas utilizando la definición de la columna. Así que bastante simple aquí. Sólo 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. Así que una vez que tengo un control sobre la API de la cuadrícula, que puedes obtener ya sea cuando la cuadrícula está lista a través del componente aggrid-react que será invocado y te proporcionará una referencia a la API de la cuadrícula. O en algunos de estos otros casos donde hemos visto que se nos proporciona como el objeto de parámetros, se nos proporciona una instancia, una referencia a esa API de la cuadrícula. Podemos llamar al método de inicio de edición de celda. Y le proporcionamos el índice de la fila así como la clave de la columna. Así que notarás que anteriormente en esta columna especificé la ID de la columna. Así que la ID de la columna es generada por aggrid por defecto, si no la proporcionas. De lo contrario, puedes proporcionar explícitamente la ID de la columna. Y luego puedo usar eso cuando estoy para referenciar esa columna específica de manera programática cuando estoy editando una celda, o quiero empezar o parar la edición. Así que esto empezará a editar esa celda. Y luego en la API de la cuadrícula, también hay un método de parada de edición, que volverá al modo de vista de esa celda. Echemos un vistazo a algunos de los editores de celdas proporcionados. Así que aggrid proporciona lo siguiente, muy similar a cuando miramos el filtrado. Así que tienes un editor de texto, un editor de texto grande, un editor de fecha, un editor de selección. Y también hay un editor de selección enriquecido que requiere una licencia enterprise. Así que el editor de texto es el predeterminado. Así que cuando usamos la propiedad de definición de columna del editor de celdas para especificar un editor de celdas proporcionado o personalizado, podemos usar el editor de celdas de texto. También podemos especificar el editor de texto grande. Así que estos son muy similares a lo que hicimos con el filtrado, donde teníamos como agnumber column filter, o agtext column filter. Lo mismo es cierto aquí para la propiedad del editor de celdas en la definición de la columna. Puedo establecer esta propiedad del editor de celdas. Y aquí estoy diciendo, quiero permitir la edición de esta celda. Bueno, he permitido la edición a través del editable, y lo he establecido en el valor booleano verdadero. Y luego para el editor de celdas, he dicho, quiero usar este editor de celdas. Si no proporciono una propiedad de editor de celdas, por defecto, usará el editor de celdas de texto. Aquí estoy usando el editor de texto grande, que mostrará el valor, que mostrará el valor en una pequeña ventana emergente, encima de la, ubicada encima de, o debajo de la celda misma. Así que en lugar de la edición en línea, si quieres, hace una separación grande como una ventana emergente. De nuevo, podrías controlar el tamaño y la visualización de esto con CSS y estas cosas. Pero luego eso permite al usuario introducir más contenido, si necesita hacerlo. También podemos especificar el editor de celdas de selección incorporado. Y como dije, también hay un editor de selección enriquecido que requiere una licencia enterprise. Genial. Vamos a saltar a un challenge de nuevo. Abramos esto en StackBlitz. Queremos habilitar la edición de celdas para la columna de nombre de cliente. Y vamos a seguir adelante y usar el editor de texto grande para la columna de número de cuenta.

Buena pregunta. Así que tenemos una pregunta en el chat. ¿La edición de celdas también cambia la fecha en el array de productos? Sí, por defecto, el editor de celdas va a mutar el valor. Sí, y vamos a entrar en la persistencia aquí al final. Y voy a hacer referencia a algunas opciones que tienes en términos de persistir los valores. Y hablaremos de, puedes poner la cuadrícula en un, si no en modo de sólo lectura, como un modo específico, llegaremos a eso, te lo señalaré, donde puedes prevenir la mutación de esos data. Pero también hay una función de devolución de llamada. Así que cuando los data cambian, te notifican sobre ello. Y luego puedes persistir eso, sabes, a tu back end o lo que sea necesario. Y así, sí. Así que cuando haces la edición de celdas, va a cambiar los data en el array de productos, va a mutar esos data. Puedes usar redux, eso es lo tuyo. Hay un par de soluciones diferentes en torno a esto. Así que AG grid es como, te deja a ti hacer la elección en términos de cómo quieres manejar la persistencia de esos data y si quieres que se muten o no. Y una vez que hayas terminado con el ejercicio, estás listo para seguir adelante. Sólo dame un pulgar hacia arriba en el chat y empezaremos el ejercicio juntos. OK, tenemos otra pregunta. Veamos. ¿Hay alguna comprobación de validation incorporada realizada después de que una celda es editada? No creo que haya ninguna validation incorporada. Tipo, OK, para eso usamos un código diferente. Es sólo mostrar la edición en una celda. Correcto, sí, sí. Para el tipo de cosas de persistencia eso es un código diferente. Llegaremos a eso al final de esto.

Y no tenemos ningún ejemplo concreto para mostrarles en este masterclass en particular para la persistencia de esos valores. Pero puedes imaginar cómo lo usarías. Sabes, podrías decir, OK, tenemos una celda aquí que está persistiendo y vamos a Pero puedes imaginar cómo usarías esas funciones de devolución de llamada para conectar esa persistencia, sabes, a tu back end o lo que sea. Sí, los números serán tratados como cadenas por el editor. Sí, estamos usando el editor de celdas de texto. Eso es correcto. Si volvemos un poco en nuestras diapositivas aquí. Sí, no hay un editor de números. Hay un editor de fecha y un editor de selección, pero no un editor de números. Así que cuando obtienes ese cambio de valor, es cuando podrías formatearlo o parsear eso como un número, cosas así. Sí, eso es exactamente correcto. Básicamente, meterá ese valor de nuevo como en el, mutará el valor, lo meterá, lo establecerá, y llamará a ese mismo pipeline después de que el valor haya cambiado. Correcto. Llamará al formateador y luego al renderizador de celdas. Bien, echemos un vistazo a nuestro ejemplo. Vamos a habilitar la edición de celdas en la columna de nombre del cliente. Así que bajemos aquí, nombre del cliente, tengo el filtro verdadero. Voy a hacer editable, establecer eso a 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 entrar. Así que si resalto, sabes, también puedo moverme con las flechas y creo que la tecla tabuladora tal vez. Oops, puedes moverte con la tecla tabuladora también, más o menos lo que esperarías en términos de capacidad de enfoque. Y luego si, si voy al 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 era también habilitar la edición para el número de cuenta, y vamos a usar un editor de texto grande. Así que vamos a venir aquí, establecer esto a verdadero, y luego ahora vamos a hacer celda editor AG, texto grande. Uh, olvidé el nombre de él, editor de texto grande, editor de texto grande, así editor. Así que eso es lo que son los números de cuenta ahora. Y 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. Versus esto, sabes, no sé si tal vez hice algo en el estilo. Um, uh, porque normalmente esto es lo que obtengo. ¿Haces un editor de texto grande? Eso me parece correcto. Normalmente, tal vez es este tema que cambié, el, el tema de la corte es, es es bastante nuevo y me gusta. Um, oops, no quería hacer eso. Veamos. Sí. El, el editor de texto grande, tal vez es sólo porque esto es una cadena. No está desbordando correctamente. Um, tal vez hay una mejor demo en el sitio web de AG Grid de esto, pero esto es normalmente, sabes, normalmente aparece como un pop-up más grande, um, aquí. Um, sí, de todos modos. Uh, supongo que lo bueno es que podemos, el aprendizaje aquí es que tenemos alguna opción en torno al editor de celdas de texto proporcionado y tenemos el en línea versus el grande, um, y sí, aparece correctamente para ti. ¿No es eso raro? Eso no me parece correcto. No sé qué está pasando, pero está bien. Me alegro de que te haya funcionado, Patrick. Sí. Veo la celda bien. Tal vez refrescar. Sí. Raro. ¿Eh? Sí. OK. Extraño. OK. Así que tenemos un par de editores de celdas. Um, aquí está nuestra solución. Oh, ¿sabes qué? Se me olvidó. Eso es. Se me olvidó poner el pop-up a verdadero. Por eso. Sí. Vamos a abrir esta, esta solución rápidamente. Echaremos un vistazo a esto. Uh, dejemos que arranque. Y eso vendrá aquí. Deberíamos ver eso. Tengo el pop-up establecido a verdadero. Eso es lo que me faltaba. Mis disculpas. Así que ahora eso es mucho mejor. Así que ahora estoy diciendo, Hey, quiero que uses el editor de texto grande y quiero que lo pongas en un pop-up. Y ahora esto es obviamente puedes imaginar, digamos que tenías mucho, sabes, esto es sólo un número de cuenta, pero si tenías muchos data, estabas poniendo aquí ahora, obtengo como un área de texto completa, uh, y puedes editarlo, uh, de esa manera. Definitivamente. Definitivamente una experiencia de usuario mucho más agradable que la que estaba teniendo allí antes. Genial. OK. Echemos un vistazo al componente del 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 review. De nuevo, AG Grid funciona con todos ellos de serie y sólido, creo que ahora. Um, y así podemos construir un componente de editor de celdas personalizado.

Entonces, lo que queremos hacer es construir un componente de editor de celdas de color personalizado. Vamos a usar react por supuesto, y vamos a usar la entrada de color incorporada en el navegador. Así que antes de crear el componente, vamos a ver la API imperativa. Suena bien. Nos vemos. Gracias por asistir.

Vamos a utilizar la interfaz de API imperativa que establece el contrato de código entre nuestro componente personalizado en AG Grid. Y entonces voy a declarar una interfaz llamada el editor de celdas ojo, y voy a tener una función en eso llamada obtener valor. Eso va a devolver cualquier cosa, y el método obtener valor va a ser invocado después de la edición se completa para proporcionar el valor a la cuadrícula. Y eso tendrá sentido a medida que nos adentremos un poco más aquí. Así que vamos, vamos a echar un vistazo a la creación de esto.

Así que vamos a establecer la comunicación con AG Grid nos va a requerir construir un manejador imperativo del ref que es reenviado por AG Grid. Así que vamos a usar una función de ref reenviada. Y esta función de ref reenviada va a utilizar el uso del gancho de manejo imperativo, que devuelve eso, ¿cómo lo llamamos? Interfaz de editor de celdas ojo. Así que devuelve un objeto que cumple con esa interfaz. Y puedes ver que he proporcionado eso como un genérico de TypeScript aquí. También estoy usando el estado para el valor. Estoy obteniendo el valor de las propiedades que se pasan a esta función de editor de color, este componente. Y luego voy a devolver mi JSX.

Así que aquí tengo una entrada. Estoy usando la entrada de color incorporada proporcionada por mi navegador. Tengo el valor que está siendo la propiedad que viene de mi estado. Y luego en el cambio, voy a llamar a establecer valor y obtener el valor del selector de color. Pero tengo este manejador imperativo que va a ser utilizado por AG Grid para obtener realmente el valor de este componente. Así que vamos a crear un editor de celdas personalizado utilizando el selector de color del navegador. Así que un poco, vamos a llevar esto un poco más allá. Así que aquí tengo esa misma referencia adelante. Tengo mi valor. Y ahora tengo una referencia de entrada que estoy usando para tener el gancho de uso de ref. Y ese genérico de TypeScript va a ser el elemento de entrada de HTML. Y tengo mi ref establecido aquí. Tengo mi gancho de manejo imperativo que va a devolver un objeto con la propiedad obtener valor. Esa 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 de efecto inicial que va a ser notado que no hay profundidades. Y básicamente voy a decir, si tengo una referencia de entrada, adelante y enfócate en ella. Y eso hará que cuando el usuario comienza a editar la celda, inicialmente me enfocaré en la entrada, lo que hará que el navegador muestre el selector de color. Echemos un vistazo a este ejemplo en StackBlitz. Así que aquí está mi editor de color. Aquí está ese mismo código que acabamos de tener antes. Y si bajo y miro mi cuadrícula, ahora para mi color, puedes ver que para el editor de celdas, en lugar de usar uno de los editores de celdas proporcionados, estoy dando referencia a mi componente. Eso usa la referencia adelante. Y así tengo mi editor de color aquí. Y eso es lo que se va a usar como editor cuando el usuario comienza a editar esa particular celda. Y voy a usar ese obtener valor. Esto tiene que ser utilizado para como parte del contrato con AG Grid. Así que cuando la edición de celdas se detiene, invocará ese obtener valor para obtener realmente el valor para establecer eso como el valor para la celda en la cuadrícula. Echa un vistazo a la demostración de esto, pero ven a color. También estoy usando un renderizador de celdas personalizado, y tengo un renderizador de color aquí. Y si hago doble clic en esto, puedo ver que puedo entrar aquí y podría elegir un diferente color. Y ahora había escapado, lo siento. Es un poco la edición de color en el navegador nunca es genial. Así que ahora cuando presiono enter en lugar de escape, puedo ver que ahora he cambiado el valor para ser el hex para ese color particular. Y puedo hacer lo mismo aquí y tal vez cambiar esto a un bonito rosa caliente. Y ahora he cambiado el valor usando un editor de celdas personalizado. Así que también tengo un renderizador de celdas personalizado aquí. Si quieres echar un vistazo a eso, podemos entrar y echar un vistazo a nuestro renderizador de color. Y puedo ver que tengo un renderizador de celdas personalizado aquí. Y si hago clic en esto, eso es lo que voy a estar usando. Y aquí está nuestro renderizador de color, donde está devolviendo este JSX de este elemento dev. Y está especificando el color de fondo y una altura y anchura codificadas en duro para mostrar realmente el color en la cuadrícula misma. Así que tal vez este es el color. Esto sería más apropiado en el producto en lugar del nombre del cliente. Pero un ejemplo aquí de mostrar cómo se ve eso con un renderizador de celdas personalizado así como un editor de celdas personalizado. Y este editor de celdas aquí utiliza esa interfaz imperativa para proporcionar el valor de vuelta a AG Grid. Así que eso es bastante importante. No olvides esa parte cuando te metas en la construcción de estos editores de celdas. Sí, tengo algunas cosas adicionales que puedes leer aquí en el contenido del curso alrededor de lo que estamos haciendo. También hay un par de maneras diferentes de registrar esto, ya sea que sea un renderizador de celdas o un editor de celdas. De vuelta en nuestro ejemplo, notarás que estoy especificando una referencia al componente en sí, ¿verdad? a esa función. Y eso está muy bien en este ejemplo. Pero podrías preguntarte, bueno, ¿qué pasa si quiero tomar esta definición de columna y quiero que el usuario pueda cambiar las cosas. Como tal vez el usuario puede controlar cómo se muestra esa columna. Tal vez el orden de la columna o si está anclada o si la columna no está anclada. O si la columna se edita o no o algo así. Y tal vez quería persistir en algunas aplicaciones. Es el caso donde el requisito es persistir este estado de definición de columna en una database o en el back end. Y así que quieres que esto sea serializable. Y no podemos serializar estos. Y así que lo que podemos hacer es en lugar de referenciar o registrar estos por sólo una referencia a una función, podemos usar una definición de cadena y luego registrar esas cadenas a estos renderizadores o editores que nos permitirá serializar la definición de columna y luego persistir eso en nuestra database o tal vez almacenamiento local o algo así. Así que en esa instancia aquí, puedes ver que el editor de data. Eso, creo, es el fragmento de código equivocado. Vamos a corregir eso. Golpeé el botón de retroceso. Maldita sea. Este es el fragmento de código equivocado aquí, creo. Así que el editor de data componente, creo que necesito arreglar esto. Pido disculpas. Podemos abrir la documentation 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 como mi renderizador de color. Y así cuando entramos a ver si podemos sacar esto rápidamente. De acuerdo. Así que aquí debajo de la documentation podemos ver que podemos usar una referencia directa. Tal como hicimos aquí en el renderizador de celdas. Referenciamos 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 fíjate en estos componentes, que los 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 ese es el punto 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. Así que 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 manejador imperativo para devolver el valor capturado por el gancho useState y actualiza la definición de columna para el campo de color para que sea editable usando el editor de color como el editor de columna. Así que si abrimos esto en StackBlitz. Ven aquí. Ya he configurado mucho de esto para ti. Así que no te preocupes. No tienes que configurarlo todo. Ya he creado el reenvío y tengo mi editor de color. Se llamará con props. Así que lo que necesito que hagas es usar el valor de las props para establecer el valor inicial. Y luego vamos a implementar el getValue aquí. Y eso espero que refuerce un poco el aprendizaje aquí. No quiero que escribas mucho código, solo configurar la sintaxis en torno a esto para el reenvío. Eso te dará un buen ejemplo de cómo usar esto para construir un editor de celdas personalizado. 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 a la entrada. Así que aquí, simplemente voy a decir getValue. Y voy a devolver el valor de mi estado. Tengo todo esto configurado aquí 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 e 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 celdas que proporciona 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 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 extensibilidad. Así que puedes construir estos editores de celdas y estos renderizadores de celdas. Todos son solo componentes. Ya sabes, este editor de celdas se puede usar en cualquier otro lugar. Necesitas un editor de color en esta, ya sabes, en cualquier 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 data. Por defecto, el campo al que está vinculada la data de la fila 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 data de la fila. También hay una función de setter de valor que es invocada opcionalmente por AGGrid para establecer o persistir el valor en la fila data. También hay una API de cuadrícula en el evento cell value changed al que podemos conectar y escuchar eventos de cambio de valor. Y también hay un evento de solicitud de edición de celda que nos permite también conectarnos al flujo de edición de AGGrid donde podemos tener control sobre esa edición y persistir la data. Echemos un vistazo a la función de setter de valor. Así que en esta instancia, la data todavía es gestionada por la cuadrícula, lo que significa que los valores en la fila data todavía están siendo mutados, ¿verdad? Esto es algo que puedes pensar como el inverso de la función de obtención de valor. Será invocada por AGGrid con el objeto de parámetros de la función de setter de valor. Y necesitamos decirle a AGGrid al final de esta función, que necesitamos devolver true o false, y necesitamos decirle a AGGrid lo que queremos que haga. Si devolvemos true, estamos indicando 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 de setter 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 la data o algo antes de permitir que la data se establezca o mute en la data que está siendo gestionada por la cuadrícula. Así que digamos que si queremos tener algún tipo de verificación o validación o lo que sea, 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 el renderizado tampoco se activa. No invocará la función de obtención de valor, el formateador de valor o el renderizador de celdas. Echemos un vistazo a un ejemplo. Así que aquí, he establecido la propiedad editable en true y también he implementado un setter de valor. Y esta será una función que es invocada por AGGrid con el objeto de parámetros de la función de setter 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 quiero hacer nada. No quiero pasar por la tubería de renderizado de celdas, cambiar el valor y volver a hacerlo. No tiene sentido porque son iguales. El usuario comenzó a editar y escapó o lo que sea. Y así que los valores son los mismos. Así que simplemente voy a devolver false desde mi setter 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 saber a un componente padre. Así que podría llamar a una función de devolución de llamada, llamada on name change, que se invoca con la data.

Y luego voy a devolver true. Entonces, en este caso, voy a permitir que algún componente padre. Básicamente voy a decir, oye, 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 data. Y voy a devolver true porque todavía voy a permitir que AGGrid mute los data y luego vuelva a renderizar los data dentro de la cuadrícula. Pero esto me da la oportunidad de informar a ese componente padre de que el nombre del cliente ha cambiado y de ir a hacer algo. Tal vez disparar una solicitud a mi API o a mi back end 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 de nuevo, en este caso, los data están siendo gestionados por la cuadrícula. Y el evento on cell value change se emite cada vez que un valor de celda ha sido actualizado después de que el usuario ha completado la edición de ese valor. Una nota importante aquí es que on cell value changed es solo actualizado o invocado cuando o omitido, como quieras pensar en eso. Es un evento, así que supongo que diremos omitido. Ese evento on cell value changed se emite solo cuando el usuario ha actualizado a través de una edición de usuario a través de la UI, no si han pegado data desde el portapapeles. Y así hay portapapeles. Puedes usar como copiar y pegar con AgGrid. Y puedes permitir al usuario cambiar valores en la cuadrícula usando el portapapeles, pero eso no disparará el evento on cell value changed. Así que tenlo en cuenta. Así que vamos a usar la prop de enlace on cell value change en el componente AgGrid React. Y eso emitirá el objeto de evento de cambio de valor de celda con esos genéricos T data y T value. Y eso contendrá el valor antiguo y el nuevo valor. Así que echemos un vistazo rápido a un ejemplo de eso. Aquí tengo el enlace on cell value changed a esa prop. Y le voy a dar esa función de devolución de llamada, ese manejador que va a ser llamado con un evento de cambio de valor de celda. Y en este caso, solo estoy registrando algunos valores. Así que ahí está el valor antiguo y ahí está el nuevo valor. 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 data ya no están siendo gestionados por la cuadrícula. Aquí es donde podrías pensar en usar algo como Redux, donde tienes data inmutable. Así que la cuadrícula debe usar el modo de solo lectura. Y así te mostraré cómo hacer eso. Necesitamos poner la cuadrícula en modo de solo lectura. Y usaremos el evento on cell release. Y así que va a ser un evento de solicitud. Y usaremos el enlace de prop on cell edit request en el componente aggrid react. Y eso va a emitir el objeto de evento de solicitud de edición de celda. Y aquí está cómo se ve eso. Así que aquí voy a poner read only edit a true. De esa manera he entrado en este estado de data inmutable diciéndole a aggrid, no quiero que gestiones los data aquí. Lo tengo. Déjame hacerlo. Y luego voy a proporcionar el evento on cell edit request. O prop que va a ser llamado con el evento de solicitud de edición de celda. Y de nuevo, solo voy a registrar los valores dentro de aquí. Sí, pasé por eso.

Entonces podrías estar preguntándote, 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. Por lo tanto, necesitamos usar una estrategia para actualizar ese valor de celda. De nuevo, si volvemos aquí, 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 va a mutarlo por mí. Así que necesito implementar eso. Y hay un par de formas diferentes en las que podemos hacer eso. Podemos usar el on cell edit request junto con lo que se llama la función get row ID, que utiliza data inmutable. De nuevo, puedes usar algo como Redux. Puedes usar la API de la cuadrícula para establecer realmente los data de la fila. O también puedes usar lo que se llama transacciones, donde estás mutando trozos de data a través de la API de la cuadrícula en esos data de la cuadrícula. Así que la parte importante aquí es cuando estás usando este on cell edit request, aggrid ya no está gestionando los data. Tú lo estás, 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 esta masterclass, no me adentro en esos temas. Definitivamente puedes consultar los docs sobre el set row data y cómo implementas get row ID con data inmutable y cómo puedes desencadenar, creo, lo que llaman detección de cambios dentro de aggrid, que realmente desencadenará los data cuando ese inmutable, esa referencia de objeto cambia, desencadenará un cambio en la cuadrícula, que invocará la re-renderización de toda la fila.

Vale. Genial. Ya casi hemos terminado. Sólo nos quedan un par de minutos. Quiero ser consciente de nuestro tiempo aquí. Creo que puede que haya un par de ejercicios en esto o tal vez no. Así que voy a repasar algunas de las diferentes opciones para el formateo y la edición, o perdón, para el formateo y el estilo. Así que cuando se trata de formatear o estilizar aggrid, tienes un par de opciones diferentes. Así que aggrid viene con varios temas preconstruidos que puedes usar, y vamos a echar un vistazo a esos. Y esos temas son personalizables a través de variables CSS, y también hay un envoltorio CSS o SAS alrededor de eso si quieres usarlo. También puedes anular los estilos globales CSS. 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 un rayado de las filas. También puedes hacer un estilo personalizado de celdas específicas así como el estilo de las filas. Quiero señalar aquí rápidamente, siempre que estés anulando los estilos globales CSS, ten en cuenta de no cambiar lo siguiente, posición, desbordamiento o eventos de puntero, porque aggrid usa esos estilos CSS específicamente para lidiar con el desplazamiento y la posición y la interacción del usuario con la cuadrícula. Y si empiezas a meter mano en esos estilos CSS, vas a tener algunos problemas, así que considerate advertido. Echemos un vistazo al estilo de las celdas. El estilo de las celdas nos permite especificar los estilos de las celdas en la definición de la columna. Podemos añadir clases usando la propiedad cell class, y luego podemos añadir y eliminar clases usando la propiedad cell class rules. Así que aquí, podemos especificar el estilo de la celda para el nombre del cliente para la columna, para el nombre del cliente, y vamos a establecer el color y el color de fondo. Perdón. También podemos añadir una clase a estas celdas en particular. Así que en ese elemento div para cada celda en esa columna, ya sabes, cada fila en esa columna de arriba a abajo, vamos a añadir una clase a eso llamada customer-name, y luego podemos tener CSS asociado con esa clase para estilizar esos como queramos. También podemos proporcionar una función que se invoca con el objeto cell class params. De nuevo, cell class sólo añade clases y nunca las elimina. Así que tenlo en cuenta. Así que aquí, puedo decir, vale, 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 diferente para llamar la atención de eso para el usuario. La propiedad cell class rules es un mapeo de objeto de clases a funciones de predicado que se invocan con el objeto cell class params. Estas clases de celda se van a añadir o eliminar cada vez que el valor cambie. Así que cada vez que el valor cambie, similar a como value formatter, cada vez que el valor cambie, va a invocar estas funciones de predicado. Si devuelven verdadero, la celda, esta clase se aplica a ese elemento div, a esa celda. Si la función de predicado devuelve falso, esta clase se elimina de ese desarrollo. Así que si necesitas estar alternando encendido y apagado esas clases basadas en el valor, necesitas usar cell class rules, no sólo cell class. Si sólo usas cell class, sólo va a añadir esa clase. Nunca la va a eliminar. Así que es importante saberlo.

Sí. Sergio señala, sí, esto es genial para el tamaño de la columna, especialmente el ancho dinámico, dependiendo de los data que se estén extrayendo. Sí, absolutamente. Así que eso es el estilo de las celdas. Para el estilo de las filas, es muy similar. Tenemos un estilo de fila, es casi como un estilo en línea, ¿verdad? Podemos codificar en ese elemento div que contiene todas las columnas, o todas las celdas en esa fila. Vamos a aplicar un estilo a través de row style. Podemos usar get row style como una clase. Así que podemos decir, vale, voy a obtener row style. Usar get row style como una función de devolución de llamada para añadir estilos condicionalmente. Podemos usar row class para establecer las clases para todas las filas. Podemos obtener row class para una devolución de llamada para añadir clases condicionalmente. Y de nuevo, si necesitamos añadir y eliminar, podemos usar row class rules. Así que vamos a echar un vistazo a esos. Así que aquí, voy a configurar una función de devolución de llamada para get row class. Estoy codificando una row class en una constante. Tengo algunas reglas de row class, o puedo simplemente enlazar un objeto y establecer el row style. Aquí está lo que podrían parecer esas reglas de row class. De nuevo, esto es sólo un objeto donde la propiedad es la clase que se aplica condicionalmente basada en la función de predicado que va a ser invocada. Creo que es otra interfaz, tal vez como cell class rules, params, o algo así. Estoy desestructurando el objeto y obteniendo los data. Y estoy comprobando si el total es mayor que 100. Quiero que lo destaques, o tal vez en este caso, si la fecha es menor, o es un pedido antiguo, entonces destaca esto quizás con una clase de peligro. Y esos se alternarán porque estoy usando cell class rules. Si sólo uso una función de devolución de llamada llamada get row class, esto sólo va a añadir la clase row highlight o en este caso, nada. Sólo estoy devolviendo una cadena vacía. Puedo usar eso para aplicar condicionalmente clases al elemento de la fila, pero nunca eliminarlas. Este row highlight puede que nunca se elimine. Ahí es donde si necesitas añadir y eliminar clases en la fila, vas a usar eso row class rules.

Muy bien. Última sección, ¿qué hay de 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, simplemente a nivel global, puedes darle estilo. Creo que es agrow selected. Si entras y miras la demo, Sergio, en la docs, puedes ver para la selección de filas. Definitivamente puedes cambiar cuando una fila es seleccionada con un nombre de clase. La fila es seleccionada con un programa o con una casilla de verificación, algo así. Sabes, el usuario selecciona una fila, algo así como tal vez en tu bandeja de entrada en Gmail, seleccionas una fila, puedes resaltarla, puedes cambiar el color de fondo, el borde, todo ese tipo de cosas. Tienes control sobre ese elemento div. Y luego dentro están los divs para cada celda. Y así, agrid alternará una clase en eso y podrías simplemente seleccionar esa clase si quieres. Así que lo hace súper fácil. También tienen clases para pares e impares. Así que si quieres rayar tus filas o algo así, puedes seleccionar pares e impares. De hecho, si entras rápidamente, y miramos esto antes de llegar a nuestros temas. Aquí está mi fila. Puedes ver. Permíteme aumentar esto un poco para ti. Es un poco difícil de leer aquí. Pero puedes ver esto como agrow, puedo seleccionar esa clase. Es par, así que agrow even. Tiene algún nivel en él. Sí, hay un par de clases diferentes que puedo alternar allí y la selección es una de ellas.

Bueno, ya hemos pasado dos minutos. Voy a terminar esto rápidamente para que podamos cubrir todo el contenido. Esperemos que no nos hayamos pasado demasiado. Pero lo último de lo que queremos hablar son los temas que vienen con agrid. De serie, agrid proporciona varios temas. Tenemos el tema original de ballham. Es muy denso. Ha estado alrededor por un tiempo. Es muy bueno si estás jugando con muchos data porque es bastante denso. No hay mucho relleno y espacio en blanco. También está el design material de Google. Así que puedes tematizarlo de esa manera si quieres para las personas que ya lo están usando y están familiarizadas con él. Definitivamente no es denso, tiene mucho relleno, es muy espacioso. Fácil de usar pero no vas a conseguir mucha data en la pantalla si estás trabajando en, de nuevo, como una aplicación bancaria o algo donde estás mostrando como un libro mayor o algo así. Va a tener mucho espacio. El tema de cuarzo es el más nuevo. Es moderno, de alto contraste, espacioso. Es un bonito tema que han construido. Me gusta. Luego también tienen un tema alpino que sacaron hace unos años. Recomiendan usar el tema de cuarzo hoy en día. Todavía está disponible si quieres usar el alpino. Es muy similar. Moderno, bastante espacioso, tiene un buen relleno. Pero no optes por el tema alpino hoy en día. Opta por el tema de cuarzo si estás buscando algo que tenga ese aspecto. Y todos esos temas vienen con opciones de modo oscuro. Y también puedes personalizar mucho estos temas. Tienen una completa documentation para las variables CSS. Puedes aplicar reglas CSS y tienen un envoltorio SCSS o SAS que puedes usar. Las variables CSS se introdujeron en la versión 28. Así que tenlo en cuenta si tienes una instalación antigua. Antes de eso, puedes volver en su documentation a versiones anteriores y todavía puedes personalizar cosas. Es sólo un poco diferente porque no usaban variables CSS. Tenías que usar más de los mixins de SCSS y cosas así y variables. Sí. Así que aquí puedo apuntar al tema AGI cuarzo. Y aquí voy a sobrescribir como el color de fondo, el color de primer plano, y tal vez el color del borde. Y así puedo establecer esas variables CSS. Hay una lista completa de todas las opciones de variables CSS, una documentation de referencia disponible en el sitio web de AG grid. Así que revisa eso cuando estés usando estos y quieras empezar a tematizar cosas. También puedes básicamente tener como reglas CSS. Esto también te permite usar las variables CSS existentes y sobrescribir cosas a medida que apuntas un poco más adentro de la cuadrícula. Siempre quieres prefijarlo con el tema. Así que aquí voy a decir para el tema AG cuarzo, quiero sobrescribir los elementos de la celda del encabezado. Y quiero que el color de fondo y el borde estén estilizados apropiadamente. Y aquí puedo referenciar la variable CSS de color de fondo AG. Aquí hay un ejemplo de las filas pares. Tal vez quiero cambiar el estilo para las filas pares en eso. Finalmente, también tenemos un envoltorio SCSS para aquellos que prefieren este enfoque. Así que necesitas traer el envoltorio SCSS y tienes que incluir eso y configurar el tema y luego puedes empezar a sobrescribir cosas. De nuevo, este es un ejemplo muy pequeño. Definitivamente revisa la documentation si quieres usar SCSS. El enfoque recomendado es ciertamente usar variables CSS y reglas CSS para el estilo de la cuadrícula. Y con eso, llegamos al final del contenido. Y sólo nos pasamos un par de minutos. Así que gracias a todos por quedarse. Si tienen alguna pregunta, me quedaré un par de minutos más. Encantado de responder a cualquier pregunta. Si quieres contactar conmigo, puedes visitarnos en liveloveapp.com. Y puedes contactarnos si estás buscando ayuda con AG grid. Encantado de ayudar. Sólo contacta con nosotros. Hacemos muchas consultorías, muchas implementaciones realmente pesadas y complejas usando AG grid. Y también puedes seguirme en Twitter. Lo dejaré caer. Supongo que es x. No quiero el flujo de inicio de sesión. Bueno, lo dejaré directamente en el chat aquí. Así que con eso, gracias a todos por venir. Si tienen alguna pregunta, me quedaré.

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

¿Cuál era la pregunta de nuevo? Entonces, ¿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 la fila infinita? No sé si ha habido alguna mejora en la última versión importante en esto. Lo bueno es que la fila infinita está en la edición community. Así que tiene licencia MIT. Puedes usarlo. Básicamente, es el modelo de fila del lado del cliente, pero con fragmentación, eso es lo que yo llamaría, o bloqueo, ¿verdad? Donde bloqueas los 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. Aún así, lo llaman virtualización. Creo que es una buena palabra para describirlo. Pero no estoy al tanto, creo que la respuesta a tu pregunta específicamente, no estoy al tanto de ningún cambio importante en el modelo de fila infinita en la última versión. De acuerdo. Sí, la fila infinita es como un híbrido. Es como medio modelo de fila del lado del cliente, medio modelo de fila del lado del servidor, y luego tienes que configurar esta fuente de datos. Y la fuente de datos es una clase u objeto que tiene estas funciones de devolución de llamada que se llaman en esta interfaz. Comprometiéndose a realizar 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 demás. Es como un compromiso en eso. Sí. Sí, lo es. Y, ya sabes, mientras me desplazo hacia abajo, puedes ver algunas filas en blanco mientras me desplazo muy rápido. No sé si se muestra 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 usado el modelo de fila infinita en el pasado. Sí. Y creo que todavía es asíncrono en el sentido de que tienes esta devolución de llamada de éxito o devolución de llamada de fallo. Si tuviera que ser crítico con la API, preferiría que fuera realmente una promesa basada y verdaderamente asíncrona. Pero tienes la capacidad de usar el modelo de fila infinita para obtener data de forma asíncrona para un bloque dado y luego llamar a esta devolución de llamada cuando sea exitoso. Sí, siempre con el objetivo del rendimiento, ya sabes, porque cuando tienes tantas, 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í, solo estoy comprobando si hay alguna, pero es, ya sabes, hay muchas cosas personalizadas que se hacen al desarrollar y, ya sabes, con la versión community, no sé si la versión premium o la versión enterprise tienen 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 obtenciones asíncronas de data. Y hay muchas estrategias, puedes comenzar a obtener data de forma previa, todo tipo de cosas para intentar que sea más eficiente en cuanto al rendimiento. Pero aún así, estás haciendo muchas cosas entre el backend y el frontend, como ir y obtener data. Y puedes controlar el tamaño del bloque, puedes establecer el tamaño del bloque. Sí, exactamente. Sí, exactamente. Hay algunas propiedades que puedes establecer, por ejemplo, exactamente, hay cien filas o 150 filas por fragmentos o algo así, y depende de los requisitos del usuario. Sí. Totalmente, sí, de acuerdo. Sí. Muchas gracias, Bryan. Y ha sido genial refrescar la memoria. Sí. Genial, hombre, un gusto 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. He trabajado, hay una empresa llamada SaberSim, hacen, es algo de Estados Unidos. No estoy seguro de dónde te encuentras, Christopher, pero hacen, hacen, es un optimizador de apuestas deportivas. Optimizador, y utilizan mucho AG grid y utilizan fuentes de datos de Firebase sin duda. Y así que no creo que esté revelando nada confidencial. Lo 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. Así que están utilizando Firebase con Angular. Así que están utilizando mucho RxJS para la vinculación de data y cosas así. Y así obtienes esa data de Firebase que se transmite 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 en fin, no importa. Hay un proyecto llamado AngularFire, que no he utilizado en un tiempo, pero proporciona una especie de capa de compatibilidad de RxJS alrededor del SDK de Firebase JavaScript que te permite usar más fácilmente RxJS para transmitir data de forma asíncrona en tu aplicación. Y todo eso para decirte que definitivamente puedes transmitir data a AG grid desde Firebase, ya sea que estés utilizando solo JavaScript básico en el SDK de Firebase JavaScript, o si estás utilizando algo más sofisticado como RxJS. Por supuesto, hay otras bibliotecas, no tienes que usar RxJS, pero RxJS en Angular está cerca del metal. Y así puedes hacerlo, simplemente funciona bien junto con Firebase. Firebase AngularFire, que nuevamente es solo una especie de envoltorio de RxJS, por así decirlo, alrededor o proporciona alguna funcionalidad de RxJS alrededor de las API de Firebase JavaScript que permite transmitir data de forma asíncrona a AG grid. Así que 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 realmente bien. Y como dije, no estoy promocionando a nadie, 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í. Esto es AG grid aquí en esta imagen. No se ve exactamente así. Pero esta es una cuadrícula que han construido y ofrece muchas funcionalidades porque estás lidiando con toneladas de data si te gustan los deportes y todas estas cosas con proyecciones y todo eso. Y sí, puedes optimizar algunas de tus cosas en eso. Y sí, gran parte de esta data proviene de un backend 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 data. Utilizan Firebase para todo eso, y funciona muy rápido y muy bien. Puedes transmitir data, 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 salga bien. Gracias a todos.