Comenzando con AG Grid y React: La mejor cuadrícula de JavaScript en el mundo

Muy bien, como dije, bienvenidos al masterclass. Hoy vamos a aprender sobre HP Grid como parte de la Conferencia Avanzada de React. Mi nombre es Bryan Love y Mike y yo somos cofundadores de una consultoría llamada Live Love App. Ambos somos Expertos en Desarrollo de Google y Embajadores de Cypress y nos gusta contribuir al código abierto. ¿Hay algo que quieras añadir, Mike? Sé que también te presenté.

No, solo soy Mike Ryan, también de Portland. Ambos estamos muy involucrados en el código abierto, aunque principalmente en el espacio de Angular y el espacio de A-G grid. Vamos a hacer una breve introducción, solo para asegurarnos de que todos estemos en la misma página aquí. Todos estamos cumpliendo y nos regimos por el código de conducta. Si no lo has revisado, está en el sitio web de la Conferencia Avanzada de React. Desplázate hasta el final en el pie de página y verás un enlace al código de conducta. Así que por favor, ten en cuenta eso y seamos amables entre todos durante las próximas horas y pasemos un buen rato. Tomaremos un descanso cada hora. Este es un masterclass de tres horas. Tenemos mucho contenido, muchos ejercicios prácticos para todos, pero queremos asegurarnos de tomar un descanso, darte la oportunidad de alejarte, tomar algo para beber, estirarte. También ayuda en el proceso de aprendizaje, en lugar de estar sentado frente a una computadora durante tres horas seguidas. Y si tienes alguna pregunta, Mike y yo estamos aquí para responder cualquier pregunta que tengas. Así que adelante y haz esas preguntas en el chat o simplemente levanta la mano y avísanos que tienes una pregunta.

Los requisitos previos para este masterclass son bastante sencillos. Solo necesitamos asegurarnos de que todos conozcamos y tengamos un poco de comprensión sobre JavaScript y TypeScript, y también algo básico de React.

Como mencioné anteriormente, AG Grid es la mejor cuadrícula JavaScript del mundo. Esa es un poco su lema. Puedes visitar su sitio web en ag-grid.com y obtener más información sobre AG Grid. Tienen una excelente documentación allí, con muchos ejemplos geniales, etc. Entonces, es posible que te preguntes qué hace que AG Grid sea tan genial. Y en mi opinión, creo que realmente se reduce a tres cosas.

En primer lugar, está el rendimiento de AG Grid. AG Grid es realmente rápido y está muy bien optimizado para manejar grandes cantidades de datos que deseas colocar dentro de una cuadrícula en el DOM. Realiza todo tipo de virtualización de columnas y filas para asegurarse de que no, ralentice la velocidad de fotogramas de tu aplicación. Asegúrate de obtener un rendimiento realmente bueno en tu aplicación web.

Lo siguiente que me gusta mucho de AG Grid es su capacidad de extensión. Bueno, AG Grid viene con un montón de características de serie. Lo bueno de AG Grid es que, a través del uso de componentes, podemos extender AG Grid para personalizarlo según la aplicación que estemos construyendo. Entonces, si necesitamos que una celda en particular muestre algo realmente interesante o interactivo, podemos hacerlo. Y la capacidad de extensión de AG Grid es fantástica. Han construido el producto con un conjunto de funciones amplio, pero también con la capacidad de extensión, sabiendo que querrás personalizarlo según sea necesario.

Y finalmente, creo que AG Grid tiene una API ergonómica muy buena. Es una API muy extensa. La superficie es muy grande, pero una vez que te acostumbras, las convenciones de nomenclatura son bastante fáciles de entender e incluso adivinar. Entonces, la API ergonómica también hace que sea un gran producto.

Hoy vamos a utilizar nuestro sitio web, lidloveapp.com, cursos. Así que si lo abres en tu navegador, verás que tenemos algunos cursos listados allí. Técnicamente, esta es una página privada, pero creemos en la seguridad a través de la oscuridad. Así que siéntete libre de abrirlo y elegir el curso AG Grid con React que está en el medio, y eso es lo que vamos a utilizar esta mañana o esta tarde, según la hora que sea para ti. Y eso es lo que vamos a utilizar hoy para recorrer el contenido del curso. Así que todo el contenido del curso está en línea y disponible de forma gratuita, y estará disponible para ti después de este masterclass. Y todos nuestros ejercicios los haremos en línea también. Utilizaremos StackBlitz para hacer eso. Por lo tanto, no necesitas tener nada instalado, ni descargar AG Grid ni nada por el estilo. Lo haremos todo en el navegador. Dicho esto, adelante. Voy a dejar de compartir esta pantalla y voy a cambiar a Chrome. Abre lidloveapp.com/courses. Y cuando lo hagas, deberías ver este sitio web y luego desplázate hacia abajo y haz clic en Getting Started with AG Grid and React. Y aquí está nuestra tabla de contenidos para hoy. Como dije, este será un masterclass de tres horas, haremos un descanso cada hora para comenzar. Hablaremos sobre cómo instalar AG Grid con React. Muy sencillo, no lo haremos porque vamos a utilizar StackBlitz hoy, pero solo para que te familiarices con lo fácil que es comenzar con AG Grid. Luego hablaremos sobre la definición de columnas. Y veremos los datos de fila, el ordenamiento de filas, la definición de columna predeterminada y el filtrado. Luego veremos el renderizado de celdas y cómo funciona. Hablaremos sobre el proceso de renderizado de celdas. Veremos cómo utilizar los getters de valor personalizados, los formateadores de valor y una función de renderizado de celdas. Y luego pasaremos a la edición de celdas. Hablaremos sobre los editores de celdas proporcionados que vienen de serie con AG Grid. Luego veremos cómo puedes crear tu propio editor de celdas personalizado utilizando un componente y cómo podemos persistir los datos. Y finalmente, nos adentraremos en la estilización de AG Grid. AG Grid viene de serie con un par de temas diferentes, y puedes personalizar esos temas. Pero también podemos ir un paso más allá y hacer cosas como el estilo de celdas y el estilo de filas. Y veremos esos temas y cómo podemos personalizarlos.

¿Todos han ingresado al sitio web? Si tienen algún problema, mi copresentador, Mike, también está en el chat. También estamos utilizando Discord. Así que siéntanse libres de hacer preguntas en Discord. Estaremos monitoreando ambos. A veces es más fácil usar el chat mientras estamos en el masterclass juntos.

Muy bien, genial. Ustedes están sacrificando su sueño. ¿Crearemos nuestro propio CMS? No, no hoy. Solo vamos a utilizar AG Grid con StackBlitz. Y veremos ejemplos de cómo utilizar AG Grid. Así que comencemos de inmediato con la instalación de AG Grid con React. Muy bien, para comenzar, van a instalar dos paquetes. Está el paquete aggrid-community y el paquete o módulo aggrid-react. Pueden utilizar npm para instalarlos y guardarlos en su archivo de paquetes. Además, una vez que instalen AG Grid, también deben configurar algunos estilos inicialmente. Deben importar los archivos CSS base y de tema necesarios. En este ejemplo, los vamos a importar del módulo aggrid-community. Dentro de él, hay un directorio llamado styles y vamos a importar el archivo CSS de aggrid. En este ejemplo, estoy utilizando el tema Alpine. Pueden ver que estoy importando el archivo agthemealpine.css. Por supuesto, como mencioné antes, hablaremos sobre la estilización personalizada y los temas. Lo veremos más adelante en el curso. Hablaremos sobre cómo importar diferentes temas y personalizarlos. Así que la instalación de AG Grid es muy sencilla.

Lo siguiente que debemos hacer es comenzar a definir, decirle a AG Grid cómo queremos mostrar nuestros datos. En esta sección del curso, aprenderemos cómo definir columnas en AG Grid. Aprenderemos cómo definir el comportamiento de ordenamiento, el comportamiento de filtrado y el arrastrar, fijar y expandir de las columnas. No estoy seguro si llegaremos a eso, pero también es posible arrastrar una columna, fijar una columna y tener columnas que abarquen varias columnas también. Así que hablemos de inmediato. Hablemos de la definición de columna. Cada columna se define mediante un objeto ColumnDef. Esa es la interfaz en TypeScript. Y por defecto, las columnas se posicionan en el orden que coincide con la definición de columna especificada. Lo verán en un segundo. Cuando utilizamos AGGrid, le pasamos una matriz de definiciones de columna. Y el orden en esa matriz será el orden de las columnas que se mostrarán por defecto dentro de AGGrid. Veamos cómo se hace eso. En este ejemplo, tengo un componente de cuadrícula y voy a devolver este bloque de JSX. Voy a envolver la cuadrícula dentro de un div, y le daré a este div la clase AGThemeAlpine. De esta manera obtengo el tema de visualización de AGGrid. Y luego está mi componente AGGridReact, al que le proporcionaré la propiedad ColumnDefs, y la estableceré como igual a las definiciones de columna que tengo en mi componente. Ampliemos un poco eso. Pueden ver aquí que he definido mis definiciones de columna utilizando el gancho UseState. Y he especificado que esto será una matriz de objetos ColumnDef. Y luego hay un genérico en ese objeto ColumnDef llamado rowData. Y he definido ese genérico arriba, he definido ese tipo. Y luego voy a establecer ese valor inicial, y le proporcionaré dos objetos ColumnDef. Aquí, voy a decir que en la primera columna el nombre del encabezado será literalmente name, y luego la propiedad field va a vincular o decirle a AG Grid que en esta fila datos. Tengo una propiedad llamada name y quiero que tomes el valor de esa propiedad y lo coloques en esta columna. Así puedo ver eso en mis datos de fila. Tengo una propiedad name en mis datos de fila y voy a vincular eso y decirle a AG Grid que utilice ese campo o esa propiedad dentro de mis datos de fila para mostrar en esa columna cualquier valor que esté en ese objeto o en ese array de objetos que voy a utilizar para mis datos. Y luego a continuación voy a tener una columna adicional y voy a utilizar color en este caso. Y al igual que mostramos antes, vamos a crear nuestro componente AG Grid react. Y aquí están nuestras propiedades de definiciones de columna y vamos a proporcionar una referencia a mi estado de definiciones de columna. Como dije, en la forma más simple, una definición de columna especifica dos cosas. Primero, el nombre del encabezado que se mostrará como el encabezado de la columna y luego los campos del objeto de fila para obtener los datos. Esto también puede aceptar una referencia profunda dentro del objeto de datos de fila utilizando la notación de punto. Por ejemplo, si mis datos de fila son un objeto y tengo un usuario y dentro del usuario. Tengo una propiedad llamada cuenta. Eso es un objeto dentro de la cuenta. Tengo una propiedad llamada nombre que contiene el primer nombre del usuario. Entonces, en ese campo puedo decir, en lugar de simplemente decir como name o color como hicimos en el ejemplo anterior, también puedo utilizar una referencia profunda utilizando la notación de punto dentro de los datos de fila. Puedo decir, vamos a mostrar el valor de user.cuenta.nombre en ese campo. Quiero hacer una pequeña nota aquí de que vamos a utilizar TypeScript y no necesariamente tienes que utilizar TypeScript, pero recientemente AG Grid lanzó la versión 28 y mejoraron mucho su soporte de TypeScript en esta versión. Así que ahí es donde vamos a obtener cosas como los tipos genéricos. Y si no estás acostumbrado a TypeScript, no te preocupes demasiado por esto. Todavía es como JavaScript y definitivamente puedes seguirnos en el masterclass, pero quiero saber que especificamos la interfaz row data para el tipo genérico cuando utilizamos la interfaz ColumnDef. Así que esta interfaz ColumnDef tiene un genérico que dice, dime cómo va a ser el aspecto de los datos de fila porque no sé cómo van a ser. Y ahí es donde especificamos row data cuando usamos nuestro gancho UseState y esto se introdujo recientemente.

Puedo establecer en la versión 28 y habilitar una mejor verificación de tipos que puede ayudarte a detectar posibles regresiones, tiempo de compilación y cosas así. De acuerdo, eso es la definición de columna. Hasta ahora. Hemos creado una cuadrícula. Hemos llamado a dos columnas en nuestra cuadrícula, una columna de nombre y una columna de color. Las hemos vinculado a estas propiedades de campo dentro de nuestra fila data y estamos mostrando esa cuadrícula con el tema de alpine.

Ahora, vamos a seguir uniendo ese elemento que modelo mental y hablemos un poco sobre los datos de fila. En términos generales, hay varios modelos diferentes de datos de fila en AG Grid. Hay un modelo de fila del lado del cliente donde todos los datos están en el cliente y se los proporcionas a AG Grid y muestra todos esos datos a través del modelo de fila del lado del cliente. También tienen un modelo de fila que es un modelo de fila infinito algo similar a Facebook o Instagram donde a medida que te desplazas hacia abajo en la cuadrícula de datos. Se dividirá en bloques y luego desplazará infinitamente la cuadrícula para que pueda ser muy útil si tienes conjuntos de datos grandes y quieres permitir al usuario desplazarse por ellos con ese modelo de fila. Vas a definir cómo obtener esos datos, el tamaño de fragmentación, todo eso y obtendrás esos datos de un backend o algo así. También tienen un modelo de fila del lado del servidor que es proporcionado por Ajigar. Esta es una función enterprise. Todo lo que vamos a ver hoy está principalmente dentro de su Edición community, que tiene licencia MIT y es gratuita para usar, pero también tienen una Edición Enterprise que tienes que pagar, por supuesto, y el modelo de fila del lado del servidor es parte de eso. El modelo de fila del lado del servidor, como suena, vamos a paginar y obtener datos del servidor y enviarlos a Jigrid y también tienen este modelo de fila adicional llamado viewport que está un poco obsoleto en este momento. Así que no hablaremos mucho de eso. Pero ten en cuenta que existe hoy en día. Vamos a utilizar predominantemente el modelo de fila del lado del cliente. Una vez más, esta es la versión gratuita o con licencia MIT de Jigrid que admite el modelo de fila del lado del cliente.

Aquí tienes un ejemplo de nuestro modelo de fila o disculpa de nuestros data. Puedes ver aquí que antes teníamos nuestras definiciones de columna. Ahora hemos agregado una propiedad de datos de fila aquí useState y hemos dicho que esperamos que esto sea una matriz de objetos de datos de fila y vamos a inicializar eso con algunos datos que vamos a obtener de un archivo JSON solo con el propósito de facilitarlo en este curso. Voy a decir, adelante y establece esos datos de fila en nuestra lista de productos. Ahora que tenemos datos de fila dentro del componente Jigrid React, podemos especificar la propiedad de datos de fila y configurarla para usar nuestro estado de datos de fila. Vamos a seguir adelante y si estás siguiendo, haz clic en ese enlace para ver el ejemplo en StackBlitz. Estoy usando, notarás, puede que te preguntes, estoy alternando entre la versión del sitio web y las diapositivas. Si quieres seguir las diapositivas, si simplemente presionas la tecla de punto en tu teclado, eso mostrará la vista de diapositivas y puedes usar las flechas izquierda y derecha para moverte entre las diapositivas y luego la tecla de escape para salir de esa vista. Dicho esto, abre ese StackBlitz y echemos un vistazo. Tienen su componente correcto aquí, aquí vamos. Muy bien, podemos ver... Permíteme ocultarlo, para tener una vista un poco más amplia aquí. Aquí está una cuadrícula de AgGrid mostrada dentro de StackBlitz utilizando el tema Alpine, así que es un tema agradable. No muy denso, muy agradable. Y luego aquí están todos mis productos y el color del producto. Si te preguntas de dónde vienen los nombres de estos productos, todo esto fue generado usando Faker. Así que no sé qué son los Awesome Frozen Pants, pero vienen en color blanco, si los quieres. Así que siéntete libre de echarles un vistazo. No hay un botón de compra, así que tendrás que buscar en Google para tratar de encontrar esos Awesome Frozen Pants en algún otro sitio web. Mike, necesitamos tener un enlace de referencia en Amazon. Deberíamos estar ganando dinero aquí. Nos estamos perdiendo. Debería haber un botón de comprar ahora aquí mismo, añádeme a tu carrito. Sonji estaría comprando un hermoso jabón de algodón de color lima. Sabes, probablemente exista. De acuerdo, como mencioné, vamos a desglosar un poco las capas aquí. Aquí voy a importar la definición de columna de AG grid community. También estoy importando el componente AG grid react de AG grid react. Y luego tenemos este archivo Json de data nuevamente. Esto es solo para el propósito de este curso. Puedes obtener datos de cualquier lugar, ¿verdad? Y los vas a vincular como una propiedad en tu componente. Entonces eso podría venir de un componente padre o podrías obtener esos datos o lo que quieras hacer. En este caso, simplemente los estamos obteniendo de este archivo Json de data. Y si tienes curiosidad, puedes abrirlo y verás aquí que tiene un montón de datos, básicamente como un sitio web de compras, ya sabes, e-commerce. Así que hay clientes y los clientes tienen cuentas y luego hay productos y luego un pedido que podrías hacer con varios elementos de pedido o elementos de línea dentro de ese pedido. Entonces, volvamos a la cuadrícula. Ahí vamos. Esos son nuestros data y luego vamos a describir cómo se ven nuestros datos de fila. Vamos a decir, hey, nuestros datos de fila tienen una propiedad de nombre y una propiedad de color. Ambos son de tipo cadena. Aquí, voy a especificar el estado de definiciones de columna y lo vamos a vincular al componente AG grid React. Y luego aquí están nuestros datos de fila que traemos y vamos a utilizar los datos de productos de ese archivo JSON. Así que por eso estamos mostrando nuestros productos aquí a la derecha. Y finalmente vamos a devolver nuestro JSX con nuestro div que envuelve nuestro componente AG grid React donde tenemos nuestras propiedades de definiciones de columna y datos de fila vinculadas y configuradas. De acuerdo. No he estado monitoreando ninguna pregunta en el chat. Adelante y haz cualquier pregunta y sé que acabamos de darte mucha información y luego haremos un ejercicio en un minuto, pero solo queremos que comiences con este modelo mental. Así que tenemos una cuadrícula. Una cuadrícula tiene columnas. Tenemos que especificar cómo AG grid muestra esas columnas y cómo las muestra.

Hay un montón de propiedades dentro de esa definición de columna. Por ahora, solo estamos viendo dos de ellas. Estamos hablando de la propiedad del nombre del encabezado y la propiedad del campo. El nombre del encabezado simplemente le dice a AG Grid qué mostrar en ese encabezado y el campo es cómo le diremos a AG Grid dónde obtener los datos dentro de nuestro objeto de datos de fila. Luego usamos el estado de nuestros datos de fila y lo vinculamos todo en el componente AG Grid React, que muestra de manera ordenada todos los datos que le hemos proporcionado en las columnas que hemos especificado.

¿Alguna pregunta hasta ahora? Puedes hacerlas, déjame abrir el chat aquí. ¿Algún pregunta, Mike? Parece que no tenemos ninguna pregunta en el chat o en Discord. Nuevamente, si tienes alguna pregunta, no dudes en hacerla en cualquiera de esos lugares. Veo una pregunta aquí. Permíteme retroceder un poco. Creo que Charles pregunta si la notación de punto es segura en cuanto a tipos. Para el campo, no creo que lo sea. No lo creo. Así que si hiciera algo como account.name, creo que aún se compilaría, por lo que no es segura en cuanto a tipos. Aunque podría serlo. Solo necesitan mejorar su TypeScript, lo cual es un dolor. ¿Puedes personalizar cómo se fragmenta? Respondí eso, perfecto. Andre pregunta si maneja un array como valor del campo. ¿Todos mapean el array o unen los valores de un array? Parece que Tomas respondió tus preguntas. Con los formateadores y los value getters. Así que veremos eso y nos adentraremos en eso. Genial. Si tienes alguna otra pregunta, simplemente levanta la mano o escríbela en el chat y estaremos encantados de responder esas preguntas.

Muy bien. Ahora vamos a hacer un ejercicio. Queremos que participen activamente. Definitivamente te animamos a hacer los ejercicios. Así es como vas a reforzar lo que has aprendido. Si haces clic en el enlace para abrir el ejercicio de StackBlitz, verás básicamente lo que acabamos de hacer, ¿verdad? Vamos a empezar con lo más básico. Lo que quiero que hagas es especificar la definición de columna, el estado y vincularlo al componente AG Grid React, luego establecer el estado de los datos de fila. Y luego vamos a establecer ese valor inicial en los productos de datos, tal como lo hicimos antes. Y luego vincularlo al componente AG Grid React con esas propiedades. Así que te daremos un par de minutos para que lo resuelvas. Son las 29 después, así que te daremos unos cuatro o cinco minutos. Una vez que empieces con este ejercicio, avísanos si tienes alguna pregunta. Estaremos aquí para responder. Mike también dejó en el chat un enlace directo a este StackBlitz. Asegúrate de seguir el sitio web del curso. Y si tienes algún problema... Estoy sin sonido. Si tienes algún problema o alguna pregunta, avísanos. No creo que haya mencionado esto. Permíteme aclararlo también. Mike y yo no trabajamos para AGS. Nos gusta AGS. Somos amigos de ellos. Salimos con ellos en conferencias y cosas así. Pero no... No soy empleado de AGS ni nada por el estilo. Así que... Sabes, estamos en un espacio seguro aquí. Puedes tener opiniones sobre AGS. No estoy aquí para decirte que tienes que usar AGS. No gano dinero si compras AGS. Pero, ya sabes, nos pidieron que hiciéramos este taller. Así que estamos aquí para compartir lo que hemos aprendido sobre AG Grid con la comunidad. Mike, ¿tienes la capacidad de hacer un pulgar arriba en tu Zoom? Permíteme ver. Sí, la importación está bien, Muzzah, sí, seguro. Si obtienes el error, importa data desde... / .JSON, eso debería funcionar. Sí, vas a obtener algunos errores como ese en StackBlitz hoy. Oh, eso es correcto. Sí. Debería compilar o ejecutarse correctamente, pero StackBlitz es un poco caprichoso con algunas de las opciones del compilador de TypeScript. Sí. Sí, no sé si puedes verlo en la URL de StackBlitz, pero todos estos desafíos están alojados en GitHub utilizando una aplicación completa de React. Así que estaré encantado de dejar un enlace para que lo descargues y sigas así. Sí, eso sería genial. No tendrás ningún error de tipo si lo haces de esa manera, pero eso requerirá alguna configuración. Sí, puedes clonarlo, instalarlo y ejecutarlo localmente si quieres en lugar de usar StackBlitz. Es gracioso, te da este error que dice blah blah blah y es como, oh, no puedes ir a la documentación, blah blah blah, considera usar tu módulo JSON resuelto.

¿Adivina qué? Resolvimos el JSON modules aquí, establecido en true. Sabes, hemos sabido esto por un tiempo, Mike. ¿No hemos enviado un problema o una solicitud de extracción, verdad? No. Estamos esperando a que GitHub code space sea público y esté disponible para que podamos usarlo. Sí, tal vez no seamos buenos contribuyentes de código abierto si no les hemos dicho que está roto o les hemos ayudado a arreglarlo. Sí. Es solo, sí. Así que ignóralo, supongo. Te daremos dos minutos más para terminar este ejercicio. Mike, ¿quieres hacer las soluciones? Estaré encantado de hacer las soluciones. De acuerdo, veamos qué necesitas hacer para que esto funcione. Lo primero que tenemos que hacer es especificar nuestra llamada. Nuestras definiciones de columna. Y para hacer eso, voy a configurar aquí algunas definiciones de columna y voy a usar el hook useState. En realidad, no estamos cambiando las definiciones de columna en este componente. Por lo tanto, usar el hook useState es un poco excesivo en este caso, pero lo estamos haciendo para que sepas que, hey, en una aplicación react donde es posible que desees cambiar esas definiciones de columna, envolverlo en useState es la forma de hacerlo. Estamos usando TypeScript para esto, así que voy a especificar algunos tipos aquí. Por lo tanto, el estado de las definiciones de columna será esta interfaz de definición de columna que he importado de ag grid. Y especifica un tipo genérico data o un tipo genérico, que es el tipo de data que estamos mostrando en nuestra cuadrícula. Tengo una interfaz aquí llamada data de fila que voy a usar para eso. Una vez que tengo mi tipo configurado, puedo seguir adelante y configurar mis definiciones de columna. Por lo tanto, cada una necesita como mínimo un nombre y luego el campo al que quiero mostrarlo. Así que voy a configurar algunas definiciones de columna tanto para el campo de nombre como para el campo de color en mi data. Una vez que tengo mis definiciones de columna, estoy listo para seguir adelante y vincular eso a mi componente Ag grid react. Así que aquí voy a establecer la propiedad columnDefs como el estado de las definiciones de columna que he configurado. Con las columnas definidas, puedes ver a la derecha que estoy viendo los encabezados de nombre y color, pero también dice que se está cargando. Y eso se debe a que aún no he proporcionado ningún dato de fila a la cuadrícula. Así que voy a configurar mis datos de fila. Y para hacer eso, también voy a usar el hook useState aquí para configurar data.productos como los datos que quiero mostrar aquí. Y una vez que tengo mi estado configurado, puedo seguir adelante y vincular eso a la propiedad rowData del componente Ag grid react. Con eso hecho, todos los datos aparecen para mostrar los campos de nombre y color junto con esos campos particulares de los datos. No es necesario que el encabezado de Mostaza esté presente. Queremos el mismo nombre que el campo. Así es. Entonces, si no quiero tener un nombre y solo quiero mostrar esto como el campo, también funcionará. Pero nuevamente, recomiendo hacer eso solo para que no dependas de la capitalización automática que proviene de ag grid y puedas elegir un nombre amigable allí para tus campos. Así es. Sí. Lo hará como un. ¿Lo divide en cada uno, lo divide en camel upper camel case? No recuerdo. Los casos son como los casos de título. Sí. Así que si solo usas field, puedes hacer eso. Siempre pongo el nombre del encabezado solo para decir explícitamente, hey, esto es lo que quiero para el nombre del encabezado. Así que lo mantengo simple. Genial. Gracias, Mike. Lo aprecio, hombre. Sí. Sí, está bien, a continuación vamos a hablar sobre la ordenación de filas. Permíteme compartir mi pantalla. Bien. Muy bien, hablemos de cómo podemos habilitar la ordenación de filas. Podemos habilitar o deshabilitar la capacidad de ordenar una fila utilizando la propiedad sortable en el objeto Caldef. De forma predeterminada, sortable está configurado en false, y también podemos tener una ordenación personalizada que se puede realizar utilizando la propiedad comparator. Y proporcionas una función de ordenación similar a la diferencia de filas y la usaremos un poco más en este video. Proporcionamos una función de ordenación similar a array.prototype.sort. Por defecto, si estableces sortable en true, permitirá al usuario cambiar el orden de ordenación de una columna. Y de forma predeterminada, realizará una ordenación alfanumérica. Pero si tienes algún tipo de ordenación personalizada que necesitas hacer, ya sea que la ordenación deba basarse en algún otro valor, tal vez que no esté en el campo o algo así, también puedes proporcionar una propiedad comparator en la definición de columna y darle una función que se invocará de manera similar a array.prototype.sort. Y devolverás un número negativo, 0 o 1, según cómo quieras que se ordene. Veamos eso. En este ejemplo, lo que vamos a hacer es en la columna de nombre, vamos a agregar sortable y lo estableceremos en true. Eso es todo lo que tenemos que hacer y eso habilitará la ordenación para esa columna. De forma predeterminada, el orden de ordenación se establece primero en ascendente, luego en descendente y luego en ninguno. Y ninguno es cualquiera que sea el orden de los datos de fila dentro de los que vinculamos al componente AggridReact. También podemos especificar ese orden de ordenación si queremos, y podemos anular el comportamiento predeterminado. Entonces, en este ejemplo, voy a establecer sortable en true, y luego voy a establecer el orden de ordenación, y le proporcionamos un array, y podemos decirle a Aggrid que queremos que el orden de ordenación sea primero ascendente y luego descendente. Y no vamos a tener un valor predeterminado de null, donde el orden de ordenación se basa en el orden de los objetos en los datos de fila que estamos vinculando. También podemos tener ordenación de múltiples columnas.

Entonces, por... Directamente de fábrica, Aggrid cuenta con ordenación de múltiples columnas. Por lo tanto, puedes ordenar varias columnas manteniendo presionada la tecla de cambio y haciendo clic en los encabezados de columna, pero también podemos anular ese comportamiento, y podemos especificar la opción de tabla multisortkey para anular ese comportamiento. Si queremos que sea tal vez la tecla de control o la tecla de comando en Windows y Mac, podemos hacer eso. Y así es cómo podríamos hacerlo. Podemos decir multisortkey, y luego podemos establecerlo igual a CTRL, lo que le dirá a Aggrid que queremos que la tecla de multisorteo en lugar de ser la tecla de cambio sea la tecla de comando o control. Y ten en cuenta que estamos configurando eso como una opción de tabla, y ese es un término que Aggrid utiliza. Y esa opción de tabla estará justo en el componente Aggrid React. Vamos a tener una propiedad llamada multisortkey, y vamos a establecer ese valor.

Muy bien, hagamos otro ejercicio. Quiero que vayas y abras el desafío en StackBlitz, y vamos a agregar la propiedad de ordenación a una definición de columna. Y luego quiero que anules el orden de clasificación especificando el orden de clasificación en la propiedad de definición de columna. Y si quieres, adelante y anula la clave de ordenación de múltiples columnas especificando la propiedad multisortkey en el componente Aggrid React. Entonces vas a entrar aquí y dentro de uno de nuestros campos, o, perdón, una de nuestras columnas, adelante y establece esa propiedad de ordenación. Y luego cuando hagas clic en el encabezado de la columna, deberías poder ordenarla. Así que si pongo sortable, lo establezco en true, ahora puedo hacer clic, y puedes ver que va entre ascendente, descendente, y cuando vuelvo a hacer clic, vuelve a la configuración predeterminada. Y funciona. Vuelve a la configuración predeterminada de ese valor nulo. Donde el orden de clasificación se basa en el orden de los datos de la fila. Así que ve y ábrelo en StackBlitz, y ¿por qué no te tomas dos minutos y simplemente agregas esas propiedades a tu definición de columna? Si tienes alguna pregunta, ponla en el chat. ¿Hay alguna forma de indicarle que ordene ¿Hay alguna forma de indicarle que ordene al cargar? Hay una forma de hacerlo, estoy tratando de pensar. Digamos que queremos hacer una clasificación inicial. ¿Se llama simplemente clasificación inicial? Podría ser. Veamos. ¿Dónde estaría esto? ¿Quizás en las indicaciones de columna? Sí, clasificación inicial. Eso es al crear una nueva columna. Estoy tratando de pensar si hay clasificación o un comparador. Supongo que puedes ordenar tus datos, ya sabes. Tendría que verificar si la clasificación inicial. En realidad, si se ejecutará inicialmente. Siento que hay una forma de hacer esto. Se me está olvidando. Veamos. Seguiré buscando aquí arriba. Ordenación de filas. Habilitar ordenación. Tal vez lo envíe. Orden posterior. Habilitar ordenación personalizada. También puedo enviarlo a Sent. Habilitar ordenación personalizada de múltiples columnas. Hay una API. Probablemente podríamos llamar a una función para indicarle que ordene tan pronto como sepamos que tenemos nuestros datos. Hay aplicar estado de columna. Sí, esa es una buena pregunta. Podría ser solo clasificación inicial. No sé si eso realmente, si solo estableces la clasificación en ascendente, sí. Jason lo descubrió por nosotros. Ahí lo tienes. Es solo la propiedad de clasificación. Tiene sentido. Ah, así es. Esa es la diferencia, ahora lo recuerdo. Entonces está la propiedad de clasificación y luego la clasificación inicial, creo, solo funciona la primera vez o algo así. Se me olvidó. Así que en la API, hay algunas propiedades diferentes que serían como ancho y ancho inicial. Y el ancho inicial se aplicará cuando se cree la columna. Y luego el usuario puede cambiar el ancho de una columna. Pero si solo estableces el ancho, se fijará en 200 píxeles. Así que hay algunas diferencias de comportamiento entre, tendrán algunas propiedades como clasificación inicial, clasificación inicial, ancho, ancho inicial, que te dan cierta personalización de ese comportamiento. Sí, la clasificación inicial funciona. Sí. Y puedes usar clasificación.

Muy bien, genial. Mike, ¿quieres hacer el ejercicio? Mike Bordetti Sí, lo miro. Robert Antione Buenas preguntas. Me encanta. Asegurémonos de tener el correcto aquí. De acuerdo. Entonces, el desafío aquí es agregar la propiedad de ordenación a una definición de columna, y luego anular el orden de clasificación predeterminado especificando la propiedad de orden de clasificación y luego cambiar la clave de ordenación de múltiples columnas actualizando esa clave de ordenación múltiple. Así que este es un ejercicio bastante sencillo. Lo que voy a hacer aquí es que voy a hacer estos cambios en la columna de nombre. Así que voy a configurar esto aquí para que sea ordenable. Así que solo con hacer eso desde el principio cambiándolo a ordenable, obtengo estos controles de ordenación aquí. A partir de ahí, puedo establecer el orden de clasificación. Esto me permite controlar en qué orden se ordenaría esta columna. Así que voy a decir que se ordene ascendente primero y descendente segundo. Nuevamente, no hay muchos cambios aquí, pero puedes ver que controla ese orden de clasificación. Y finalmente, lo que voy a hacer es establecer esa clave de ordenación múltiple en el componente React aquí para que sea la tecla de control en su lugar. Entonces, nuevamente, no hay muchos cambios aquí. Solo quiero demostrar algo de la flexibilidad que tienes para controlar cómo se ordenan las columnas y cómo puedes interactuar con la cuadrícula, con AG grid.

Veamos si hay alguna pregunta aquí. ¿Podemos cambiar el ícono de ordenación? Esa es una pregunta para Brian. Esa es una gran pregunta. Entonces, hay dos formas de cambiar el ícono de ordenación si no te gusta. Por defecto, utilizan un paquete de íconos. No recuerdo si es Material o Font Awesome. Puedes consultar la documentación. Básicamente, tienen un paquete de íconos que usan, ¿verdad? Entonces, en realidad, puedes reemplazar ese paquete de íconos y proporcionar tus propios íconos. La otra forma en que puedes hacer esto, y lo he hecho en el pasado, es si tienes un encabezado que realmente quieres cambiar, tal vez quieras tener íconos personalizados o múltiples íconos diferentes que describan el estado o quieras resaltarlo por cualquier motivo o todo tipo de cosas. Una de las cosas que mencioné al principio fue la capacidad de extensión de Agt grid, y podrías crear un componente personalizado para ese encabezado. Entonces, donde dice nombre en el ejemplo de Mike, puedes crear un componente que se renderice dentro de allí, ¿verdad? Puedes hacer lo que quieras. Puedes, ya sabes, recibirás un objeto de parámetros que te dirá el orden de clasificación y todo tipo de cosas, y podrás usar eso para mostrar íconos personalizados o todo tipo de cosas que necesites hacer. Entonces, puedes crear un componente de encabezado personalizado que luego se renderice para ese encabezado y podrías cambiar el ícono de esa manera. Entonces, hay dos formas diferentes en las que abordaría eso. Depende de tu caso de uso y cuál sea más fácil, si quieres tener íconos personalizados.

Sí. Simplemente dice que ni siquiera puedo encontrar el ícono de ordenación, ¿dónde está? El ícono de ordenación aparece una vez que haces clic en el encabezado, una vez que habilitas la ordenación como lo hizo Mike al enviar ordenable a true, una vez que haces clic en ese encabezado, el nombre o el color, el encabezado de la columna, una vez que comienzas a cambiar la ordenación, verás un ícono como una flecha hacia arriba o una flecha hacia abajo. ¿Podemos usar el orden de clasificación ascendente, descendente, nulo para desactivar la ordenación haciendo clic tres veces en un encabezado? Correcto. Entonces, por defecto, el orden de clasificación es exactamente lo que tienes aquí. Ascendente, luego descendente, luego nulo. Y nulo es ese estado predeterminado. Cualquier orden que haya en tus datos de fila, o para desactivar la ordenación, por así decirlo. Sí, esa es la forma correcta. Sí. De acuerdo, genial. Cualquier otra pregunta, siéntete libre de hacerla en nuestro chat, estaré encantado de responder a ellas. Vamos a repasar esta próxima sección y luego haremos un descanso de 10 minutos, para que todos tengan la oportunidad de alejarse y hacer lo que necesiten hacer. Así que déjame compartir mi pantalla, dame un segundo. Compartir pantalla, Chrome. De acuerdo. Bien. Lo siguiente de lo que queremos hablar se llama la definición de columna predeterminada. En este punto, es posible que hayas notado que tenemos estos objetos de definición de columna, y estamos usando el gancho use date para establecerlos en un valor inicial. Y podríamos usar eso para anular esas definiciones de columna y actualizar la definición de columna en tiempo de ejecución. Pero también puedes imaginar que esto se vuelve bastante repetitivo. Si vas a poner sortable igual a true, digamos que tienes 20 columnas y quieres que todas sean ordenables, establecer sortable en true en los 20 objetos parece mucho trabajo adicional. Y por eso, aggrid tiene este concepto de una definición de columna predeterminada. Y la forma en que funciona es que podemos establecer esa definición de columna predeterminada y luego cada definición de columna hereda la definición de columna predeterminada. Y luego cada definición de columna específica puede anular esos valores predeterminados en una columna específica. Así que digamos que queremos que todas nuestras columnas sean ordenables de forma predeterminada, podríamos establecer sortable en true en nuestra definición de columna predeterminada. Y luego digamos que en una columna en particular, no queremos permitir que el usuario ordene esa columna. Entonces podríamos establecer sortable en false en esa definición de columna y anularía la predeterminada. Así que aquí tienes un ejemplo de eso. Voy a tener mi def llamado predeterminado. Y voy a establecer sortable en true. Y luego voy a establecer esa propiedad de def de columna predeterminada aquí en mi componente aggrid react. Y eso le dirá a aggrid que queremos usar, de forma predeterminada, todas las definiciones de columna deben heredar lo que hayamos puesto dentro de esta def de columna predeterminada. Y la escritura es la misma, sigue siendo una def de columna. Entonces, cualquier cosa que puedas poner en una definición de columna individual, puedes ponerla dentro de la definición de columna predeterminada. Cualquier cosa como, ya sabes, cuando entremos en algunas de estas, como formateadores de valor y obtenedores de valor y establecedores de valor y renderizadores de celdas y todo tipo de cualquier propiedad que esté ahí, puedes establecerla dentro de la def de columna predeterminada. De acuerdo. Vamos a hacer un ejercicio rápido sobre esto.

Y queremos que crees una nueva constante de definición de columna predeterminada en la función del componente. Será un objeto de tipo definición de columna, y luego el genérico TData será la fila data. Estableceremos la propiedad de ordenación en true. Luego, quiero que la vincules a la propiedad de definición de columna predeterminada en el componente AADG Grid de React. Esto hará que todas tus columnas sean ordenables. Luego, anula la propiedad de ordenación para una columna, solo para demostrar el modelo. Establece esa propiedad de ordenación en false para una de tus columnas. Así que hagamos esto durante unos minutos, y luego Mike nos mostrará la solución, y luego haremos un breve descanso. Si tienes alguna pregunta, no dudes en hacerla en el chat. Charles tiene una pregunta interesante. Dice: ¿Podemos confundir a nuestros usuarios enviando este orden ascendente, descendente, ascendente, ascendente, descendente? Es una gran pregunta. Nunca se me había ocurrido hacer eso. Nunca he recibido un requisito de usuario que diga que el orden de clasificación de la columna debe ser ascendente, descendente, ascendente, ascendente, descendente. Así que nunca lo he intentado. Tal vez podamos probarlo o ¿por qué no lo intentas tú y nos cuentas qué descubres? Creo que descubrirás que tus usuarios no estarán contentos y tu jefe de proyecto podría no estarlo. Pero me pregunto si es posible. Podría serlo. Es una gran pregunta. Muy bien, Mike. ¿Quieres mostrarnos la solución? Me encantaría.

De acuerdo. Hasta ahora, lo que hemos estado haciendo es cambiar estas definiciones de columna de manera individual para cada columna. Bueno, ¿qué pasa si queremos hacer que todas nuestras columnas sean ordenables? Bueno, podríamos establecer la propiedad ordenable en true para cada definición de columna, pero eso podría ser repetitivo, especialmente si tenemos muchas columnas en nuestra cuadrícula. Entonces, lo que queremos hacer aquí es usar las definiciones de columna predeterminadas para establecer algunas reglas básicas que se aplican a todas nuestras columnas. Si quiero configurar esto, simplemente voy a definir una constante aquí llamada defColumnaPredeterminada. Y nuevamente, esto será una definición de columna, al igual que las otras definiciones de columna, excepto que esta se aplicará a todas nuestras columnas. Así que voy a establecer algunas propiedades básicas aquí. Voy a decir que todas nuestras columnas deben ser ordenables. Una vez que tengo eso, puedo vincular la propiedad defColumnaPredeterminada en el componente A.G. Grid React. Ahora, todas mis columnas son ordenables. Y esto funciona muy bien. No tengo que especificar que la clave ordenable sea true para todas mis columnas. Pero si quiero desactivarlo ahora, por ejemplo, para el campo de color, puedo ir a la definición de columna del campo de color y anularlo para que sea false. Ahora, la columna de color ya no es ordenable. Estas configuraciones predeterminadas se aplican primero y luego las definiciones de columna pueden anular esas configuraciones predeterminadas. Perfecto. ¿Alguna pregunta? Voy a revisar el chat. Genial. Bien. Vamos a tomar un descanso. De acuerdo, volvamos a empezar. No compartí mi pantalla. Acabamos de terminar la definición de columna predeterminada y Mike hizo el ejercicio por nosotros. Ahora vamos a ver el filtrado.

De acuerdo, AGGrid viene con varios filtros proporcionados. El filtrado es cuando quiero filtrar valores en una columna. Es como si hiciera algo así en Excel o Google Sheets, y solo quieres que aparezcan ciertos valores, estás tratando de buscar valores en esa columna. Los filtros proporcionados son texto, número, fecha y conjunto, y el conjunto es una función de filtro exclusiva de enterprise.

De forma predeterminada, puedes hacer búsquedas o filtrar valores de columna basados en texto. Puedes buscar, puedes tener filtros para números. En el filtro de número, puedes hacer cosas como mayor que o menor que, agregar declaraciones de `y` y `o` juntas. Y lo mismo ocurre con las fechas. Puedes decir, hey, dame, ya sabes, pedidos que sean mayores a una determinada fecha, o pedidos que se realizaron en una fecha específica. El filtro de texto es el predeterminado, así que si solo pones filtro true, eso se establecerá como el filtro de texto.

Para habilitar el filtrado, vamos a establecer la propiedad de definición de columna de filtro en true, y por defecto es false. Por lo tanto, de fábrica, como ya hemos mostrado, no hay filtrado. Una vez que establezcas esa propiedad de definición de columna de filtro en true, entonces obtendrás la capacidad de filtrar. Echemos un vistazo al filtro de texto. Aquí tenemos nuestras definiciones de columna, y establecemos filtro en true, y el predeterminado es el filtro de texto. Eso habilitará el filtro de texto en la columna de nombre. También puedo proporcionar explícitamente el filtro de texto. Entonces, AG-Grid, todos sus filtros comienzan con AG y luego el nombre del filtro. Así que esto, puedo decir, hey, para el filtro, quiero que uses el filtro de columna de texto AG. Nuevamente, lo mismo se establece en true. Esa es una forma más explícita de establecer ese filtro. Sin embargo, el comportamiento es el mismo. También puedo usar el filtro de número proporcionado. En este caso, debo especificar el nombre completo del filtro. Entonces aquí, voy a decir para la columna de precio, quiero que permitas el filtrado de números. Por lo tanto, para la propiedad de filtro en el objeto de definición de columna, vamos a establecer eso en AG filtro de columna de número. Un poco largo, tal vez verboso, pero así es como funciona. Y si creas tus propios filtros, puedes usar tu propia convención de nomenclatura para evitar conflictos de nombres, al igual que lo hacen aquí. Y luego, aquí está cómo podemos hacer el filtro de fecha proporcionado. Así que, como probablemente adivinaste, vamos a establecer filtro en AG filtro de columna de fecha, y eso habilitará un filtro de fecha para esa columna. Y vamos a establecer eso en la columna de fecha de pedido, lo cual tiene sentido. Bien. Vamos a pasar directamente a un ejercicio. Entonces, nuevamente, solo para recapitular, tenemos esta propiedad de filtro en el objeto de definición de columna, la establecemos en true, se establece como el filtro de texto de forma predeterminada, y luego podemos usar los filtros de texto, número o fecha. Y así, en este ejemplo, lo que quiero que hagas, o el ejercicio, es que lo abras en Stackblitz, y luego para cada una de estas columnas, usemos un filtro proporcionado. Para el nombre del cliente, simplemente establece eso en true y usa el filtro de texto predeterminado. Para el número de cuenta, probablemente tenga sentido usar el filtro de número. Para la fecha de pedido, nuevamente, tiene sentido usar el filtro de fecha. Y luego, establece la columna de total para usar también el filtro de texto. Así que adelante y abre ese Stackblitz, deberías ver nuestros archivos. Inicia esto. Ahora tenemos nuestra cuadrícula, se ve un poco más realista. Tenemos los pedidos de nuestros clientes. Supongo que estos son cuentas. Tenemos el nombre del cliente, un número de cuenta, una fecha de pedido y el total o suma de su pedido. Y podemos ver aquí abajo, esto debería ser familiar. Tenemos nuestros encabezados y nuestros campos. Para los datos de la fila, tuvimos que hacer algunos cálculos aquí. Entonces, en lugar de simplemente establecerlo como un tipo de producto, o una matriz de productos, si quieres. Ahora, estamos uniendo muchas de esas diferentes piezas de datos dentro de ese archivo JSON. Entonces, recuerda en el archivo JSON, teníamos cosas como clientes y cuentas y elementos de pedido y pedidos. Esto es un poco complicado. Pero lo que estamos haciendo aquí es que estamos sumando el total de todos los elementos del pedido y obteniendo el precio del producto. Debido a que nuestra base de datos está estructurada como una base de datos relacional, ya sabes, estilo SQL, si quieres. Esto es casi como una consulta donde estamos uniendo todos esos datos para poder mostrar todo esto. Pero no te preocupes. Todo eso está hecho por ti. Así que no te preocupes por eso. Lo que queremos hacer es agregar esos filtros en nuestras definiciones de columna. Entonces, por qué no tomamos tres o cuatro minutos. Adelante y agrégalos. Si tienes alguna pregunta, ponla en el chat. Y luego, Mike nos mostrará la solución todos juntos. Y solo una corrección menor en este desafío, Brian, si no te importa volver al texto del desafío por un momento, dice que uses el filtro de texto proporcionado para la columna de total, pero en su lugar, utiliza el filtro de número. Sí, eso tiene sentido. Buena observación. Gracias, Charles, por señalar eso. Sí.

De acuerdo, lo que queremos hacer es agregar filtros a estas columnas aquí. La forma de hacerlo es especificar la propiedad de filtro en cada una de estas definiciones de columna. La definición de columna acepta una propiedad de filtro y la forma más sencilla de configurar un filtro es establecerla en true. Esto configurará un filtro basado en texto para esta columna. Ahora, si voy al nombre del cliente, verás que tengo este pequeño menú desplegable aquí y ahora puedo buscar un cliente específico por nombre utilizando este filtro basado en texto. Si quiero, puedo agregar varias cosas. Hay muchas características avanzadas en este filtro basado en texto. Pero no todas nuestras columnas van a necesitar un filtro basado en texto. Nuestro número de cuenta y nuestro total son números, y nuestra fecha de pedido es una fecha. AG Grid viene con diferentes filtros para esos tipos de datos. Por ejemplo, si quisiera, puedo configurar un filtro para el número de cuenta utilizando el filtro de columna de número AG. Esto es lo mismo que establecer filters en true, pero además de establecerlo en true, también le estamos diciendo cómo filtrar esto. Ahora, si voy al número de cuenta e intento filtrarlo, verás que me muestra un control de igualdad aquí donde puedo ingresar un número real. Así que voy a ingresar un número aquí. Creo que lo hice parcialmente mal. Y eso nos permitiría controlar ese número de cuenta. De manera similar, para la fecha, puedo usar el filtro de columna de fecha AG. Y ahora, para la fecha de pedido, tengo un control de fecha aquí. Así que puedo seleccionar una fecha específica y filtrará todos los pedidos que coincidan con esa fecha. Y finalmente, para el total, nuevamente voy a usar un filtro de columna de número. AG Grid viene con estos filtros integrados. Así que el filtro de borrar, ¿y borras todas las entradas y aparece un cuadro emergente, verdad? Sí, eso es correcto. Si comienzas a escribir en él para borrar el filtro, querrás borrar esas entradas. Y sí, puedes personalizar los filtros. Hay un objeto o propiedad de filter params en la definición de columna donde puedes hacer cosas como agregar un botón de reinicio, un botón de aplicar para que no se aplique hasta que el usuario haga clic en ese botón y cosas así. Y luego, lo otro que agregaré rápidamente es que notarás en esa fecha de pedido, cuando Mike usó ese filtro, utiliza el selector de fecha del navegador. Entonces, cualquiera que sea el navegador que estés utilizando, así se verá la interfaz de usuario. Y si quieres tener un selector de fecha de material o algo así, o algún tipo de selector de fecha elegante, nuevamente ahí es donde puedes entrar en la parte de extensibilidad de AG Grid y puedes crear tus propios componentes de filtro que se renderizarán ya sea como un filtro flotante debajo del encabezado o como el filtro que Mike mostró cuando se presiona el pequeño menú y aparece. Así que puedes personalizar eso y puedes crear, nuevamente, un selector de fecha de material si quieres tener una mejor interfaz de usuario o algo así. Sí, otra pregunta que Alex hace, ¿puedo cambiar el formato de fecha? Por ejemplo, en Alemania se usa el día primero, seguido del mes y luego el año. Dado que esto solo utiliza el selector de fecha integrado del navegador, ya estará localizado según el idioma del navegador. Pero como dijo Brian, si quieres personalizar eso, puedes escribir tu propio filtro. Correcto. Y luego tienes que tener eso en cuenta. Sí, sí. Adelante. Para mostrar a lo que Brian se refiere con los parámetros de filtro, aquí hay un objeto de filter params que te permite especificar parámetros adicionales para el filtro. Por ejemplo, si queremos mostrar un botón de reinicio que viene integrado en AG Grid, puedo agregar un botón de reinicio aquí. Así que ahora, si filtro esto o agrego algún texto aquí, verás que tengo este botón de reinicio que borra el filtro. Hay muchos parámetros diferentes que puedes especificar para personalizar los filtros integrados. Puedes agregar eventos a ellos. Puedes agregar botones de aplicar, borrar, reiniciar, cancelar. Puedes configurar el retardo. Hay muchas cosas que puedes hacer dentro de este objeto de parámetros de filtro. Genial. ¿Alguna otra pregunta? Genial. De acuerdo, una de las cosas que pasamos por alto un poco fue el filtrado por fecha. Y es posible que hayas notado si miras el código dentro de nuestros datos de fila y eso utiliza el gancho de memo, que para la fecha estábamos creando un objeto de fecha de JavaScript. Así que si vuelvo aquí y miro la fecha de pedido, verás que aquí estoy creando un objeto de fecha de JavaScript. Y así, de forma predeterminada, el filtrado por fecha funciona tal como está cuando los datos de fila utilizan objetos de fecha de JavaScript. Pero probablemente estés pensando, bueno, mi API no devuelve objetos de fecha de JavaScript, Brian, ¿qué se supone que debo hacer? Bueno, puedes crear objetos de fecha como lo hice yo o puedes usar la función comparadora. Y así, la función comparadora nos permite utilizar una capacidad personalizada para hacer el filtrado. Digamos que nuestra API devuelve algo como una cadena ISO, podríamos usar esa función comparadora para hacer cualquier tipo de comparación que necesitemos. Entonces, en particular, como mencionó Mike, tenemos esta propiedad de filter params dentro de nuestra definición de columna. Y dentro de eso es donde podemos proporcionar la función comparadora. Y la función comparadora es como una función comparadora que esperarías y que recibe dos valores. Primero obtendrá la fecha de filtro local a la medianoche. Esto está localizado y será la fecha seleccionada en el filtro, será ese día a la medianoche, y luego el valor de la celda. Y así, ese valor de la celda podría ser una cadena, una cadena ISO o cualquier cosa que estés vinculando a esa columna. En este caso, tenemos una cadena ISO. Y así, lo que vamos a hacer es simplemente crear un nuevo objeto de fecha y establecer las horas. De esa manera, estamos haciendo la comparación basada en la hora, y luego devolvemos cero si los valores son iguales, un número negativo si es menor y un número positivo si es mayor. Y así es como podemos hacer un filtrado personalizado utilizando la función comparadora. Este es un buen ejemplo porque muchas veces, no necesariamente obtienes, depende de cómo lleguen tus datos a tu componente, pero es posible que necesites personalizar esto. Entonces, nuevamente, para resumir, tal como está, si tienes objetos de fecha, funcionará tal como está, de lo contrario, debes especificar esta función comparadora. De acuerdo, genial. Avísanos si hay alguna pregunta, de lo contrario, seguiremos avanzando y pasaremos a la sección de renderizado de celdas. Mike, ¿quieres hacer la sección de renderizado de celdas? Claro. ¿Podemos dejar de compartir? De acuerdo. Hablemos sobre el renderizado de celdas.

En este momento en nuestra aplicación, o en todos los ejemplos que hemos visto hasta ahora, simplemente dejamos que AG Grid maneje la visualización de los datos a los que estamos vinculando. Al interactuar con la canalización de renderizado de celdas en AG Grid, podemos personalizar cómo se muestran los valores. Hay varias formas en las que podemos hacer esta personalización.

En esta sección, vamos a explorar la canalización de renderizado de celdas. Hablaremos sobre cómo usar la función de value getter para controlar cómo se producen los valores, la sección de value formatter para aprender cómo dar formato a los valores y el cell renderer para hacer cosas realmente avanzadas en términos de la forma de mostrar los valores. El renderizado de celdas, sin ninguna personalización, y en su forma más simple, cada celda en AG Grid se renderiza como una cadena basada en los datos a los que está vinculada. Así que cuando decimos que queremos mostrar el campo de nombre de nuestros datos, simplemente lo mostrará como una cadena dentro de la cuadrícula. Sin embargo, muchas veces esto no es suficiente. Queremos mostrar los datos de formas más ricas o con más contexto o significado. Y aquí es donde podemos aprovechar esta canalización para renderizar los datos dentro de estas celdas.

Así que exploramos las funciones de value getter, value formatter y cell renderer en términos de formas de personalizar la forma en que se muestra nuestros datos. Comencemos hablando primero sobre la función de value getter. Podemos usar la función de value getter para obtener los datos de fila para columnas donde el uso de la propiedad de campo no es una opción. Así que ahora estamos mostrando columnas como nombre o color, y eso se correlaciona directamente con un campo en los datos que estamos utilizando para poblar nuestra cuadrícula. Pero a veces vamos a tener campos calculados que van a usar diferentes partes de los datos para calcular un valor que se mostrará dentro de nuestra cuadrícula. En ese caso, realmente no tenemos un nombre de campo al que apuntar porque ese campo no existe en los datos a los que estamos vinculando. Y así, podemos usar una función de value getter para modificar los datos antes de proporcionarlos a la cuadrícula. Se invocará por AG Grid para cada celda. Y así, nos permitirá hacer algunos de esos cálculos. Y se invocará con un objeto de parámetros de value getter que exploraremos. El objeto de parámetros de value getter se ve un poco así. Nos proporcionará ocho cosas diferentes para que las inspeccionemos o interactuemos. Veamos qué hace cada una de estas cosas por nosotros. Así que, pongámonos al día aquí. La API será el objeto de API de la cuadrícula. Hablaremos un poco sobre lo que hace aquí en un segundo. También obtenemos la definición de columna actual. Entonces, estamos renderizando una celda. Obtendremos la definición de columna para esa celda en particular. ¿Cómo se define eso? Eso nos dará un objeto de API de columna. Algo de lo que hablaremos en un segundo aquí. Obtenemos la columna actual que estamos intentando renderizar. Obtenemos el contexto. Esto es específico de la aplicación y se establece a través de las opciones de la cuadrícula. Esto es realmente útil en implementaciones de JS más básicas de HGRID que básicamente te permite pasar o compartir contexto entre diferentes llamadas que HGRID está haciendo a nuestra aplicación. Habrá el campo de datos, que es el dato real que queremos intentar renderizar para la fila actual. Y luego, hay una función de obtener valor. Es un método de utilidad para obtener valores de columna. Acepta la misma notación de punto que el nombre del campo o que el campo acepta que hemos visto anteriormente. Y luego, el nodo o la fila real que estamos intentando renderizar dentro de.

Hablemos un poco más en detalle sobre la API de la cuadrícula, la API de columnas y el nodo de fila. Entonces, la API de la cuadrícula es básicamente una forma de interactuar programáticamente con HGRID. Es genial para agregar escuchadores de eventos a la cuadrícula. Hablaremos sobre algunos de los eventos que la cuadrícula expone un poco más adelante en este taller, pero te permite escuchar programáticamente los eventos que salen de la cuadrícula. También es muy útil para acceder a las funciones de portapapeles. Entonces, si el usuario interactúa con toda la cuadrícula y está copiando, pegando, ese tipo de cosas, la API de la cuadrícula es una excelente manera de manejar parte de esa interactividad. Porque es la forma programática de interactuar con HGRID, prácticamente todas estas cosas que estamos haciendo a través de objetos de configuración se pueden hacer programáticamente utilizando la API de la cuadrícula. De manera similar, obtenemos este objeto de API de columna y es excelente para interactuar programáticamente con una columna específica. Entonces, una columna específica que estamos renderizando en dos. Esto es útil si queremos cambiar o ajustar algo sobre la columna específica que estamos renderizando. Por ejemplo, si queremos mover la columna, si queremos anclarla, si queremos ajustar su tamaño dinámicamente, así es como podríamos hacerlo utilizando este objeto de API de columna. Y finalmente, nos da ese objeto de nodo de fila que mencioné. Y esto representa una sola fila en la cuadrícula. Nuevamente, de manera similar a las dos cosas anteriores que hemos discutido, es otra API programática para manejar cosas como seleccionar una fila completa o actualizar todos los datos dentro de una fila o agregar escuchadores de eventos cuando se interactúa con algo sobre esa fila. Ahora tenemos una idea básica de lo que se pasa a nuestra función de ValueGetter. Hablemos sobre cómo escribir realmente una función de ValueGetter. Como puedes ver aquí, vamos a pasar la función de ValueGetter dentro de la definición de columna. Entonces aquí tenemos un encabezado con un nombre de precio. Y dentro de este ValueGetter, vamos a obtener esos parámetros de value getter. Y lo primero que necesitamos verificar y ver es si params.data es indefinido. Entonces, params.data podría ser indefinido en casos en los que estamos usando, digamos, algunas de las funciones de agrupación en AG-grid. Siempre queremos probar si data está definido o no. Y si no lo está, simplemente vamos a devolver cero como el precio. Y si está definido, lo que vamos a hacer es usar la función math.round aquí para redondear ese precio hacia abajo. Entonces aquí estamos usando el ValueGetter para calcular o modificar los datos antes de que los rendericemos dentro de nuestra AG-grid. Nuestros datos sin procesar tienen precios sin redondear y ahora, con esta función de ValueGetter, vamos a redondear esos precios hacia arriba. Así que vamos a hacer un ejercicio. Este va a ser bastante complejo, así que hay un par de pistas y no tengas miedo de mirar la solución si necesitas ayuda porque hay algunos cálculos de datos en este ejercicio. El objetivo de este ejercicio es aprender a usar esa función de ValueGetter. Y lo que vamos a hacer es usar un ValueGetter para calcular un total para cada uno de estos pedidos.

Así que voy a abrir esto para explicar cómo se verá aquí. Aquí puedes ver que nuestros datos sin procesar tienen toda la información necesaria para un pedido y tienen varios elementos o un conjunto de elementos que existen en el pedido. Eso te dirá la cantidad y el producto que el usuario compró. Entonces, lo que queremos hacer es reducir estos elementos del pedido a un precio. Para hacer eso, vas a escribir un value getter para la columna total, que al principio está en blanco. Y lo que recomendaría hacer es utilizar el método reduce en este array de elementos del pedido. Buscar cada producto por su ID de producto. Multiplicar el valor del producto por la cantidad y sumar todo eso para calcular un total. Sé que es realmente complicado. Así que, nuevamente, si quieres ver cómo lo hicimos, siéntete libre de mirar la solución. La parte importante es aprender cómo usar el value getter para calcular valores dentro de Aggrid. Este es un poco más complicado, así que te daremos unos minutos más de lo habitual para esto. Nuevamente, si tienes alguna pregunta, no dudes en levantar la mano en el chat, hacer una pregunta en el chat o hacer una pregunta en Discord.

Hay una pregunta, el value getter ¿suma dos campos juntos, ¿es correcto? En este ejemplo, eso es más o menos lo que estamos haciendo, pero realmente puedes hacer cualquier cosa que desees dentro del getter en términos de calcular un valor. Así que tal vez eso sea sumar dos campos juntos, tal vez eso sea referenciar los datos de otra fuente por completo, en realidad lo que necesites hacer para calcular un valor, eso es lo que hará el value getter. Sí, combinar un nombre y un apellido es un buen caso de uso para utilizar un value getter. ¿Qué quieres hacer, Mike? Adelante. Adelante. Permíteme subir. Chrome. Muy bien. Entonces, Mike dijo que queremos mostrar, sacar esto del camino, más grande, queremos mostrar nuestra columna total por número de columnas y queremos obtener una columna total de ese número. Lo que queremos hacer es, para un total de cinco veces, queremos que el total sea seis, queremos mostrar nuestra columna total. Pero para hacerlo, necesitamos calcularlo. Así que lo que vamos a hacer es utilizar el value getter. Así que veo que tengo un getter y esto va a ser una función que va a recibir un objeto params y luego voy a devolver de eso, el valor que quiero que AG Grid renderice dentro de la celda. Lo primero que voy a hacer es asegurarme de que si no tenemos algunos datos, simplemente salgamos de aquí, devolveremos cero o podríamos devolver null o algo así. A partir de ahí, si miro dentro de mi objeto params, este value getter params contiene una propiedad. Veamos si puedo entrar en... Veamos si hago clic aquí, puedo hacer esto. Así que es una función de value getter y esa función de value getter, ve aquí abajo que es invocada por AG Grid con ese objeto params y Mike entró en ese objeto params del value getter y habló de eso. Y dentro de eso, tenemos nuestros datos y esos son los datos asociados a ese nodo o a esa fila. Usando esos datos, puedo calcular mi total del pedido. Así que lo que voy a hacer es adelante y obtener los elementos del pedido. Así que voy a decir elementos del pedido y vamos a obtener de nuestros datos, tenemos una propiedad de elementos del pedido. Y luego voy a tomar esos elementos del pedido y lo que necesito hacer primero es filtrarlos y voy a decir para cada elemento, asegurémonos de que esté en este pedido. Vamos a decir que item.orderId sea igual al params.data.ID. Y luego los voy a mapear y voy a decir para cada elemento, adelante y encontremos el producto. Así que para ese elemento, voy a hacer products.find y luego para ese producto, quiero tomarlo donde coincida con ese ID de pedido. Disculpa, ese ID de producto. Hay un punto ahí. Parece que nos falta un paréntesis de apertura justo antes de find. Y una flecha. Sí. Eres mejor escribiendo esto que yo. Y los productos, ¿debería ser no import, debería ser data.products? Data.products, sí. Sí, exacto. Y luego ahora quiero reducir todo esto y voy a decir, déjame darte el anterior y el actual y luego quiero sumar todo esto. Así que voy a tomar el anterior y voy a sumarlo con el precio actual de los elementos. Y reduce punto find, necesitamos otro de tendencia, ahí vamos. Muy bien, genial. Así que, oops, supongo que acabo de bifurcar eso, guardé. Así que ahora puedo ver que tengo mi columna total que se muestra en función de los elementos del pedido y los productos que están asociados con ese pedido. Esto es ciertamente un poco más específico del negocio, por así decirlo, o específico de la implementación, pero la idea aquí es que utilizando el value getter, lo que necesito hacer, si necesito buscar algo en algún tipo de diccionario o tabla de búsqueda, o necesito obtener datos, puedo hacerlo. Así que puedo usar el value getter para personalizar cómo se renderiza el dato proporcionado para esa celda en particular. Muy bien. Siguiente, déjame seguir aquí. Si hay alguna pregunta al respecto, ponla en el chat, lo revisaremos. Entonces, lo siguiente que te preguntarás es, bueno, ¿qué pasa si tengo muchas cuadrículas en mi aplicación y todas tienen esta especie de necesidad de obtener datos de alguna manera de una forma similar? Así que es bastante fácil crear value getters reutilizables porque son solo funciones. Y así que podemos crear algo como esto, es una especie de función de orden superior. Así que en este ejemplo estoy creando un value getter multiplicador que obtendrá el valor así como un multiplicador. Y digamos que queremos multiplicar, lo que sea eso en nuestra aplicación, en nuestra columna, queremos hacer algún tipo de multiplicación de ese valor. Y así que no queremos tener que codificar constantemente esto como un value getter y value getter params y todas esas cosas. Y así que lo que podemos hacer es crear una función de orden superior que proporcionará a AG Grid y podremos personalizar eso. Así que hay un poco de typescript aquí, pero la idea aquí es que en esta función que se está devolviendo, podemos hacer cualquier lógica que queramos hacer dentro de un value getter. Así que tengo algunos comentarios aquí. Puedes leer eso que describe esta función de orden superior value getter. La idea aquí es que puedo usar esta función de value getter. Así que ahora dentro de mi value getter, en realidad puedo simplemente invocar este value getter multiplicador y esta función, voy a decir, hey, quiero que obtengas el precio y quiero, quiero que multipliques ese precio por la tasa de impuestos dentro de mi fila de datos. Y así que podría tener el mismo caso de uso en muchas cuadrículas, ya sabes, en toda mi aplicación y no quiero estar constantemente escribiendo el mismo value getter una y otra vez. Y así que este es un ejemplo donde podrías usar una función de orden superior para lograr esto. Y si quieres, siéntete libre de echar un vistazo a ese ejemplo en StackBlitz y ejecutarlo. Y nuevamente, hay un poco más de explicación en los materiales del curso que puedes revisar también.

De acuerdo. Formateadores de valor. Entendido. ¿Tienen alguna otra pregunta que hayamos tenido? Sí, creo que Alex tenía una nota aquí sobre el producto de datos. Así que lo arreglaremos en la solución, así que está bien. De acuerdo. Formateadores de valor. Así que hablemos de lo que hacen. El value getter es la forma en que calculamos el valor para la celda. Lo que nos permite hacer el formateador de valor es dar formato a ese valor. Es una función de devolución de llamada opcional que podemos escribir para habilitar el formato o aplicar formato al valor. Por ejemplo, es posible que deseemos localizar el valor o mostrarlo como moneda o formatear la fecha, hay muchos casos de uso diferentes en los que podríamos querer formatear los datos después de haber calculado esa pieza de datos. Al igual que el value getter, la función de formateador de valor será invocada por AG Grid para cada celda que tenga una función de formateador de valor definida en su definición de columna. Y la función se invocará con el objeto de parámetros del formateador de valor. Vamos a sumergirnos y ver qué vamos a obtener en ese objeto de parámetros del formateador de valor. Podemos ver aquí que estamos obteniendo muchas de las mismas cosas que obtuvimos antes, incluyendo la API de la cuadrícula, la API de columnas, el API de nodos de fila, pero también estamos obteniendo información adicional específicamente sobre el valor. ¿Cuáles son las diferencias aquí? Bueno, ese método de utilidad getValue del que hablamos anteriormente no está disponible aquí porque el valor ya ha sido calculado para nosotros ya sea por la propiedad field o la propiedad value getter en la definición de columna. En su lugar, se nos proporcionará el valor de la celda que ya ha sido calculado y calculado para estos formateadores. Estos formateadores se ejecutan después de que se haya recuperado el valor. Dentro de este formateador de valor, vamos a interactuar realmente solo con el valor aquí. Echemos un vistazo a un ejemplo. Aquí tengo una columna de precio. Y lo que quiero hacer es dar formato a la columna de precio para mostrarla en un formato de moneda bien formateado. Aquí vamos a usar la API Internacional junto con la clase NumberFormat para formatear estos números en la localidad nus. Tengo un número mínimo de dígitos y un número máximo de dígitos. De esa manera, estamos controlando cuántos espacios mostramos tanto para la fracción mínima como para la fracción máxima. Por ejemplo, si quisiéramos formatear esto utilizando una moneda estándar, simplemente podríamos poner dos allí para controlar cuántos dígitos vamos a mostrar. Nuevamente, al igual que el value getter, vamos a necesitar verificar si siquiera tenemos un valor. A veces, el valor será indefinido si estamos utilizando algunas de las funciones de agrupación de la cuadrícula, por ejemplo, por lo que si es indefinido, simplemente vamos a formatear el número cero, pero si está definido, vamos a utilizar ese formato que hemos creado para formatear el valor que hemos calculado. Nuevamente, estas son funciones de devolución de llamada simples que vamos a colocar dentro de estas definiciones de columna. Vamos a pasarle la palabra a usted para que lo intente. Lo que vamos a hacer es escribir una función de value getter para el formato de columna total para formatear el valor utilizando la clase NumberFormat. Puedes usar la clase NumberFormat de muchas formas diferentes. Si avanzas, verás que estamos usando el formato de moneda o el estilo de moneda para formatearlo en USD, pero puedes usarlo de la forma que desees. Y básicamente lo que haces es colocar un formateador de números dentro del formateador de valor para el filtro de columna. Veamos dónde va a ir eso. Aquí mismo, para la columna total, vamos a colocar un formateador de valor aquí que va a formatear esos valores utilizando la clase NumberFormat en la API Internacional. Espero que este sea bastante sencillo. Te daremos un par de minutos para que lo intentes. Si tienes alguna pregunta, no dudes en hacerla en el chat, puede que haya algunas preguntas. Parece que Brian ya respondió esa pregunta. Sí, creo que el filtro en el ejercicio anterior no era necesario. De acuerdo, innecesario. Creo que una de las cosas que tal vez no especificamos y estaba pensando en ello. Quería aclararlo. Obviamente, como mencionó Mike, es una especie de canalización de renderizado de celdas. Y así que no tienes que usar formateadores de valor con value getters, ¿verdad? El value getter viene primero en esa canalización, y ahí es donde podemos decir, AG Grid, déjame darte el valor. Y nuevamente, no tienes que usar un formateador de valor con eso. AG Grid, podrías decir, aquí está el valor, tal como lo hicimos en nuestro ejercicio anterior. Y luego lo renderizará dentro como el texto interno o el contenido de texto dentro de ese desarrollo. Con un formateador de valor, nuevamente, no tenemos que usarlo con el value getter, podemos hacerlo, por lo que cualquier valor después del value getter o después de la vinculación del campo luego pasará al formateador de valor. Y luego podemos usar ese valor y personalizar la visualización o el formato de ese valor. Y ese valor todavía se inyecta en el DOM como texto, ¿verdad? Así que todavía se inserta dentro de ese elemento div como texto puro. No estamos haciendo nada realmente sofisticado en términos de mostrar cualquier tipo de HTML o botones o algo que sea interactivo dentro de esa celda. Y aprenderemos sobre el renderizador de celdas a continuación, que nos permite personalizar el renderizado completo dentro de ese elemento div. Y podemos usar los tres juntos, podemos usar solo uno de ellos, mezclar y combinar según su caso de uso en términos de cómo obtener los datos, cómo formatear los datos y cómo renderizar eso. Y eso es todo. Veamos, tenemos una pregunta aquí, un par de preguntas. El formateador de valor y el renderizador de celdas son lo mismo. De acuerdo, creo que acabo de cubrir eso. Y luego otra pregunta, el value getter se llama mucho más a menudo porque se necesita para la clasificación, ¿verdad? El formateador solo es para los elementos en pantalla. Esa es una gran pregunta y tendría que investigarlo para determinarlo. Creo que el formateador de valor se va a llamar así. Quiero decir, si tienes un value getter y un formateador de valor, creo que ambos se llamarán cada vez que necesite obtener el valor y formatear el valor cada vez que se renderice esa celda, por así decirlo. Y eso sucederá, depende de la clasificación, el value getter se llamará más, eso es correcto para la clasificación porque no necesita formatear el valor. Y luego cada vez que necesite renderizarlo, llamará a ese formateador de valor. Y recuerda que digamos que tienes 10,000 filas en tu cuadrícula, ciertamente no sería eficiente mostrar 10,000, inyectar 10,000 filas de elementos div dentro del DOM. Y así que va a virtualizar esos y crear un búfer, adelante y antes y después o lo que se esté mostrando en la cuadrícula y renderizar esos elementos div de esa manera a medida que el usuario se desplaza por la cuadrícula, puede renderizarlos y mostrarlos lo más eficientemente posible. Y así que en esos casos, ya sabes, va a invocar cada una de estas funciones de devolución de llamada en consecuencia. Sí, voy a agregar un poco de contexto aquí en términos del rendimiento de AG Grid. Creo que hay mucho interés sobre la sobrecarga para la canalización de renderizado de celdas.

Vale la pena señalar que la función value getter se llamará de forma predeterminada cada vez que AG Grid necesite ese valor. Por lo tanto, se llamará para ordenar y para mostrar. Esto puede tener un gran impacto con conjuntos de datos grandes.

AG Grid viene con la capacidad de hacer algo llamado almacenamiento en caché de valores. Puedes optar por utilizar la caché de valores. Si activas la caché de valores, cada vez que se ejecute un value getter, se almacenará en caché ese valor y solo se llamará a tu value getter una vez. Esto es para casos de uso bastante avanzados donde tienes problemas de rendimiento o tareas sensibles al tiempo dentro de tu función value getter. Pero quiero señalar que AG Grid tiene un mecanismo de almacenamiento en caché de valores incorporado. Si te preocupa el rendimiento del canalización de renderizado de celdas.

Kate, ¿puedes personalizar el tamaño de esa caché? Sé que puedes personalizar el tamaño y el tiempo que tardará en expirar. Sí, como una solución de almacenamiento en caché normal. Sí, y también puedes personalizar el bloqueo y la virtualización y algunas otras cosas. Si necesitas más o menos en el DOM, también puedes activar y desactivar la virtualización de columnas. Eso es algo que debes hacer.

De acuerdo, Brian, ¿vas a seguir con este ejercicio? Sí, sí. Déjame abrir Chrome aquí, estamos en los formateadores de valores, aquí está nuestro ejercicio. Vamos a agregar un formateador de valores a nuestra columna total. Así que voy a agregar nuestro formateador de valores y vamos a obtener un objeto de parámetros. Y dentro de esto, lo que queremos hacer es asegurarnos primero de que tenemos datos. Así que vamos a decir, si no tenemos ningún dato, simplemente devolvamos cero. De lo contrario, lo que queremos hacer es usar el formato de número internacional y vamos a usar la configuración regional ENUS y luego vamos a personalizar esto, vamos a decir que el estilo será moneda y la moneda será USD. Y luego vamos a llamar al método de formato en eso y le daremos el valor. Así que ahora, cuando vengamos aquí, deberíamos obtener una moneda USD bien formateada. Y, por supuesto, puedes usar el formato de número internacional para formatear esto y otras monedas en los estilos. Como mencioné antes, al igual que con el value getter, también puedes crear funciones de orden superior para los formateadores de valores. No voy a profundizar en esto, en los detalles de la implementación. Pero creo que lo importante aquí es que puedo crear un formateador de valores reutilizable, una función de orden superior, que me permite hacer tal vez un formateador de valores decimales. Y luego puedo usar eso más abajo y decir, usa este formateador de valores decimales. Voy a hacer algo de TypeScript para obtener algo de seguridad de tipos aquí. Y luego quiero que tengas, ya sabes, dos como el número de dígitos. Y luego podríamos usar, ya sabes, es solo una función. Por lo que simplemente puedes reutilizar eso en cualquier lugar que lo necesites en tu aplicación. O si estás haciendo algún tipo de monorepo sofisticado, puedes compartirlo entre aplicaciones y proyectos. De acuerdo, genial. Sigamos adelante. Oh, ¿deberíamos tomar un descanso, Mike? ¿Qué piensas? Sí, solo un breve descanso. Sí, hagamos siete minutos. Así que comenzaremos de nuevo a los cinco después. De acuerdo, volvamos a ello. Mike, ¿quieres enseñarnos sobre la función de renderizador de celdas y cómo podemos personalizar el renderizado de las celdas en AG Grid? Sí.

De acuerdo, como parte de la canalización de renderizado de celdas, hasta ahora hemos aprendido sobre la capacidad de calcular valores utilizando el value getter y luego formatear valores utilizando el formateador de valores. Pero lo que podríamos querer hacer es realmente hacer algo avanzado en términos de la forma en que renderizamos los valores, tal vez mostrar controles complejos, elementos o estilos complejos. En esos casos, es donde quieres usar un renderizador de celdas. Después de que se determine el valor para una celda y hayamos formateado el valor, podemos usar un renderizador de celdas para tener un control total sobre cómo se renderiza esa celda en AG Grid.

Es importante saber que solo queremos usar esto cuando sea absolutamente necesario. Porque lo que realmente va a suceder aquí es que vamos a agregar elementos adicionales, escuchadores de eventos, ya sabes, cosas que podrían ralentizar tu cuadrícula cuando estamos produciendo los renderizadores de celdas. Por lo tanto, solo queremos usarlos cuando sea absolutamente necesario y cuando sea necesario porque esta es una de esas áreas en las que realmente puedes afectar el rendimiento de tu cuadrícula cuando estás trabajando con conjuntos de datos realmente grandes.

Entonces, el renderizador de celdas para una definición de columna acepta los siguientes valores. Puede aceptar indefinido, lo que básicamente significa, hey, solo renderiza el valor que hemos calculado y formateado para ti como una cadena, como el contenido de texto en la celda. También puede aceptar una cadena que hace referencia a un renderizador de celdas registrado. Esto sería útil si deseas hacer que tus definiciones de columna sean serializables. O puede ser un componente React, que puede ser un componente de función o un componente de clase. Vamos a ver principalmente componentes de función en este taller en particular.

Antes de sumergirnos en esto, nuevamente, hablemos sobre algunas de las piezas de información que vamos a obtener dentro de estos renderizadores de celdas. Vamos a obtener los parámetros del renderizador de celdas, y estos son muy similares a lo que estamos obteniendo dentro de los parámetros del formateador de valores. Sin embargo, vale la pena señalar que cuando hablamos del valor en este punto, realmente estamos hablando del valor después de haber sido calculado utilizando el value getter y formateado utilizando el formateador de valores. Nuevamente, al igual que las otras funciones que hemos visto hasta ahora, puedes acceder a algunas de las API programáticas para controlar la cuadrícula, la columna o el nodo en sí, junto con algunas de las configuraciones que ya hemos establecido para la cuadrícula.

Echemos un vistazo a un ejemplo de una función de renderizador de celdas. Y en este caso, voy a hacer algo muy similar a lo que ya hemos hecho, solo para darte una idea de hacia dónde nos dirigimos con esto. Vamos a ver algunos ejemplos más complejos, por supuesto, a medida que avancemos en esto. Pero aquí, en el renderizador de celdas, lo que vamos a hacer es mirar nuevamente cómo dar formato a algunos valores. Pero es importante tener en cuenta que estamos haciendo esto como un renderizador de celdas en lugar de un formateador de celdas. Y esto, como veremos en un próximo ejemplo, nos permitirá hacer algunas cosas interesantes en términos de controlar la plantilla. Los renderizadores de celdas pueden ser una función o una clase de componente React. Aquí, estamos probando si tenemos un valor. Si no lo tenemos, devolvemos nulo.

Y si lo hacemos, vamos a usar el Formateador de Números en él para renderizar ese formato. Echemos un vistazo a una solución más compleja rápidamente. Permíteme copiar este enlace aquí. En realidad, lo implementaremos nosotros mismos en un segundo. Aquí, lo que estoy haciendo es, tengo un renderizador de celdas para la fecha de pedido. Y lo que estoy haciendo es tomar la fecha y usar la clase de formato de fecha y hora internacional para formatear ese valor. Y luego, debido a que estos son componentes de React, o como un componente en línea aquí, lo que puedo hacer es devolver JSX completo aquí para controlar la forma en que se renderiza la celda. Entonces, aquí puedes ver que estoy devolviendo un div. Le he aplicado algunos estilos. Estoy mostrando un icono junto a la fecha para indicar a mis usuarios que esta es una fecha, y estoy usando el formateador de fecha y hora para mostrar esa fecha, formateada de manera agradable. Entonces, los Renderizadores de Celdas son donde puedes hacer una visualización interactiva completa del contenido dentro de las celdas. Dado que estos son componentes de React, puedes usar hooks dentro de ellos. Puedes configurar referencias para hacer que estas cosas sean interactivas y agregar escuchadores de eventos a estas cosas. Puedes renderizar otros componentes de React aquí. Aquí es donde puedes hacer muchas de las cosas más avanzadas en términos de renderizar datos dentro de esta cuadrícula. Y pasé por eso bastante rápido, así que pausaré esto por un segundo para ver si hay alguna pregunta sobre el Renderizador de Celdas antes de pasar al ejercicio.

De acuerdo, bueno, te lo entrego a ti. Te daré un ejercicio para hacer. El objetivo de este ejercicio es aprender cómo usar la función CellRenderer. Vas a abrir el ejercicio. Y vas a agregar un Renderizador de Celdas a la columna 'Fecha de Pedido'. Primero, verifica si el valor no es indefinido en el objeto de programas que se te pasa. Y luego, devuelve un poco de JSX que incluya un icono de material junto a la cadena de fecha formateada. Entonces, si necesitas el fragmento de HTML en particular para renderizar ese icono de evento, se muestra como una pista. Nuevamente, ten en cuenta que esta función CellRenderer es básicamente un componente de React, por lo que puedes devolver JSX completo aquí. Te doy un par de minutos para escribir eso. Nuevamente, si tienes alguna pregunta, siéntete libre de escribir algo en el chat o en Discord. Tenemos una pregunta de Corrine. Entonces, el valor en los parámetros aquí será el resultado del value getter si está especificado, ¿verdad? Eso es correcto, sí. Entonces, si tienes un value getter, el valor que se pasa tanto al formateador como al renderizador de celdas será ese valor que se obtuvo de la función value getter. Si no tienes un value getter, el valor será el valor que se basa en la vinculación del campo que has utilizado. Entonces, al principio del curso, solo estábamos usando la propiedad de campo y estableciendo cosas como el nombre y el color. Luego, ese valor para el renderizador de celdas o para el formateador de valores sería, nuevamente, ese valor de cualquier cosa que esté vinculada a tu fila de datos. Sí. Esa es una buena pregunta. De acuerdo, seguiré adelante y comenzaré. Queremos dejar de compartir por un momento, Mike, y voy a mostrar la solución. De acuerdo, si abrimos el ejercicio, tenemos el renderizador de celdas, ya está un poco definido aquí desde la demostración anterior que Mike nos mostró. Así que vamos a deshacernos de esto aquí. Aún vamos a verificar el valor, pero si es igual a indefinido, vamos a devolver nulo. Y luego aquí, en lugar de devolver solo un valor que se inyectaría como el contenido de texto del desarrollo, vamos a devolver algo de JSX, tenemos, nuevamente, aquí está el componente completo de React, por lo que podemos hacer lo que queramos aquí. Así que voy a agregar un estilo a esto, y voy a establecer la propiedad display en flex, y quiero que align-items sea center, y voy a cerrar ese div, no sé por qué no estoy obteniendo el autocompletado, pero bueno. Y luego aquí voy a tener mi icono de material. Así que voy a agregar un nombre de clase, y esto será material icons, y luego esto será un icono de evento, y eso debería darnos ahora nuestro pequeño calendario, display flex align-items center, ¿por qué no está alineado? Interesante. Y luego aquí voy a crear un nuevo formato de fecha y hora, y voy a usar el formato unes, y luego voy a formatear nuestro valor. Y así ahora debería obtener mi formato de fecha y hora allí también. Nuevamente, aquí puedo usar referencias, puedo usar mis hooks, hacer lo que quiera dentro de este componente funcional. Avísanos si tienes alguna pregunta, los que están en el chat, de lo contrario, pasaremos a la edición de celdas. Y nos estamos acercando, creo que nos quedan dos ejercicios más. Nos quedan unos 40 minutos en la masterclass, así que nos quedan dos ejercicios más, y cubriremos el contenido sobre la edición de celdas y hablaremos un poco sobre el estilo al final.

De acuerdo, hasta ahora hemos hablado principalmente sobre cómo renderizar datos dentro de la cuadrícula. Pero AgGrid en realidad funciona en ambos sentidos, tanto para renderizar datos, conjuntos grandes de datos, como para permitir a los usuarios editar los datos que se renderizan con AgGrid. Vamos a hablar un poco sobre la edición de celdas o dar a los usuarios la capacidad de editar datos. Y lo que podemos hacer es habilitar la propiedad editable en la definición de columna para hacer una columna editable. Hay algunos editores de celdas incorporados de los que hablaremos, pero simplemente estableciéndolo en true, las columnas son inmediatamente editables, y también podemos habilitarlo programáticamente a través de la API de la cuadrícula. Para habilitar la edición de celdas, vamos a actualizar las definiciones de columna que hemos escrito hasta ahora y vamos a establecer el campo editable en esa definición de columna en true. Eso es todo lo que necesitamos hacer para obtener la edición de texto básica funcionando dentro de AgGrid. También podemos hacerlo programáticamente. Hemos hablado un poco sobre la API de la cuadrícula y cómo hacer cosas programáticamente. Así que si te mostramos un poco de ese código más programático, si tenemos acceso a la API de la cuadrícula, también podemos comenzar a editar celdas programáticamente utilizando esa API de la cuadrícula. AgGrid viene con varios editores de celdas incorporados, tendrás que implementar tus propios editores si uno de los incorporados ya es suficiente para tus necesidades. AgGrid proporciona los siguientes editores de celdas de forma predeterminada, proporciona un editor de texto regular, algo así como un campo de texto corto, y un editor de texto largo, un editor de texto más espacioso. Te brinda un editor de fecha. Aunque debo mencionar que al igual que los filtros que vimos hace una o dos horas, utilizará el selector de fecha incorporado del navegador para ese editor de fecha. Entonces, si deseas un editor de fecha más elegante, como uno proporcionado por un paquete de terceros o tu biblioteca de componentes de React favorita, es posible que desees usar el tuyo propio, sin embargo, si estás de acuerdo con el selector de fecha incorporado del navegador, entonces el editor de fecha incorporado en AgGrid es una excelente opción para ti. Y también hay un editor de selección. Nuevamente, esto puede usar el control de selección incorporado del navegador, pero eso te brinda la capacidad básica de hacer un editor de selección. Hay un editor de selección avanzada. Esto está en la versión Enterprise. Entonces, si necesitas el editor de texto enriquecido o el editor de selección avanzada, querrás cambiar a la versión Enterprise, no está incorporado en la versión Community. De acuerdo, de forma predeterminada, cuando establecemos editable en true, se utiliza el editor predeterminado y el editor predeterminado es el editor de celdas de texto.

Entonces, cada vez que establecemos editable en true, se nos proporcionará un control de texto para editar esa celda. Puedes utilizar la propiedad de definición de columna del editor de celdas para especificar un editor de texto incorporado o un editor de celdas incorporado, o tu propio editor de celdas personalizado que podrías implementar con React. Vamos a ver ambos, pero primero, veremos algunos de los editores proporcionados o incorporados. Así que podemos especificar el editor de texto largo proporcionado de la siguiente manera. Aquí tenemos nuestro número de cuenta. Puedes ver que he establecido el campo editable en true para esta columna en particular. Y luego, debajo de eso, estoy especificando el editor de celdas. Y aquí, estoy diciendo 'AG large text cell editor', lo que le indica a AG Grid que utilice el editor de texto largo incorporado aquí. También podemos utilizar el editor de selección especificándolo como nuestro editor de celdas. Y existe la posibilidad de especificar parámetros del editor de celdas, donde podríamos proporcionarle al editor de selección la lista de opciones para mostrar dentro de ese select. Una vez que hayas configurado algunos de estos, la forma en que funciona es que tendremos nuestra cuadrícula aquí. Dame un minuto para abrirlo. Y se ve igual, pero ahora, si hacemos doble clic en una celda, podemos realizar cambios en ellas y guardar esos datos editando esa celda. Puedo hacer un cambio en esta fecha. Si esto estuviera utilizando el editor de fechas, puedo ingresar aquí y cambiar algunas de estas piezas de datos, hacer algunos cambios en el número de cuenta si quisiera, todo eso está disponible para ti una vez que hagas que algunas de estas sean editables.

Entonces, te lo voy a dar. Nuevamente, esto es como si tuviéramos solo un ejercicio más después de esto, así que estamos cerca de terminar esto. Vas a abrir este ejercicio en StackFlips. Este es un ejercicio muy sencillo, espero. Vas a habilitar la edición de celdas para la columna del nombre del cliente simplemente estableciendo editable en true. Eso te dará el editor de texto predeterminado incorporado. También vas a habilitar la edición de celdas para la columna del número de cuenta y utilizar el editor de celdas de texto largo de AG como el editor de celdas para esa columna, solo para exportar usando uno de los incorporados. Una vez que hayas terminado eso, juega un poco con los dos. Siéntete libre de probar algunos de los otros editores de celdas incorporados. Y luego, después de unos minutos, Brian nos guiará a través de la solución y luego hablaremos sobre cómo escribir tus propios editores de celdas utilizando React. Tenemos una pregunta que creo que nos perdimos o que llegó después de que comenzamos a avanzar a la sección de edición de celdas, que dice, ¿qué sucede si usas un formateador de valores? ¿Lo recibe o no se recomienda usar ambos? Esa es una excelente pregunta. Si estás utilizando un formateador de valores con un renderizador de celdas, definitivamente puedes usar ambos juntos. Obtendrás el valor que se ejecuta en el formateador de valores primero antes del renderizador de celdas, en esa secuencia, obtención de valor, formateador de valores, renderizador de celdas. Y si usas un formateador de valores, el valor que devuelvas en la función de devolución de llamada del formateador de valores será el valor que se proporcionará al renderizador de celdas. Diría que ambos, en términos de si se admiten o se recomienda usar ambos, puedes usar ambos. Por lo general, encuentro que si estoy usando un renderizador de celdas, no necesito un formateador de valores. Aunque, digamos que tienes algunas funciones reutilizables geniales que lo formatean como una moneda, o lo formatean, o tal vez no una moneda, ese no es un buen ejemplo, pero lo formatean como un número decimal, o hacen algún tipo de redondeo, o tal vez alguna lógica empresarial, ya sabes, eso está incrustado en tu cuadrícula, es posible que desees usar ambos juntos. O tal vez quieras formatear ese valor primero antes de representarlo, así que. Hay una pregunta aquí. ¿Puedes establecer alguna validación en el editor, o necesitas escribir la tuya? Hay algunas validaciones incorporadas para algunos de los proveedores incorporados, por ejemplo, el editor de texto largo de AG te permite especificar una longitud máxima. Sin embargo, no hay nada más complejo que eso. Entonces, si necesitas un validador más complejo, ese sería un caso de uso ideal para crear tu propio editor de celdas en lugar de usar uno de los incorporados. Sí, eso es correcto. Y también hay, creo, una función de análisis de valores. Entonces, cualquier valor que provenga del usuario, puedes analizar ese valor si es necesario. Hay un gancho allí, pero sí, si se ingresa un valor que es inválido o algo así, tendrías que codificar esa validación. Grace pregunta, ¿los valores se sincronizan con los datos originales o debo actualizarlos manualmente? Es una excelente pregunta. Vamos a cubrir esto en la persistencia de datos en unos pocos capítulos, así que mantente atento y llegaremos a eso. Entonces, si cambio el ID del cliente a uno que no se muestre primero cuando se usa el orden ascendente. La razón de esto es que cuando estamos haciendo, solo estamos usando el editor de texto por ahora, que en realidad está cambiando esos números de cuenta a cadenas, por lo que la clasificación va a intentar hacerlo numéricamente. Ahora que hemos introducido cadenas, estás rompiendo el formato. Así que no esperaría que funcione correctamente para lo que estamos haciendo ahora. Nuevamente, probablemente usarías un editor de números real que tenemos que escribir nosotros mismos para que funcione correctamente con la clasificación. Pero debería funcionar correctamente para el campo del nombre del cliente. Aquí podrías usar un analizador de valores y simplemente pasarlo a la función de número o a la clase de número, ¿verdad? Y simplemente analizarlo, analizarlo en parseFloat o lo que sea, y hacerlo de esa manera antes de que los datos se vuelvan a insertar en la cuadrícula. Bien, déjame abrir esto aquí. Estamos haciendo la función de edición de celdas, perdón, la edición de celdas. Tengo que ir al ejercicio correcto. Compartir mi pantalla. Bien, genial. Entonces, en este caso, lo que queremos hacer es agregar un editor de celdas de texto largo a nuestro número de cuenta. Entonces, si entramos en el número de cuenta, ahora tenemos nuestro campo conectado y nuestro filtro. Lo que queremos hacer es, primero, hacerlo editable estableciendo eso en true. Y luego voy a decir que para el editor de celdas, en lugar de usar el editor de celdas de texto predeterminado, quiero usar el editor de celdas de texto largo de AG. Y luego también lo voy a tener como un popup, así que voy a hacer que el editor de celdas emergente sea true. Y alejémonos de esto, muévelo. No, guardé. Y ahora, si entro en el número de cuenta y hago doble clic en eso, obtengo un editor de celdas de texto largo y está en este popup. Bien, genial. Avísanos si tienes alguna pregunta, de lo contrario, sigamos adelante y hablemos sobre el componente de editor de celdas a continuación. Ok, los editores de celdas incorporados son bastante básicos, pero ya hemos encontrado algunos casos de uso en los que estamos hablando de limitaciones, como validar los datos que estamos ingresando en estos elementos o asegurarnos de que estemos utilizando los tipos de datos correctos al salir de estos controles. Y esos son casos ideales en los que podrías querer escribir tus propios componentes de editor de celdas personalizados. Bien, si aún no estás familiarizado con el editor de celdas, puedes ir a mi blog y profundizar un poco más en eso. Entonces, los proveedores incorporados son adecuados, pero podemos crear editores de celdas personalizados utilizando React para permitir al usuario editar los datos en nuestra cuadrícula utilizando controles más potentes. Entonces, esto es lo que queremos hacer. Vamos a construir un componente de editor de celdas de color personalizado utilizando React. Ya hemos hablado anteriormente sobre el color del producto. Esto nos permitirá editar el color de algunos de los productos o los pedidos. Esta es una colección de respuestas estructuradas en un campo de entrada de color que podrías imaginar que tal vez te pongas en contacto con tu biblioteca de componentes favorita de React para elegir un selector de colores más elegante si tu biblioteca de componentes de elección lo tiene. Habrá algo interesante o diferente acerca de estos editores de celdas en el sentido de que tendremos que interactuar con la API de ag-grid de una manera diferente. Entonces, un editor de celdas tiene un par de métodos diferentes y solo hay uno realmente con el que debemos preocuparnos para esta variante de React y ag-grid, y ese es el método getValue. Entonces, vamos a implementar o proporcionar a ag-grid un método getValue desde dentro de nuestro componente de editor de celdas y se invocará después de completar la edición. Cuando el usuario desenfoca los controles o cierra el popup para proporcionar el valor de regreso a la cuadrícula que el usuario ha ingresado. Para establecer esta comunicación, tenemos que usar algunos hooks de React más avanzados aquí para hacer posible esta comunicación. Como mencioné, ag-grid necesita que le demos una función getValue que le indique cómo obtener el valor de este control. Entonces vamos a usar el hook useImperativeHandle aquí para personalizar la referencia que se envía de vuelta a ag-grid y exponer el método de devolución de llamada que ag-grid espera. Sé que es un poco complicado.

Recomendaría encarecidamente leer la documentación de React sobre el hook useImperativeHandle si deseas obtener más información sobre lo que está sucediendo bajo el capó de useImperativeHandle. Es realmente útil cuando intentas construir entradas elegantes utilizando React. Y eso es básicamente lo que estamos haciendo aquí, estamos construyendo entradas muy elegantes para que ag-grid las consuma y nos aseguramos de que todas las entradas que desarrollamos para ag-grid se adhieran a esta interfaz de tener este método getValue. Hay un par de otros métodos que podríamos implementar en este hook useImperativeHandle. Hay hooks para cuando se llaman cuando el usuario comienza a editar o deja de editar o cancela la edición que podríamos usar para personalizar parte del comportamiento de la experiencia de edición. Pero para este taller, nos vamos a centrar en este gancho getValue.

Entonces, en este ejemplo, ¿qué está sucediendo aquí? Bueno, tengo un estado que voy a usar para controlar el valor de una entrada de color. Cuando se interactúa con la entrada de color, vamos a actualizar o cambiar el estado. AG Grid va a llamar a esto con un conjunto de propiedades de edición de celdas y podemos usar eso para obtener el valor actual de la celda que se está editando. Entonces, vamos a comenzar con el valor actual. Estos van a interactuar con el editor de celdas, actualizar este estado. Y luego, cuando cierren el editor, tal vez presionando la tecla Enter o Escape o alejándose de él, AG Grid va a llamar a getValue para obtener el valor final que se produjo a partir de esta interacción. Usando esto, podríamos construir un editor de celdas completo. Así que veamos cómo podría ser un ejemplo completo. Voy a abrir esto en StackBlitz para que puedas ver un ejemplo en ejecución. Ahí estamos. Entonces, veamos aquí. Oh, creo que esto en realidad podría no estar del todo correcto. Sí, ahí vamos. Así que tengo mi ejemplo completo aquí. ¿Y qué estoy haciendo? Ya hemos hablado sobre la parte del estado aquí. Entonces, esto es lo que vamos a usar para vincular o capturar el estado del valor de nuestra entrada. Y luego estoy usando el gancho useImperativeHandle para exponer este método getValue a AgGrid, que sabe cómo leer el valor de mi entrada. Voy a usar un efecto aquí, específicamente usando esta referencia de entrada que he vinculado al control de entrada para enfocar esta entrada cuando se renderiza por primera vez este componente. Entonces, cada vez que abramos el editor de celdas, debería enfocar esos controles para que el usuario pueda comenzar a interactuar de inmediato y elegir un color. A partir de ahí, simplemente vamos a renderizar una entrada. Tengo el tipo establecido en color para que se utilice el selector de color incorporado del navegador. Cuando el usuario elija un nuevo color, vamos a actualizar este estado. Cuando salgamos de este selector de color, AgGrid va a llamar a este método getValue para leer el color que se estableció. Así que aquí tengo este color. Voy a hacer doble clic en la celda para obtener la experiencia de edición. Y ahora puedes ver aquí que tenemos el selector de color incorporado del navegador. Puedo usar esto para elegir un color diferente. Tal vez queramos robar este color. Y luego, cuando presiono Escape, puedes ver que el color se almacenó o cambió aquí. Para configurar esto, una vez que haya escrito mi clase o función de editor de color, lo que puedo hacer es, en mi cuadrícula, en la definición de columna, simplemente especificar esa función como el editor de celdas. Entonces, en lugar de usar uno de los enfoques basados en cadenas que hicimos anteriormente, simplemente inserto una referencia a ese componente React aquí como mi editor de celdas, y eso le indica a AG Grid que use ese componente React para la experiencia de edición. ¿Hay alguna pregunta sobre el editor de celdas personalizado antes de que te toque a ti probarlo? Muy bien. Entonces, repasemos rápidamente qué está sucediendo aquí, qué hace cada gancho dentro de este ejemplo. useState contiene el valor del editor de celdas, useRef configura una referencia para la entrada de color y useEffect enfoca la entrada cuando se abre el editor de celdas. Vamos a hablar de esto, pero al registrar componentes, podemos proporcionar la referencia del componente directamente en la definición de columna. También existe la posibilidad de registrar el componente utilizando una constante de cadena. La ventaja de este enfoque es que si quisiéramos serializar nuestras definiciones de columna por alguna razón, podríamos hacerlo. Finalmente, insertamos ese editor de color como el editor de celdas para el campo de color. Con eso, te lo dejo a ti. Oh, parece que falta un pequeño descanso en las diapositivas. Lo siento por eso. Pero puedes abrir el ejercicio en StackBlitz para que puedas ver un ejemplo en ejecución. Ahí está. Entonces, aquí tienes que hacer tres cosas. Gran parte de esto ya está hecho por ti, pero espero que esto te dé una idea de cómo escribir tu propio editor de celdas personalizado utilizando React. Te doy un par de minutos para hacer esto y luego Bryan te guiará a través de la solución.

Muy bien. ¿Deberíamos seguir adelante y comenzar con la solución? Adelante. Muy bien, ya hemos conectado el editor de color y hemos hecho gran parte del código base, casi configurando las props y tenemos nuestro gancho useImperativeHandle o gancho useEffect, como Mike nos mostró en el ejemplo y nuestro input. Lo primero que debemos hacer es usar props.value para establecer el valor inicial de la entrada. Entonces, en lugar de la cadena vacía, vamos a usar props.value aquí. Y luego necesitamos retornar el valor porque una vez que el editor está, la experiencia de edición está terminada ya sea que presionen enter en su teclado o desenfoquen el campo o algo así, esta función getValue será invocada por ag-grid y vamos a retornar nuestro valor actual que está en nuestro estado. Y luego lo último que debemos hacer es ir a la cuadrícula y necesitamos establecer la propiedad cell editor para usar el editor de color y necesitamos establecer la propiedad editable como true. Entonces hagamos editable, true. Y luego no queremos usar el editor de texto, queremos usar nuestro editor de celdas personalizado y vamos a usar el editor de color. Y ya hemos importado ese editor de color aquí arriba para que podamos usarlo. Ahora hacemos doble clic, deberíamos poder ingresar y cambiar el color utilizando un componente personalizado para la edición de celdas. Y tenemos la solución esbozada aquí y también puedes ver la solución en StackBlitz. Y te proporcionará más detalles sobre la edición de celdas con un componente personalizado.

Muy bien, sigamos adelante y hablemos sobre la persistencia de datos. Ok, hasta este punto, estamos realizando cambios utilizando la experiencia de edición de celdas, pero en realidad no estamos persistiendo esto en ningún lugar. Y la razón por la que parece que se está persistiendo es porque lo que ag-Grid está haciendo es simplemente mutar los datos a los que estás enlazando en la cuadrícula. Y por eso vamos a hablar sobre cómo manejar algunas de estas mutaciones o cómo incluso evitar parte de la mutabilidad que está ocurriendo.

Tenemos varias opciones para persistir datos. Por defecto, como se mencionó, el campo enlazado en los datos de la fila se actualiza directamente, ag-Grid simplemente muta los datos a los que estás enlazando allí. Y así podemos escuchar estos cambios utilizando la función value setter como una forma de notificar, o persistir estos cambios tal vez en el backend o hacer saber a un componente padre que algunos de estos datos han sido actualizados. La API de la cuadrícula también nos proporciona algunos eventos a los que podemos escuchar, y estos se exponen como props en el componente react de ag-Grid. Y así voy a hablar de ellos a un nivel alto. No hay ejercicios aquí, solo quiero repasar algunas estrategias generales sobre cómo manejar la persistencia de datos desde la experiencia de edición de celdas.

Primero, hablemos de la función value setter. Esto es cuando los datos son gestionados por la cuadrícula, y esto es lo opuesto de la función value getter que ya hemos escrito. Será invocada por ag-Grid con el conjunto de valores del objeto params. Y lo que podemos hacer es informar a ag-Grid si hemos actualizado exitosamente los datos. Podemos devolver true en la función value setter para indicar a ag-Grid que la actualización fue exitosa. Necesitamos actualizar la celda. Podemos devolver false para indicar que el valor no se actualizó. En cuyo caso, la celda no se actualizaría. Veamos un ejemplo. Como la mayoría de las cosas, especificarías un value setter en las definiciones de columna. Así que aquí para el nombre del cliente, he escrito un value setter. Los parámetros que se le pasan te dan el valor antiguo y el valor nuevo. Así que aquí podríamos inspeccionar para ver, hey, ¿el valor antiguo es igual al valor nuevo? Si es así, no es necesario actualizar o refrescar la celda. No lo vuelvas a representar. No lo vuelvas a dibujar. Simplemente devuelve false. Todo está bien. Si los valores no coinciden, entonces algo ha cambiado aquí, y tal vez queremos notificar a un componente padre que esto ha sucedido. Entonces tal vez llamemos a una prop que se nos pasó para informar al padre al respecto. Y en ese caso, devolveremos true a ag-Grid para que ag-Grid sepa que necesita volver a representar esta celda.

Hay algunas cosas que debemos saber sobre esto. Primero, estamos verificando si el valor antiguo es estrictamente igual al valor nuevo. Puedes implementar la comparación que desees aquí. Estamos utilizando una igualdad estricta. Si es así, devolvemos false para indicar que la celda no necesita actualizarse. Y para explicarlo con más detalle, lo que estamos hablando es como una especie de optimización de rendimiento aquí. Hemos hablado de todo el proceso de representación de celdas. Esta es una forma de escapar de ese proceso de representación de celdas o decir, hey, no vuelvas a representar toda esta celda. Nada ha cambiado aquí. A continuación, llamamos a una función de devolución de llamada onNameChange para notificar al componente padre que el valor ha cambiado. Esto puede pasarse como una propiedad a nuestro componente. En ese caso, vamos a devolver true para que AGgrid sepa que necesita volver a representar la celda y pasar por todo ese proceso de representación de celdas una vez más. Hay otra forma de manejar algunos de estos cambios. Entonces, asumiendo nuevamente que queremos que AGgrid se encargue de administrar los datos y estamos de acuerdo con la mutabilidad, otra forma en la que podemos escuchar los cambios es manejando el evento onCellValueChanged. Esto se emitirá cada vez que se actualice el valor de una celda después de una edición del usuario. Por lo tanto, esto se expone como una propiedad a la que podemos enlazar en el componente AGgrid de React. Y esto nos dará este evento de cambio de valor de la celda que podemos manejar para hacer lo mismo que acabamos de hacer antes. Entonces, aquí en la plantilla que estoy devolviendo desde nuestro componente de cuadrícula, estoy enlazando a la propiedad onCellValueChanged. Y dentro de aquí, también puedo inspeccionar el valor antiguo y el valor nuevo. Y en este caso, simplemente los registro. Nuevamente, esto todavía permite que AGgrid administre los datos, simplemente está mutando los datos internamente, pero al menos podemos recibir notificaciones de que algo ha cambiado si necesitamos hacer alguna notificación o persistencia en nuestra API.

De acuerdo. Hay otro método que creo que probablemente sea un poco más amigable para mí como alguien a quien le gusta manejar los cambios de datos yo mismo y quiere evitar la mutabilidad. Hay un evento onCellEditRequest. Se emite cuando el valor de la celda ha cambiado después de la edición, pero esto solo sucederá cuando la cuadrícula esté en modo de solo lectura. Entonces, cuando tu cuadrícula esté en modo de solo lectura, AGGrid ya no estará mutando los datos a los que está vinculado. En cambio, te dejará a ti manejar los cambios en cómo actualizar los datos de la fila. Para usar el evento de edición de celda, debes poner la cuadrícula en modo de solo lectura. Una vez que hayas hecho eso, podemos usar una propiedad similar, la propiedad onCellEditRequest, para manejar cualquier cambio en nuestros datos. Echemos un vistazo a un ejemplo de esto. Hay algunas cosas que debemos hacer que son un poco diferentes. Primero, debemos decirle a AG Grid cómo construir IDs para cada fila individual. Dado que ya no está administrando los datos internamente en AG Grid, no podrá hacer parte del hashing de rendimiento que realiza internamente para construir hashes para las filas y realizar un seguimiento de qué filas son qué. Por lo tanto, deberás decirle a AG Grid cómo identificar qué fila es qué. Esto debería ser muy familiar para ti si alguna vez has especificado una clave al mapear un array en un montón de elementos JSX. Necesitas proporcionar una referencia estable a cada una de tus filas. A partir de ahí, pondremos nuestra cuadrícula en modo de solo lectura. Diremos que readOnlyEdit es true. Esto significa que a partir de este momento, AG Grid no está administrando los datos por sí mismo. Va a depender de ti. Estamos en el terreno de la inmutabilidad aquí. Luego, obtenemos esta devolución de llamada on-cell edit request que nos permite manejar cada vez que cambia un dato. Nos dará el valor anterior antes de la edición y el nuevo valor que se solicita que cambiemos. En este caso, solo estamos registrando los datos, pero aquí es donde querrías aplicar realmente los cambios de forma inmutable a tus datos de fila, en lugar de confiar en que AG Grid mute los datos de fila por ti. Así que repasemos lo que está sucediendo aquí. Cada vez que estamos en modo de solo lectura, que es el que recomiendo que uses, me resulta más familiar para los desarrolladores de React. Primero, usarás la propiedad getRowId para proporcionar referencias estables a cada fila única. Así que debes construir una ID o una clave que permita a AG Grid saber qué filas son qué. Y nuevamente, eso es por razones de rendimiento para que puedan optimizar la experiencia de renderizado para cada fila. A continuación, hemos habilitado el modo de solo lectura estableciendo la propiedad readOnlyEdit en true. Y finalmente, nos enlazamos a esta propiedad onSellEditRequest para manejar el evento SellEditRequest. Obtenemos este objeto de evento SellEditRequest que contiene el valor anterior y el nuevo valor que se solicita. En este ejemplo, solo lo estamos registrando. Entonces, ¿cómo lo actualizamos realmente? Bueno, en este momento solo estamos registrando los datos, pero debido a que estamos en modo de solo lectura, ya que solo los estamos registrando, el valor no se está actualizando realmente. Necesitaríamos usar una estrategia para actualizar el valor de la celda. Usando la función getRowId, recomendaría encarecidamente usar algunas estructuras de datos inmutables aquí. Tal vez estés usando Redux y quieras usar el patrón Redux para administrar tus datos de forma inmutable, o tal vez estés usando EmberJS y quieras actualizar los datos de esa manera, o cualquiera que sea tu estrategia de datos inmutables, deberías usarla en conjunto con el método getRowId para guardar ese valor. Luego, usa el método setRowData de la API de la cuadrícula para establecer realmente los datos nuevamente y aplicar eso, o podrías aplicar esa transacción a través de la API de la cuadrícula para que sepa que debe tener lugar si estás en modo de solo lectura. Brian, ¿hay algo que quisieras agregar allí? No, creo que lo cubriste todo. Entonces, nuevamente, eso fue bastante general. No hay ejercicios para persistir, así que siéntete libre de echar un vistazo y revisar las diapositivas. Cubre, nuevamente, todas estas diferentes estrategias que puedes invocar en tus aplicaciones AGGrid para persistir estos valores. En estos ejemplos, vamos a seguir con el enfoque de mutación donde AGGrid es responsable de administrar sus propios datos, pero en una aplicación de producción, recomendaría encarecidamente ponerlo en modo de solo lectura y manejar esas actualizaciones tú mismo utilizando estructuras de datos inmutables. Absolutamente. Voy a pasarle la palabra a Brian para hablar un poco sobre la estilización.

Muy bien, en los últimos 10 minutos, vamos a ver cómo puedes estilizar AGGrid. Vamos a hablar sobre estilos de celda, vamos a hablar sobre estilos de fila y vamos a aprender cómo personalizar los temas que proporciona AGGrid. AGGrid tiene varios temas predefinidos. Hemos estado usando el tema Alpine todo el tiempo. Hay el tema Ballroom, el tema Alpine y un tema Material. Esos temas son personalizables. Podemos sobrescribir los estilos CSS globales que están en nuestra aplicación para estilizar la cuadrícula. También podemos personalizar el estilo de las celdas y filas. Echemos un vistazo a ambos. Hay una recomendación general de AGGrid aquí. Al sobrescribir los estilos CSS globales, hay muchas clases en AGGrid a las que puedes apuntar, como agsel, agrow, todas estas cosas si quieres aplicar estilos CSS de forma global, y se te anima a hacerlo. Pero lo que debes tener en cuenta es que no debes cambiar la posición CSS, el desbordamiento o los eventos de puntero, ya que la cuadrícula depende de ellos y podrías tener algunos problemas con eso. Muy bien, hablemos de los estilos de celda. Podemos especificar estilos de celda utilizando la propiedad cellStyle y una definición de columna. Podemos agregar clases utilizando la propiedad cellClass y luego podemos agregar y eliminar clases utilizando la propiedad cellClassRules. Echemos un vistazo a cada uno de ellos. En este caso, estoy usando la propiedad cellStyle. Dentro de nuestra definición de columna, simplemente puedo codificar el estilo de celda. Es algo así como un estilo en línea que se aplicará a ese elemento div. También puedo agregar clases de celda y aceptar un array de cadenas, y puedo aplicar esas clases a las celdas de esta fila. Entonces, en mi columna de nombre de cliente, todas esas celdas tendrán la clase customer-name aplicada. Y puedo tener varias aquí. Y también puedo tener una función de devolución de llamada para la clase de celda donde recibe un objeto de parámetros. En este caso, estoy desestructurando eso y simplemente estoy seleccionando el valor.

Y voy a hacer alguna lógica y decir, hey, si el valor es igual a cero, entonces quiero que la clase de celda sea error, de lo contrario vamos a tener nombre de cliente, y luego puedo apuntar esas clases para estilizar esas celdas adecuadamente. También puedo tener reglas de clase de celda. Las reglas de clase de celda son un objeto, y la propiedad del objeto es la clase que se aplicará condicionalmente, agregará o eliminará a esa celda. Luego tengo una función de devolución de llamada que recibe ese objeto de parámetros de clase de celda. Y puedo hacer cualquier tipo de lógica que desee dentro de aquí para devolver un booleano verdadero o falso que luego le dirá a AG Grid que agregue o elimine la clase apropiada en esa celda. Hay algunas cosas a tener en cuenta en cuanto a la actualización de celdas y estilos. Entonces, al usar la propiedad de estilos de celda, podemos agregar y anular los estilos existentes que están en ese div, esos estilos nunca se eliminan. De manera similar con la clase de celda, nos permitirá agregar clases, pero nunca elimina ninguna de esas clases incluso si usamos la función de clase de celda. Finalmente, si usamos reglas de clase de celda, esto nos permite tanto agregar como eliminar clases. En este caso, AG Grid está gestionando qué clases se aplican según las reglas que proporciono en esa definición de columna. Así es como estilizamos celdas individuales dentro de AG Grid.

A continuación, veamos cómo hacer la estilización de filas. Cuando estamos utilizando la estilización de filas, muy similar a la estilización de celdas, tenemos un estilo de fila que puede agregar estilos a todas las filas en la cuadrícula. También hay una devolución de llamada getRowStyle que permite agregar estilos condicionalmente. También hay una clase de fila, que nos permite establecer las clases para todas las filas en la cuadrícula. También hay una devolución de llamada getRowClass para agregar esas clases condicionalmente. Y al igual que antes, tenemos reglas de clase de fila, que nos permiten agregar y eliminar clases. Aquí tienes un ejemplo de cómo podríamos configurar eso en el componente EGGoodReact. Y tengo mis props aquí y puedo hacer un getRowClass y proporcionarle una referencia a esa función de devolución de llamada. Puedo especificar el row class de forma rígida. Puedo hacer las reglas de clase de fila, que es un objeto donde la propiedad es la clase que se aplica, y luego una función de devolución de llamada que devuelve un booleano que agrega o elimina la clase en esas filas. Y luego también puedo establecer estilos de fila de forma rígida. Aquí tienes un ejemplo de esas reglas de clase de fila. Aquí, he creado esta constante a la que estamos vinculando la prop. Y tengo la clase de resaltado de fila que se aplica condicionalmente según el total del pedido. Y tengo una clase de peligro de fila que se aplica condicionalmente, se agrega y se elimina según la fecha del pedido. Y luego también tengo mi función getRowClass y proporcioné una referencia a eso como una prop. Y aquí, estoy agregando condicionalmente una clase de fila. Recuerda que no elimina una clase de fila, en este caso, solo las reglas de clase de fila que agregarán y eliminarán. Entonces, la estilización de celdas y filas es realmente útil si quieres resaltar, nuevamente, tal vez quieras resaltar filas o mostrar que las filas están seleccionadas y todas estas cosas. Por lo tanto, te permite aplicar estilos de manera amplia y condicionalmente utilizando ya sea como CSS en línea o utilizando clases.

Y finalmente, tenemos los temas. Como mencioné, AG Grid tiene varios temas proporcionados. Hay el tema bollum. Este es el original que salió con AG Grid hace años. Lo bueno del tema bollum es que es bastante denso. Entonces, si estás mostrando mucha información y quieres poder mostrar mucha información al usuario, tal vez quieras algo más parecido a Excel o Google Sheets en términos de espaciado y todo eso.

También está el tema Alpine, que es un poco más nuevo que el tema bollum. Es menos denso y tiene un aspecto más moderno. Y finalmente, está el tema material. El tema material sigue generalmente la especificación de diseño material. De los tres, es el menos denso, con mucho espacio en blanco y muy cómodo de esa manera. También debo mencionar que los temas bollum y Alpine también incluyen opciones de modo oscuro. Actualmente no hay una opción de modo oscuro para el tema material. Y podemos personalizar esas cosas. Podemos personalizarlas de varias formas. Podemos usar parámetros de tema, variables CSS, reglas CSS y Sass, mixins y funciones. Veamos cómo podríamos usar eso.

En este caso, vamos a importar el archivo SCSS y el mixin Alpine. Luego voy a usar ese mixin del tema AG, Alpine. Lo voy a personalizar estableciendo algunos valores de propiedad. Hay una documentación a la que puedes acceder en términos de las diferentes propiedades que puedes establecer aquí y cómo funcionan todas. El tamaño de la cuadrícula es como una variable general que se utiliza para calcular muchos tamaños, rellenos, márgenes, todo eso. También puedes personalizar el color activo y desactivar los bordes. Nuevamente, hay mucho más que puedes hacer con esto. Echa un vistazo a la documentación y puedes ver eso. También podemos usar variables CSS. En este caso, voy a anular esas variables CSS. Esta es definitivamente mi enfoque recomendado en términos de personalizar la cuadrícula, aplicando estas variables CSS. Y también pienso en esto como algo que también podemos cambiar en tiempo de ejecución. Así que puedo aplicar colores de fondo, colores de primer plano, colores de borde, todo tipo de cosas usando esas variables CSS. También hay algunas reglas adicionales de SAS o STSS que puedes usar donde tienen estas funciones que puedes invocar y también puedes incluir mixins adicionales. Nuevamente, es un poco más, una vez que te adentras en la personalización real de la cuadrícula, es posible que quieras recurrir a estas opciones. Pero en general, las variables CSS tienden a funcionar bastante bien en mi experiencia. También ten en cuenta que estamos apuntando a algunas de las clases integradas y puedes dirigirte a estas clases si lo deseas. No van a cambiar. Así que puedo decir, por ejemplo, para la fila del encabezado, quiero este color de fondo, y luego para las filas pares, quiero este color de fondo. Por lo tanto, puedes dirigirte a estas clases, la forma más fácil de averiguar cuáles son es simplemente inspeccionar el DOM y echar un vistazo a ellas, y puedes comenzar a dirigirte a esas clases. Nuevamente, recuerda que al principio dije que no cambies nada relacionado con el posicionamiento, los eventos del puntero y tal vez el desbordamiento, no recuerdo bien. Pero ten cuidado de no anular algunas de esas propiedades de estilo porque causarás errores y obtendrás un comportamiento extraño en la cuadrícula. Aquí, nuevamente, supongo que estoy destacando los mixins y funciones. Y creo que eso concluye cómo puedes estilizar la cuadrícula. La parte agradable es que puedes, por lo general, la forma en que abordo esto es que generalmente comienzo con uno de los temas y luego los personalizo después. Sin embargo, podrías intentar escribir tu propio tema. No sé, nunca lo he intentado y no estoy seguro de qué tan complicado sería. No hay un generador de temas o algo así que yo sepa. Pero generalmente comienzo con uno de estos y luego los personalizo. Depende un poco si ya estoy usando Material y tal vez quiera usar Material, pero tal vez quiera hacerlo un poco más denso o cambiar los colores y la apariencia y los bordes y todo eso para que se parezca a mi aplicación. Diré en general que entre la estilización de filas, la estilización de celdas y las personalizaciones de temas, definitivamente puedes hacer que una cuadrícula AG se vea como realmente quieres y cumpla con los requisitos del usuario para tu producto. Con eso, voy a detenerme aquí. Sé que pasamos rápidamente por mucho contenido al final. Si tienes alguna pregunta, avísanos. Y creo que terminamos justo a tiempo. Adelante, Mike. Sí. Iba a decir, creo que Bryan lo mencionó al principio. No trabajamos para AG Grid. Trabajamos para LiveWellap, somos una consultoría que te ayuda a diseñar, desarrollar y entregar aplicaciones con alegría. Si bien no trabajamos para AG Grid, ciertamente amamos AG Grid. Así que no dudes en contactarnos si necesitas ayuda con tu implementación de AG Grid, revisiones de código, masterclasses y consultoría. Solo quería agradecerles a todos por unirse a nosotros esta mañana. Espero que tengan un gran día durante el resto de la masterclass. Gracias.