Construye un potente DataGrid en pocas horas con Ag Grid

Muy bien, buenos días a todos. Estoy realmente emocionado de ser vuestro Instructor de Masterclass hoy. Mi nombre es Mike Ryan. Soy un Experto Desarrollador de Google en Angular y Tecnologías Web. Si me conoces del espacio Angular, entonces probablemente has usado algo de mi trabajo de código abierto incluyendo ngRx, el Redux para Angular. Y también soy un experto en AG Grid. Así que estoy realmente emocionado de hablaros sobre AG Grid hoy. También soy un arquitecto de software en LiveLoveApp.

Ahora, en términos de esta masterclass, es un poco diferente a otras masterclasses en que todas las diapositivas, ejercicios y desafíos van a estar en línea hoy. Así que si quieres, vas a ir a liveloveapp.com slash cursos. Y déjame mostrarte lo que vas a ver una vez que vayas a ese enlace. Así que si vas a liveloveapp.com slash cursos, vas a ver un par de diferentes masterclasses para seleccionar. Vamos a hacer la de Introducción a AG Grid y React. Así que vas a pulsar vamos en eso. Y luego verás la tabla de contenidos completa. Voy a pasar por estas diapositivas hoy. Pero a medida que vayas pasando por ellas, puedes pulsar el punto en tu teclado para ponerlo en modo de diapositiva y seguirme. Además, al final de cada tipo de sección o capítulo, va a haber un desafío o un ejercicio para que lo completemos juntos. Todos estos se van a hacer en StackBlitz, un IDE en línea. Así que no tienes que preocuparte por instalar dependencias de NPM o hacer funcionar algo localmente. Vamos a hacer todos nuestros ejercicios hoy usando StackBlitz. Así que, de nuevo, voy a dar a todos un segundo para que lo abran. Vas a ir a liveloveapp.com slash cursos, y luego vas a elegir la masterclass de introducción a AG Grid y React en dos horas. Y luego, una vez que todos hayan tenido un momento para abrirlo y cargarlo, procederemos desde allí. De nuevo, liveloveapp.com slash cursos, y luego haz clic en la Masterclass de Introducción a AG Grid y React en Dos Horas.

Muy bien, mientras todos están abriendo eso, quiero dar una pequeña introducción a lo que es AG Grid. Así que AG Grid es una de las cuadrículas de JavaScript más potentes del mundo. Proporciona una experiencia similar a Excel para visualizar data. Y lo que hace que AG Grid sea realmente único es que ha tenido una cantidad de trabajo realmente enfocada en el performance. Así que AG Grid puede manejar, en mi experiencia, millones de filas de data. Puede hacer algunas funcionalidades realmente poderosas similares a Excel como pivotar data, hacer que data sea editable en tiempo real desde la perspectiva del usuario, visualizar data con gráficos y gráficas. Prácticamente cualquier cosa que puedas necesitar para una cuadrícula de data, AG Grid puede manejarla. Y por eso nos gusta mucho enseñar AG Grid porque lo usamos en muchos de nuestros proyectos de clientes en LiveLoveApp, donde soy uno de los arquitectos de software en el personal. Y para nuestros clientes, los hemos visto hacer de todo, desde apuestas deportivas hasta transacciones financieras hasta visualizar registros en tiempo real que provienen de un servidor backend. Así que AG Grid es una biblioteca realmente dinámica y poderosa.

Para instalar AG Grid con React, vamos a entrar en ello. Para empezar, si fueras a hacer esto localmente, de nuevo, no tienes que hacer esto en tus máquinas esta mañana porque haremos todo en StackBlitz. Pero si quisieras hacer esto en tu proyecto React, empezarías instalando el paquete de la comunidad AG Grid y los modules de AG Grid React. Ahora, una rápida nota sobre esto, AG Grid es gratis. Es completamente gratis de serie usando el paquete de la comunidad AG Grid. También hay una versión enterprise de AG Grid que viene con características más poderosas. Sin embargo, todas las cosas que enseñaremos hoy vienen en esta edición de la comunidad de AG Grid que se proporciona completamente gratis con soporte de código abierto en línea. Y luego el Paquete AG Grid React nos va a proporcionar enlaces nativos de React a AG Grid directamente, y eso es lo que vamos a usar hoy para interactuar con AG Grid, vamos a usar el envoltorio de React alrededor de él. Además, necesitas importar al menos un tema para empezar. Así que AG Grid no tiene tema de serie. No aplica ningún CSS. Esto es realmente genial si tienes el tiempo y la energía para construir un tema personalizado y realmente quieres detallar la forma en que AG Grid se ve y se comporta para tu aplicación, pero también viene con algunos grandes temas de serie. Así que si fueras a usar AG Grid en tu proyecto hoy, podrías importar uno de los temas de la carpeta de estilos en el paquete de la comunidad AG Grid. para nuestros ejercicios, estaremos usando el tema Alpine. Es un gran pequeño tema. También tienen incorporados los que te dan un aspecto de estilo material. Así que si estás buscando más como un Flair Material de Google, eso también está disponible para ti. Como nota, estaremos cubriendo más estilos personalizados en detalle durante esta masterclass hoy. Así que si tienes curiosidad sobre cómo llegar a alguna de esa funcionalidad de estilo personalizado con AG Grid, no te preocupes. Lo estaremos cubriendo. Así que con eso, vamos a entrar directamente en AgGrid y hablar de cómo usarlo.

Así que el constructo más importante en AgGrid es algo llamado la definición de columna, ¿verdad? AgGrid va a ser una cuadrícula de data, y por lo tanto, se va a construir sobre columnas y filas de data. y cuando estás mostrando data con AG Grid, por defecto, va a mostrar cada elemento en tu colección de data como una fila en esta cuadrícula, y por lo tanto las columnas y las definiciones de columna van a instruir a AG Grid sobre cómo representar realmente diferentes propiedades dentro de ese conjunto de data. Cada columna que queremos mostrar en nuestra cuadrícula se va a definir usando un objeto CallDef. Por defecto, las columnas van a estar posicionadas en el orden que coincide con la definición de columna especificada. Así que, vamos a pasar a AGGRID una especie de array de definiciones de columnas. Y empezando desde la parte superior hacia abajo, va a ser el mismo orden que veremos las columnas en nuestra aplicación de izquierda a derecha. Para empezar con ello, vas a definir algunas definiciones de columnas, y luego vas a importar el AGGRID.react componente de ese paquete AGGRID.react. Es solo un componente de React, así que lo vas a soltar dentro de cualquier componente de React en el que quieras renderizar la cuadrícula. Y luego vas a vincularte a la propiedad de definiciones de columna en ese componente AG React. A partir de ahí, puedes empezar a definir esas definiciones de columna. Así que en este ejemplo, tengo una interfaz para la fila data. Y en esta colección de data, tengo un nombre y un color. Y así puedes imaginar que solo estoy mostrando un montón de colores y sus nombres aquí. Y si quisiera crear algunas definiciones de columna para mostrar esta data, bueno, voy a crear un pequeño array aquí. Estoy usando el gancho de devolución de llamada de estado de uso para que pueda hacer esta lista de definiciones de columna dinámica. Y así tengo mis definiciones de columna aquí. Y puedes ver que mi primera columna va a mostrar el campo nombre. Y le voy a dar un nombre de encabezado de nombre. Y luego para mi segunda columna, voy a mostrar el campo color de este conjunto de data y le daré el nombre color.

Entonces, ¿cómo se conecta todo esto? Bueno, esta sección de campo aquí apunta directamente al nombre de la propiedad en mi fila data. Y luego este nombre de encabezado va a ser lo que realmente mostramos al usuario. Así que vamos a seleccionar esta propiedad de nuestro conjunto de data, y le vamos a dar este nombre representado al usuario. Lo mismo aquí. vamos a seleccionar la propiedad color y luego le daremos este nombre cuando realmente lo mostremos al usuario. En su forma más simple, una definición de columna va a especificar el nombre a mostrar. Acabamos de hablar de esto. Y luego el campo del objeto de fila para obtener los data. Ahora, quiero destacar que esto puede aceptar una referencia profunda. Así que, si tuviéramos una estructura de data más compleja con tal vez propiedades anidadas y objetos, podemos usar la notación de punto del objeto para llegar o profundizar en nuestra estructura de data. Así que en el ejemplo anterior, sólo estaba seleccionando la propiedad de nivel superior. Pero si, por ejemplo, quisieras ir más profundo y quisieras obtener como el primer nombre de un campo de cuenta que existe en el campo de usuario, podrías usar la notación de punto para profundizar en esa data.

Esta masterclass completa va a estar en TypeScript. Y quería destacar que en la versión 28 de AG Grid, se mejoraron mucho los tipos de TypeScript. Y así vamos a aprovechar eso en la masterclass de hoy. Así que noten que hemos especificado que hay una interfaz de data de fila, y vamos a suministrarla a algunos de los tipos genéricos dentro de aggrid. Así que nos mantenemos bastante estrictamente tipados durante todo este proceso. Esto puede darnos un mejor control de tipos. Va a asegurarse de que estamos usando las APIs de aggrid de la manera correcta. Y va a asegurarse de que esas definiciones de columna donde estamos usando cadenas para hablar de qué propiedades estamos seleccionando están fuertemente tipadas para obtener algunas de esas propiedades.

Así que con eso, hablemos de data de fila, porque ahora tenemos nuestras definiciones de columna. Pero ¿qué pasa con la data de fila, los data reales que queremos suministrar a la cuadrícula? Bueno, en general, hay dos modelos de fila proporcionados por AG Grid en el paquete de la community. Y luego hay dos que se proporcionan a través del paquete enterprise. Hoy, vamos a usar el modelo de fila del lado del cliente. Y la forma en que funciona el modelo de fila del lado del cliente es que espera que todos los data ya existan en el cliente. Tal vez lo hemos obtenido de una API nosotros mismos. Tenemos los data que queremos vincular. También hay un modelo de fila infinita. Así que este es uno donde tal vez tienes una API que puede paginar por ti, y así como el usuario se desplaza por la cuadrícula, quieres mostrar el siguiente conjunto de filas de forma dinámica. Eso también está soportado en la Edición Community. Hay más modelos de fila advanced o más capaces incluidos en la Edición Enterprise que sólo quiero mencionar rápidamente, y creo que vamos a entrar en algunos de estos en más detalle aquí en un segundo. Pero el modelo de fila del lado del servidor es un modelo de fila extremadamente poderoso que esencialmente te permite configurar las definiciones de columna, y esas se traducirán en un objeto AG Grid que se pasa a tu lado del servidor, donde puedes calcular o calcular ese modelo de fila o esa configuración en tal vez una consulta SQL advanced o algo así. Es realmente excelente cuando estás tratando de mostrar un montón de data y quieres dar al usuario una gran cantidad de flexibilidad en cómo se representa esa data. Así que también el modelo de fila de la ventana de visualización, que es sólo un modelo de fila infinita más poderoso, pero maneja cosas como el desplazamiento horizontal además del desplazamiento vertical, que podría ser útil cuando estás haciendo cosas como pivoteo. Así que en general en esta masterclass de hoy, vamos a usar el modelo de fila del lado del cliente, es el modelo de fila por defecto dentro de AG Grid, y es el más simple porque sólo espera que ya hayas obtenido los data. Y así que es genial para nuestro caso de uso porque no, no tenemos una API real para llamar. Y así, sabes, eso es algo a tener en cuenta.

Así que veamos un ejemplo rápido de cómo va a funcionar esto. Sólo voy a cargar esto, y podemos empezar con ello. Así que en este ejemplo, lo que está pasando es que tengo mis definiciones de columna, de nuevo, para este conjunto de data de nombre y color. Y luego lo que estoy haciendo es que he traído algunos data falsos de un pequeño archivo JSON local que tiene estos nombres y colores disponibles para mí. Y estoy vinculando o configurando de nuevo otro gancho de estado de uso para que pueda hacer estos data dinámicos, pasando todos esos productos que tienen ese campo de nombre y color adjunto. y luego estoy usando el componente AG Grid React para vincular esas definiciones de columna que hemos definido aquí arriba al componente junto con la data de fila que hemos cargado de ese archivo JSON al componente. Y así el efecto de esto es si miramos a la derecha aquí puedes ver que tenemos AG Grid funcionando. Así que esta es una cuadrícula de data muy simple pero tenemos esa columna de nombre listada primero y tenemos una columna de color listada en segundo lugar. Y a medida que me desplazo por podemos ver que todos los data se están renderizando y tenemos un gran rendimiento. Cuando abras este ejemplo, verás que está funcionando muy rápido. Tenemos un gran rendimiento ya saliendo de este conjunto limitado de data. Así que hagamos una revisión rápida.

Antes de pasar al primer ejercicio, quería hacer una pausa y ver si hay alguna pregunta de alto nivel sobre ag-grid, definiciones de columna o row data. Sé que esto ha sido una introducción muy básica hasta ahora, pero si hay alguna pregunta, no dudes en dejarla en el chat grupal, o también puedes encender tu micrófono y preguntar. Te daré solo un minuto más para ver si hay alguna pregunta, y luego pasaremos al primer ejercicio.

Muy bien, hagamos el primer ejercicio. Entonces, nuevamente, vas a estar en liveloveapp.com slash courses. Voy a dejar un enlace a este ejercicio específico en el chat. Así que si no lo has abierto, revisa el chat de zoom, puedes hacer clic en ese enlace y abrirás el ejercicio de stack looks. Y vas a hacer dos cosas. Vas a especificar la propiedad de definición de columna y vincular eso al componente AG grid react. Y luego establecerás la propiedad row data utilizando los productos existentes de la importación de data y la vincularás al componente AG grid react.

Entonces, si miras el trabajo que tenemos que hacer aquí, también lo verás en los comentarios. Debería coincidir con el ejemplo que acabamos de ver. Pero vas a especificar un estado de definición de columna y lo vincularás al componente AG Grid React. Y vas a establecer el estado row data utilizando la importación de data existente de la línea 4. Vas a hacer data.products y lo vincularás al componente AG Grid React en la propiedad row data. Así que os daré solo unos minutos aquí para trabajar en este ejercicio en particular y luego alrededor de las 9 25 volveremos y repasaremos la solución y por supuesto estoy aquí todo el tiempo así que si tienes alguna pregunta te quedas atascado necesitas ayuda no dudes en dejar tu pregunta en el chat y responderé a la pregunta así que lo primero que necesitábamos hacer es que necesitábamos especificar el estado de definición de columna y vincularlo al componente ggrid-react. Así que voy a usar el hook de estado aquí con el tipo genérico call def y voy a pasar row data como un genérico a eso. Y entonces, dentro de aquí, quiero especificar qué columnas quiero mostrar para mis data. Así que podría hacer mis campos así, y de hecho así es como voy a empezar. Así que voy a pasar el nombre y el color, y podemos ver que estos van a ser extraídos de este tipo row data. Y la segunda cosa que necesitábamos hacer es que necesitábamos establecer el estado row data utilizando data.products. Así que ahora los hemos cargado y los tenemos listos para ir. Voy a vincular estos al componente aggrid react. Así que tengo aquí call defs y luego row data. Ahora que hemos hecho eso, puedes ver que realmente tenemos algunos data que se nos muestran. Pero lo que nos falta es alguna capacidad para personalizar esto. Puedes ver que ya nos ha dado el nombre. Pero si quisiéramos cambiar ese nombre, podría hacer algo como header name aquí. Y podría establecer esto para ser algo más personalizado. Así que ahora que he hecho eso, puedes ver que tenemos un nombre personalizado que se muestra como el nombre de esta columna. Y luego lo mismo para aquí. Puedes hacer header name y personalizar eso. ¿Hay alguna pregunta sobre cómo vincular esto o cómo empezar a usar el componente AG Grid React? Si no, pasaremos a la siguiente sección. Hoy me lo vais a poner fácil. Muy bien. Sigamos entonces. Entonces, ahora que tenemos algunos data que se muestran, podemos ordenar los data o dar al usuario la capacidad de ordenar los data. Así que, podemos habilitar o deshabilitar la capacidad de ordenar una fila usando la propiedad sortable en esas definiciones de columna. Y de hecho, gran parte de la funcionalidad de AGGRID se va a exponer a través de esos objetos de definición de columna. Obviamente, header name y name no van a ser las únicas dos cosas que podemos especificar allí. por defecto, las columnas no pueden ser ordenadas por el usuario. Y así que el valor sortable en una definición de columna se establece por defecto en un valor de false. Podemos dejar que adGrid haga la clasificación por sí mismo, y va a tener soporte incorporado para cadenas, números y fechas. Pero también podemos implementar algún tipo de clasificación personalizada si queremos pasando una función a la propiedad comparador. Y tiene la misma firma de función que el tipo de función que pasarías a array.sort. Así que vas a tomar dos objetos y devolver un menos uno o un más uno, dependiendo de cómo quieras ordenarlo. Pero de nuevo, por defecto, de serie, sabe cómo ordenar cadenas, números y fechas. Y todo lo que realmente necesitamos hacer es establecer ese valor sortable en true. Así que veamos un ejemplo. Si quisiéramos que nuestra cuadrícula permitiera al usuario ordenar por nombre, lo que podríamos hacer es personalizar la definición de columna para el campo nombre y establecer sortable en true.

Los usuarios pueden ordenar varias columnas manteniendo presionada la tecla Shift y haciendo clic en los encabezados de las columnas. También podemos especificar la opción de tabla de clave de multi-ordenamiento para anular el comportamiento predeterminado para esto. Entonces, si no queremos que la tecla Shift sea la forma en que se realiza el multi-ordenamiento, entonces en ese AG Grid componente react podríamos especificar una clave de multi-ordenamiento y decir hey en lugar de hacer shift vamos a hacer la tecla de control para windows o la tecla de comando en mac os déjame mostrarte cómo se vería eso. Voy a ir a este ejemplo que ya tenemos aquí y voy a eliminar algunos de los cambios que hice aquí y en este campo de nombre voy a poner ordenable para ser verdadero. Así que ahora que he hecho el campo de nombre ordenable, si hago clic en nombre, puedes ver que ahora estamos ordenando en el estado ascendente. Si hago clic en él de nuevo, ahora estamos ordenando en descendente, y si hago clic en él una tercera vez, hemos dejado el estado de ordenamiento por completo. Ese es el comportamiento predeterminado de Aggrid. Hay opciones de ordenamiento adicionales que podemos aplicar aquí. Así que si queríamos personalizar eso, volvamos aquí, podemos ver que si queríamos personalizarlo, podemos especificar un arreglo personalizado para el orden de ordenamiento. Voy a hacer trampa y simplemente copiar y pegar. Y voy a aplicarlo aquí. Así que ahora he especificado un orden de ordenamiento personalizado. Si hago clic en esto, primero dice ascendente, luego descendente, y no puedo escapar de un orden de ordenamiento, o no puedo salir de eso ahora. Estoy atrapado en ascendente o descendente. Además, vimos que podemos ordenar varias columnas. Así que si hago el color ordenable también y lo pongo a ordenable, puedo presionar shift para ordenar en base a ambos. Así que puedes ver que estoy ordenando por nombre primero y luego por color segundo. Si quiero ordenar por color primero y luego por nombre segundo, puedo mantener presionado shift y hacer clic en ellos en ese orden. Así que ahora estamos ordenando por color primero y nombre segundo. Como vimos, si queríamos cambiar qué tecla presionar, podemos suministrar esta propiedad de clave de multi-ordenamiento al componente AG Grid React. Así que si voy aquí y pongo la clave de multi-ordenamiento para ser control en lugar de shift, entonces para ordenar por múltiples, ahora puedo mantener presionada la tecla correcta para eso y ordenar de la manera que quiero. Así que como hemos visto, AG Grid admite data ordenable. Puedes personalizar el orden de ordenamiento disponible para el usuario y los usuarios tienen la capacidad de hacer multi-ordenamiento directamente de la caja ¿hay alguna pregunta antes de que pasemos a un ejercicio sobre ordenamiento muy bien, entonces ¿por qué no lo intentas? Así que voy a ir aquí y abrir este ejercicio para que puedas abrir el desafío en stackblitz vas a añadir la propiedad ordenable a una definición de columna. Vas a anular el orden de ordenamiento predeterminado especificando la propiedad de orden de ordenamiento en la definición de la columna. Y luego vas a anular la clave de ordenamiento de múltiples columnas predeterminada especificando la propiedad de clave de multi-ordenamiento en el componente AG-Grippi-I, tal como lo hice yo. Y si no tienes esto abierto, aquí tienes un enlace. Estamos pasando por estas diapositivas aquí y puedes encontrar el enlace a Stack Blitz en eso. Te daré unos cinco minutos más para completar este desafío, y luego volveremos aquí y repasaremos la solución, veamos así que tengo una pregunta ¿alguien más ve el data.json sin un error de módulo y supongo que es por eso que no está renderizando la aplicación sí algunos de los tipos de viaje van a quejarse de que no es un módulo pero aún así debería compilar correctamente así que si no estás viendo el data asegúrate de que tienes las definiciones de columnas y los data de fila vinculados a ese AG grid react realmente no debería gustarle este pequeño error de titrip no debería estar causando ningún problema de renderizado. Si todavía estás luchando con eso, no dudes en darle a fork y guardar en tu desafío. Puedes enviarme un enlace a él y puedo echarle un vistazo. Así que para este desafío, lo que necesitábamos hacer es que queríamos añadir la propiedad ordenable a las definiciones de columnas, luego vamos a anular el orden de ordenamiento predeterminado y luego vamos a cambiar esa clave de multi-ordenamiento. Así que teníamos tres cosas que estábamos tratando de lograr en este ejercicio. lo primero es que quiero hacer ambas columnas ordenables. Y para hacer eso, voy a aplicar la propiedad ordenable y ponerla en verdadero dentro de mis definiciones de columnas. Ahora si voy y miro o interactúo con mi componente aggrid aquí, lo que deberías ver es que ahora puedo ordenar por el nombre o por el color. Y como aggrid soporta multi ordenamiento de serie, puedo mantener presionada la tecla shift y hacer clic en ellos para ordenar por ambos y especificar un orden de ordenamiento. Así que personalicemos esto un poco y anulemos las opciones de ordenamiento. Así que establezca esas opciones de ordenamiento. Lo que vamos a hacer es que vamos a tomar esta propiedad de orden de ordenamiento. y vamos a pasar un arreglo de órdenes de ordenamiento que queremos que apliquen. Así que aquí he puesto el orden de ordenamiento para ser ascendente y descendente para el campo de nombre, y voy a aplicar aquí un orden de ordenamiento personalizado, y voy a hacer lo contrario, hacer descendente y ascendente. Así que ahora que he personalizado esto, si hago clic en color primero, puedes ver que va a hacerlo en orden descendente la primera vez y luego en orden ascendente la segunda vez, Mientras que si ordeno por el campo de nombre, vamos a ir ascendente primero y luego descendente para el segundo clic. Esto también funciona para el multi-ordenamiento. Así que si mantengo presionada la tecla shift y hago clic en color, ahora podemos ver que estamos ordenando por ambos de estos individualmente.

Entonces, voy a entrar aquí y ordenar primero por color y luego por nombre. Para hacer eso, tuve que mantener presionada la tecla shift. Si quisiera personalizar qué tecla presionar, entonces lo que podría hacer es que podría especificar esta propiedad de la clave de multi-ordenamiento directamente en el componente AG Grid React. Y podría configurar esto para ser la tecla de control. Y esto sería control en Windows o comando en Mac. Así que ahora si hago clic en nombre y presiono control en Windows o comando en Mac y hago clic en color, entraremos en multi-ordenamiento en lugar de tener que usar la tecla shift. Así que mucha flexibilidad aquí en la personalización de la forma en que funciona AG Grid.

Esa es una gran pregunta. ¿Alguna otra pregunta? Una más. Creo que mencionaste esto, pero bajo el capó, dijiste que está utilizando un - ¿qué tipo de algoritmo de ordenamiento? Sé que el amarillo aparece primero en lugar de algo como el blanco cuando es en orden inverso. Así que bajo el capó, está aplicando o sabe que estas son cadenas. Y por lo tanto, está aplicando el operador de comparación de localidades en las cadenas. Así que podemos echar un vistazo rápido a eso porque lo mencioné brevemente, pero veamos cómo se vería esto si tú quisieras personalizar eso. Así que lo que está haciendo de serie es que podemos pasar un, ¿cuál es el nombre de la propiedad? Soy muy malo con estos comparadores. Y la firma de esta función es que va a tomar dos nombres, y va a esperar que proporcionemos un uno positivo, un uno negativo, o un cero si son iguales. Y así es como funciona, en realidad está haciendo una comparación de localidades entre sí, que está incorporada en las cadenas de JavaScript para el ordenamiento. Así que con esto en su lugar, podemos ver que está ordenando de la misma manera, de la misma manera que antes. Esto está incorporado de serie, este tipo de comparación de cadenas. Así que no tienes que especificar el comparador de esta manera, pero si quisieras personalizar esto, ciertamente podrías. Por ejemplo, si quisiéramos que awesome siempre, o quizás ergonomic siempre esté al frente, diríamos, si A comienza con ergonomic, devuelves uno. De manera similar, si B lo hace, Así que podemos hacer algo realmente personalizado aquí. O como empieza con. Así que puedes ver que hemos personalizado un poco el comportamiento de esto. Si quisiéramos, podríamos hacer algo realmente personalizado y entrar en los detalles del ordenamiento. Pero de serie, simplemente va a usar esa comparación de cadenas.

Así que tenemos una columna. Tenemos definiciones de columnas para ese campo de nombre y color. y estamos empezando a especificar o a ser un poco redundantes con la configuración que estamos pasando allí, ¿verdad? Estamos configurando ambos para que sean ordenables. Estamos personalizando las opciones de ordenamiento para ambos. Y mucha de la configuración es redundante en términos de nuestro código. Y afortunadamente, hay una forma de evitar parte de esta repetición innecesaria utilizando algo llamado una definición de columna predeterminada. Así que lo que es la definición de columna predeterminada, es que soporta todas las mismas propiedades en el objeto de definición de columna, pero cada columna heredará los valores predeterminados proporcionados en la definición de columna predeterminada. Además, sólo está heredando de ella. Las definiciones de columnas todavía pueden anular cualquier valor predeterminado que especifiquemos utilizando la definición de columna predeterminada. Esto obtendrá un ejemplo. Aquí, he configurado una definición de columna predeterminada, y he establecido ordenable en verdadero. Y luego he pasado esta definición de columna predeterminada directamente a AG Grid. Así que, ahora cada definición de columna que pase a AG Grid será ordenable por defecto. Ahora, por supuesto, esas definiciones de columnas podrían por sí mismas establecer ordenable en falso para anular ese comportamiento. Pero porque en este ejemplo, queremos que todas las columnas sean ordenables, podemos simplemente especificar esto en la definición de columna predeterminada y luego podemos evitar la repetición de especificar eso en cada definición de columna individual.

Así que primero, definimos una nueva constante CallDef predeterminada que es un objeto CallDef. Y luego vinculamos eso a la propiedad CallDef predeterminada en el componente React de AG Grid. Este es un ejercicio súper corto, así que sólo voy a darles un minuto para que pasen por este. Pero van a jugar un poco con las definiciones de columnas predeterminadas por sí mismos. Así que van a crear una nueva constante de llamada predeterminada en la función del componente. Va a ser una llamada def, igual que las otras. Y van a establecer la propiedad ordenable en verdadero en ella. Luego van a vincular eso a la constante de llamada predeterminada a la propiedad en el componente AG Grid React. Y luego van a anular la propiedad ordenable en falso para una de las columnas sólo para que puedan ver cómo funciona la herencia aquí. Así que como dije, este me parece muy corto. Creo que se basa directamente en el que hicimos anteriormente. Así que les daré un minuto o dos para que pasen por esto, y luego yo lo haré por mi cuenta también. Así que lo que queremos hacer en este desafío es que vamos a configurar una definición de columna predeterminada que va a aplicar ordenable en verdadero para todas nuestras definiciones de columna a partir de entonces. Y luego vamos a anularlo en una de las otras sólo para ver que podemos personalizarlo o cambiarlo. Así que aquí voy a crear una constante llamada default call def, y va a ser de tipo call def, pasando esa fila data como el genérico, y va a establecer ordenable en verdadero en ella. Luego voy a vincular esto a la propiedad default call def en el componente AG grid react. Así que ahora que he hecho esto, aunque no he establecido ordenable en verdadero para nombre o color, podemos ordenar en ellos porque ahora están heredando directamente de ese objeto default call def. Si queríamos especificar un orden de clasificación de nuevo y eliminar la capacidad de salir del estado de clasificación. También podríamos poner eso en el default call def. Así que ahora puedes ver que sólo puedo hacer un envío o descendente para nombre o color. Y si quisiera salir de estos valores predeterminados, por ejemplo, si no quiero ordenar por color, entonces todavía podría establecer ordenable en falso para anular ese valor predeterminado. Y por supuesto, hice Guardar, así que dale un segundo para reiniciar ese servidor de desarrollo. Puedes ver que no puede ordenar por color, pero todavía puedo ordenar por nombre. ¿Alguna pregunta sobre las definiciones de columnas predeterminadas? Es realmente útil. A medida que entramos en más opciones de personalización, va a ser genial poder empacar el predeterminado con muchas de esas personalizaciones. De esa manera, nuestras definiciones de columnas reales pueden permanecer agradables y compactas.

Así que hablamos de ordenamiento. eso es una gran parte de la experiencia de la Grid. ¿Pero qué hay del filtrado? Bueno, AG Grid viene con varios filtros proporcionados de serie. Te permite filtrar basado en cadenas usando el filtro de texto, número, fecha. Y luego para la versión enterprise también te permite hacer un ordenamiento basado en conjuntos. El filtro de texto es el predeterminado. Así que si establecemos el filtro en verdadero para cualquiera de nuestras definiciones de columna nos va a dar un filtro basado en texto para esa definición de columna. Así que echemos un vistazo al filtro de texto. Para habilitarlo para cualquiera de nuestras definiciones de columna, todo lo que necesitamos hacer es establecer el filtro en verdadero.

Debido a que el filtro de texto es el filtro predeterminado, no necesitamos hacer ninguna personalización adicional en estas definiciones de columna. También podemos usar explícitamente el filtro de texto proporcionado. Entonces, si ese filtro es verdadero, podemos pasar el nombre del filtro que queremos usar. Estos tienen algunos nombres complejos, eso es porque AG Grid te permite registrar un registro de estos filtros. De serie, AG Grid viene con este agTextColumnFilter y podemos especificar eso explícitamente pasando la cadena a esa propiedad de filtro. Si quisiéramos, también podríamos tener un filtro de número. Entonces, para usar eso, por ejemplo, teníamos un campo de precio que queríamos mostrar, y ese precio era un número, entonces podríamos usar el filtro de columna AG number para dar a los usuarios un filtro basado en números. Solo voy a venir aquí y echar un vistazo a algunos de estos mientras podemos. Si quisiéramos filtrar por color, querríamos hacer que el color sea filtrable. Lo que podríamos hacer es decir que el filtro es verdadero. Ahora en color, puedes ver que tengo este nuevo menú contextual que ha aparecido. Me da este filtro basado en texto. Así que tengo contiene, no contiene, igual, no igual. Básicamente, todos los tipos de filtrado que esperarías. Y entonces puedo decir, OK, solo quiero blanco. Y si quisiera, podría decir blanco y amarillo. Te da mucha flexibilidad de serie solo para ese filtro de texto para personalizar o controlar qué data se muestra. Nos da este bonito icono para hacernos saber que estos data están siendo filtrados. Lamento mucho escuchar que eso no se está cargando en Chrome o Firefox. Estoy usando un navegador similar a Chrome en Mac, así que espero que no sea nada. Podrías intentar borrar la caché de la aplicación para StackBlitz para ver si algo se ha quedado atascado o ha entrado en un mal estado, pero sí, espero que esté funcionando para la mayoría de ustedes. Si alguien más tiene problemas, avísame y puedo echarle un vistazo. Si quisiéramos hacer un filtro basado en precio, creo que tengo el precio incorporado en este conjunto de data. Veamos si lo hago. Lo hago. Así que tenemos el precio como un número. Si quisiera soportar el filtrado desde él, puedo especificar el filtro de columna AG number en estos data también. Y esto me daría la capacidad de filtrar basado en número. Entonces, si quisiera hacer operaciones mayores que, encontrar todos los valores que son mayores que 500, podría hacer eso usando ese filtro basado en número. Así que realmente un gran filtrado de serie para tus tipos de data básicos. Además de números y cadenas, como dije con la clasificación, AG Grid puede ordenar números, cadenas y fechas. AG Grid también puede filtrar números, cadenas o fechas. Si quisiéramos, podríamos usar un filtro de fecha. Veamos cómo se vería eso. Voy a copiar esta definición de columna aquí. Voy a pasar esto. Ahora tengo la fecha del pedido. En realidad, este no está en este conjunto de data. Así que déjame ver cuál es el próximo conjunto de data, pero esto te permitiría hacer cosas como, oye, ¿esto está entre estas fechas? ¿Es más reciente que esta fecha o antes de esta fecha? Te da muchas de esas opciones de filtrado esperadas para las fechas. Así que pruébalo, aquí está el próximo ejercicio. Este es un poco más involucrado y tiene un conjunto de data diferente para que juguemos con él. Vas a abrir el ejercicio y luego vas a configurar la columna de nombre del cliente para usar el filtro de impuestos predeterminado. Para hacer eso, todo lo que tienes que hacer es decir que el filtro es verdadero. Y luego vas a configurar la columna de número de cuenta para usar el filtro de número proporcionado. Así que voy a poner el nombre del filtro de número aquí en el chat. Y luego también vas a usar el filtro de fecha en la columna de fecha del pedido. Y finalmente, vas a usar el filtro de texto para la columna total contra ese uno usando el filtro establecido para ser verdadero. Así que hay un par de filtros diferentes para aplicar, y podrías querer jugar con él. Te daré un par de minutos para pasar por este ejercicio, y luego veremos la solución juntos. Bueno, veamos la solución para este.

Así que voy a abrir este ejercicio. Y lo que quiero hacer aquí es que quiero aplicar algunas opciones de ordenamiento a esta cuadrícula. Así que para el campo de nombre del cliente, lo que voy a querer ordenar es que voy a querer usar un filtro de texto. Para el número de cuenta, voy a querer usar un filtro de número. Para la fecha del pedido, voy a querer usar un filtro de fecha. Y luego finalmente, para el total, voy a usar otro filtro de texto. Así que los filtros de texto son los más fáciles, porque para usar un filtro de texto, todo lo que tienes que hacer es establecer el filtro para que sea verdadero. Y eso va a ser suficiente para que empecemos a jugar con esos. Así que en el nombre del cliente ahora, si quisiera decir, ya sabes, cuáles de mis clientes tienen el nombre Jones en él, puedo ir adelante y aplicar ese tipo de filtro a él. para el número de cuenta, voy a usar un filtro de número aquí. Y para hacer eso, voy a decir que quiero usar el filtro de columna de número AG como mi opción de filtrado. Así que ahora si quisiera, podría decir, bueno, cuál de estos es igual a este número, este valor aquí. De nuevo, esto funciona como un filtro de número. Así que como opciones, tienes que ir igual, no es igual, menos que, todos los comparadores que querrías. Incluso tienes una opción de rango si quisieras mirar cualquiera de ellos dentro de un rango. Para la fecha del pedido, podríamos usar el... Oh, sí, absolutamente. Eso es sólo como un ejemplo para ir a través y jugar con él. Definitivamente puedes usar el filtro de número para la columna total. así que voy a usar el filtro de columna de fecha ag en el campo de fecha de pedido aquí así que ahora puedo hacer algunas comparaciones así que si quisiera decir algo como sabes es esto mayor que digamos el 1 de noviembre de 2019 entonces podemos mirar todos los pedidos que ocurrieron después de esa fecha y si quisiéramos ir y cambiar eso y decir menos que podemos ver todos los pedidos que ocurrieron antes de esa fecha, y podemos empezar a jugar con él de esa manera. Y luego, para el total, de nuevo, podríamos establecer el filtro para ser verdadero para un filtro basado en texto. Como recomendó Millie, también podríamos usar un filtro de número aquí. Así que, podría decir agNumber filtro de columna en este, y así ahora puedo entrar y hacer el filtrado y decir que quiero ver todos los pedidos que son de mayor valor que, digamos, 1,500, y ahora hemos filtrado hasta sólo esos pedidos cuyo total está por encima de ese valor. ¿Hay alguna pregunta sobre los filtros?

¿Son accesibles los filtros por el teclado? Sí, lo son. Así que AGGrid sí tiene plena accessibility aquí. Puedes pasar por todas las columnas. Puedes pasar por los encabezados de las columnas. Puedes olvidar los comandos exactos del teclado, pero puedes llegar a todos ellos con atajos sólo usando el teclado, tabulando y entrando. Así que, gran accessibility de serie. De nuevo, otra de esas cosas que hace de esto una solución bastante enterprise o de alto nivel o de alta gama. ¿Alguna otra pregunta? Así que, de nuevo, si querías jugar con los atajos de teclado, puedes tabular para moverte al siguiente. También puedes presionar arriba y abajo en tu teclado para seleccionar una celda. Si estás en una columna y quieres filtrarla, por ejemplo, por nombre de cliente, puedes simplemente pulsar enter en eso para hacerlo filtrable. Y luego si querías entrar en él, creo que pulsas control enter para abrir el menú de filtros. Y todo eso puede ser personalizado. Esos son los valores por defecto de serie. bien así que podrías preguntarte bien tenemos filtrado de fecha pero ¿qué pasa con las marcas de tiempo y así el filtro de fecha funciona tal cual cuando el crecer data usa el objeto de fecha de javascript pero si el día es proporcionado usando otro método como un isostring, entonces tenemos que especificar la función comparadora y decir exactamente cómo hacer el filtrado y ordenamiento para las marcas de tiempo. Así que por ejemplo, si estuviéramos usando un isostring o alguna opción de marca de tiempo personalizada, entonces lo que tendríamos que hacer es que tendríamos que especificar este comparador. Y así que aquí tengo un comparador especial que me está dejando filtrar se basa en la fecha local a medianoche. Y así puedes ver que he especificado para los parámetros de filtro este comparador que me permite controlar o personalizar la forma en que funciona el filtrado de fechas. Así que tienes mucha capacidad de personalización aquí también para algunos de estos tipos de data si querías personalizar cómo AGGRID va a hacerlo. Así que de nuevo, vas a especificar los parámetros de filtro, y puedes pasar un comparador a este filtro de columna de fecha si estás usando algo distinto al objeto de fecha incorporado. Bueno, hemos hablado de filtrado y ordenamiento para estos conjuntos de data. ¿Pero qué pasa si queríamos personalizar la forma en que se están renderizando estas celdas? Porque ahora mismo estamos mostrando esa data tal como sale. Y estamos mostrando muchas cosas que tienen que ver con la moneda, por ejemplo, pero no somos capaces de aplicar o ver esa moneda en la cuadrícula. Podemos lograr eso con los renderizadores de celdas. Así que sin ninguna personalización, y en su forma más simple, cada celda en AGGRID se renderiza como una cadena basada en el campo especificado. Sin embargo, AGGRID a menudo no es tan simple y podríamos querer hacer algo que sea más complicado. Así es donde podemos aprovechar la tubería para renderizar celdas. Vamos a echar un vistazo a tres de las funciones que podemos pasar para la renderización

La función de obtención de valor es invocada por agGrid para cada celda que mostramos, y la función puede ser invocada con un objeto especial llamado parámetros de obtención de valor. Nos va a pasar o darnos los datos junto con información adicional sobre la celda en la que estamos renderizando. De esta manera, tenemos mucha capacidad para personalizar los datos que estamos proporcionando. Antes de sumergirnos en esa función de obtención de valor, sin embargo, echemos un vistazo a la interfaz de parámetros de obtención de valor. Nos da mucho contexto alrededor del valor que estamos tratando de obtener. Así que nos va a dar acceso a la API de la grid. Definitivamente hablaremos mucho de esto. Nos va a dar acceso a la definición de la columna, la columna actual en sí, la API de la columna, de nuevo, otra cosa de la que hablaremos, los datos, los datos de fila reales que estamos tratando de renderizar, y luego el nodo en el que estamos tratando de renderizar. Así que vamos a desglosar cada una de estas propiedades. Las propiedades de la API serán la API de la grid. La API de la grid nos permite hacer una gran cantidad de personalizaciones complejas de la grid, nos permite llegar a cualquiera de las celdas o filas, nos permite invocar algunos de esos comportamientos de Azure Grid. Hay muchas cosas que podemos hacer con la API de la grid, lo mismo con la API de la columna. Ya hemos hablado de las definiciones de columnas en términos de qué datos se exponen allí. Son todas las cosas que especificamos en esas definiciones de columnas. definiciones. También nos da la columna actual en la que estamos tratando de renderizar para que podamos inspeccionar cuál es el estado de la columna en términos de su filtrado o clasificación para personalizar realmente cómo queremos llegar a ella. Pero lo más importante, vamos a querer mirar los datos para los datos de la fila actual que se está tratando de renderizar. Así que esa API de la Grid ha sido extremadamente útil para interactuar programáticamente con la Grid. También nos permite añadir oyentes de eventos a la Grid. AdriGrid tiene muchos eventos personalizados Así que si querías escuchar algunos de los comportamientos del usuario, como el filtrado o la clasificación, hay eventos que se exponen para eso a los que podríamos engancharnos. Vamos a acceder a las características del portapapeles. Así que si queremos copiar o mutar los datos que están en el portapapeles, podemos hacer eso. Y hay muchas más cosas que podemos hacer con esa API de la Grid. Prácticamente cualquier cosa que el usuario pueda hacer manualmente con Agigrid podemos hacerla programáticamente usando la API de la Grid. La API de la columna es útil para interactuar programáticamente con una columna específica. Así que desde algunas de esas clasificaciones y filtrados que hemos visto antes, podemos hacer eso programáticamente usando la API de la columna. También hay movimiento y fijación de columnas, que podemos hacer programáticamente, y, de nuevo, hay más cosas incorporadas en eso. Entonces, ¿qué es un nodo de fila? Bueno, un nodo de fila representa una sola fila en la grid. Nos da la API de selección de filas y nos permite actualizar los datos de la fila para ese nodo de fila en particular. Así que ahora que hemos aprendido cómo se invoca una obtención de valor por AG Grid, vamos a ver un ejemplo rápido. Así que aquí, para el precio, lo que voy a hacer voy a especificar un obtentor de valor. Y la razón por la que estoy usando un obtentor de valor es que quiero redondear los precios al número entero más cercano. Ahora, hay algo a lo que tienes que prestar atención, y los tipos de TypeScript realmente nos guían en esto. En algunas instancias, params.data podría ser indefinido, así que los datos que AG Grid nos está suministrando podrían ser indefinidos. Esto realmente ocurre más en algunos de los modelos de fila más avanzados, pero aún así queremos ser programadores proactivos aquí, y queremos protegernos contra este caso. Así que si params.data es igual a indefinido, simplemente vamos a devolver cero. Y luego una vez que AGGRID nos suministre los datos para esta fila, entonces vamos a redondear ese campo de precio. Así que te lo voy a dar como un ejercicio para que juegues con él primero, y luego entraré y lo repasaré. Este es un ejercicio un poco más largo, así que te daré unos minutos más para este. Pero el objetivo de este ejercicio va a ser aprender cómo usar esa función de obtención de valor. Así que vas a abrir el ejercicio, y voy a pegar un enlace a esta diapositiva aquí en el chat de Zoom. Si acabas de unirte a nosotros. Una vez que lo abras, notarás que la columna total está actualmente vacía y vas a usar un obtentor de valor para sumar el total de cada pedido de esa manera podemos poblar ese total. Hay algunas pistas que quiero darte. Así que primero echa un vistazo a la interfaz de datos de fila para entender el modelo de datos.

Para cada fila, hay múltiples pedidos en esa fila. Y entonces vas a querer crear una suma de todos los precios de todos esos pedidos para crear este total. Un pedido está asociado con los artículos del pedido que asocia cada artículo con un producto. Un producto contiene el precio. Si fuera yo, usaría array.reduce para sumar el pedido. Si no te sientes cómodo con un reduce, siéntete libre de usar un bucle for para hacer la suma también. Y luego vas a colocar toda esa lógica dentro de un campo de obtención de valor en la columna total para calcular el precio total de todo el pedido. este es un ejercicio un poco más complicado. Te daré unos minutos. Si tienes alguna pregunta, siéntete libre de dejar en el chat. Bueno, vamos a ver cómo lograr este ejercicio. Así que voy a seguir adelante y abrir el ejercicio. Y nuestro objetivo es implementar esta columna total aquí. Ahora para hacer esto, voy a usar un obtentor de valor. Y lo que quiero hacer es que voy a mirar esta interfaz de fila data por un segundo. Así que para calcular el costo total de un pedido, lo que voy a querer hacer es que voy a querer sumar los artículos del pedido aquí. Y lo que verás es que en los artículos del pedido, tengo un ID de producto. Y este ID de producto y cantidad me va a decir básicamente cuánto de un producto está en el pedido. Pero en realidad no tengo información sobre los productos disponibles para mí. Vuelve atrás y mira el desafío. Lo que veremos es que cada uno de estos pedidos está asociado con un producto y los productos van a contener el precio. Y entonces en realidad tengo eso disponible para mí en data.products. Podemos ir a inspeccionar cómo se ve ese JSON. Así que si voy a mirar data.json, puedes ver que tengo todos los clientes, tengo todas las cuentas, y luego tengo todos los productos disponibles para mí. Así que para cada producto dentro de un pedido, voy a querer encontrar todos estos productos, echar un vistazo a ese precio, y sumarlos todos juntos. Así que este es un desafío un poco más complicado. Veamos cómo lo haríamos. Así que voy a implementar un obtentor de valor aquí. Y esto va a tomar la fila data. Y si fila data.data es igual a indefinido, va a devolver cero. Voy a implementar esto con un simple bucle for aunque podrías haber usado array.reduce aquí si hubieras querido y para este bucle for voy a hacer voy a crear un pequeño valor aquí, poner total y decir que esto va a ser un número voy a empezar en cero, y luego lo que quiero hacer es que voy a decir para cada artículo del pedido, voy a encontrar el producto asociado con él. Para el artículo del pedido de fila data data. Y dentro de aquí, podemos seguir adelante y simplemente registrar en la consola el artículo del pedido para asegurarnos de que estamos obteniendo lo que esperamos. Así que al registrar en la consola, puedes ver que estamos obteniendo todos estos pedidos como esperábamos hacer. Y entonces lo que voy a hacer es para cada artículo del pedido, voy a encontrar el producto asociado. Así que voy a decir que data.products.find. Voy a decir producto. Producto.id es igual a order item.product.id. Así que ahora que tengo esto disponible para mí, y voy a escribir esto como cualquier o dejar esto como eso es, ahora que tengo el producto, puedo obtener el precio. Así que si no tengo un producto por cualquier motivo, va a llamar a continue. Y si tengo un producto, entonces lo que quiero hacer es que quiero decir total más igual. Voy a hacer un pequeño truco de parse float aquí en los productos. ¿Qué era? Creo que era el costo. Sólo doble cheque precio. Vale. Así que voy a analizar el precio del producto, y voy a multiplicarlo por la cantidad del artículo del pedido. Finalmente, voy a devolver total. Así que si miramos ahora si vamos a esa columna total, puedes ver que ahora estamos calculando el valor total del pedido. Así que la forma en que esto funciona es que estoy usando un obtentor de valor. En las otras definiciones de columnas, soy capaz de usar simplemente esa propiedad de campo porque estoy simplemente apuntando a datos simples en mi interfaz de datos de fila.

Pero esta columna total, es diferente. No tengo un total disponible en mi conjunto de datos. Y entonces estoy usando un Value Getter en lugar de un campo para calcular cuál es el total. Y la forma en que calculé este total es que utilicé un bucle for y inicialicé un total en cero. Y luego iteré a través de cada artículo del pedido en el array de artículos del pedido de la fila data. Y para cada artículo del pedido, encontré el producto asociado que está vinculado a ese artículo del pedido. Analicé el precio de ese producto. Es una cadena en el conjunto de data. No quiero representarlo como un float para este ejercicio. Así que analicé ese float, y luego lo multipliqué por la cantidad, lo añadí al total, y luego devolví ese total. Así que estos Value Getters van a ser una forma realmente advanced de obtener o calcular data que queremos mostrar dentro de nuestra cuadrícula. Quiero señalar que AG Grid es realmente inteligente. No va a llamar a estos Value Getters hasta que sea absolutamente necesario, y va a recordar o almacenar en caché esos resultados. De esa manera no necesita calcular continuamente o calcular estos valores.

¿Hay alguna pregunta sobre esta solución antes de pasar al siguiente capítulo? Sé que este fue un poco más complejo que los que has hecho hasta ahora.

Vale. Sigamos adelante. Puedes hacer estos reutilizables, así que proporcionarlos en línea está totalmente bien de la manera en que lo hemos hecho, pero si quieres hacerlos más reutilizables, puedes hacerlo. Por ejemplo, si queremos hacer un getter de valor multiplicador, en realidad tienes todos los tipos de tipos que necesitarías para crear un getter de valor reutilizable, y luego podrías pasar esto directamente en una definición de columna.

Además, creo que no lo he dicho, pero estas diapositivas por las que estoy pasando, van a ser publicadas indefinidamente. Estas son tuyas para siempre. Así que siéntete libre de volver siempre, referenciar estas diapositivas, mirar los ejemplos, compartirlas con compañeros de trabajo que quizás no estén en la llamada. Estas son tus diapositivas para tener siempre que quieras tener acceso a ellas.

Así que ahora hemos mirado los getters de valor. Hablemos de los formatos de valor. Así que hay, de nuevo, como dije, estamos construyendo una especie de pipeline aquí. El primer paso en ese pipeline es que AG Grid necesita averiguar cuál es el valor. Y el segundo paso es formatear el valor. Después de que se conoce el valor de la celda, la función de callback de formato de valor opcional nos permite formatear ese valor. La función de formato de valor es invocada por AG Grid para cada celda y también es invocada con este objeto especial de parámetros de formato de valor. Hay mucho en él, incluyendo todas esas APIs de columna, APIs de Grid y fila data. Pero lo que es diferente en comparación con los parámetros del getter de valor es que los parámetros del formateador de valor en realidad tienen acceso al valor. Esto tiene sentido porque el getter de valor obtuvo el valor para nosotros. Ahora que teníamos ese valor calculado, podemos acceder a él en estos formatos de valor.

Echemos un vistazo a un ejemplo. Así que tenemos muchos precios aquí y como he mencionado, podríamos querer formatear estos usando moneda. Y así el formato de valor es un gran lugar para aplicar algún formato basado en moneda. O, sabes, para las fechas, quizás queremos formatear la fecha de una manera especial. Lo que queramos hacer, el formato de valor es el lugar correcto para hacerlo en términos de cambiar la forma en que data es representada. Así que aquí lo que estoy haciendo es que tengo un formateador que estoy creando usando la API de formato de número internacional. Y así voy a formatear usando la moneda de los Estados Unidos. Y voy a establecer la fracción mínima para ser cuantas cifras que quiero hacer. Si no tenemos un valor, simplemente voy a devolver cero. Y si tenemos un valor, voy a convertir ese valor en un número y luego formatearlo.

Tenemos que convertirlo en un número porque, como mencioné antes, todos esos precios que están dentro de este conjunto de data se muestran como una cadena. Así que esto nos permite analizar esa cadena en un número real. Así que voy a darte a ti para que lo intentes. Abre el ejercicio en stacklets. Y voy a dejar un enlace a él en el chat. y vas a implementar tu propio valor formateador. Y veo que esto dice getter de valor. Debería decir formateador de valor. Pero vas a añadir un formateador de valor a la columna total para formatear el valor usando esa clase de formato de número internacional para formatearlo usando la moneda de los Estados Unidos. Así que este es un poco más simple que el último. Te daré solo un par de minutos para trabajar en él y luego pasaré por la solución. Así que aquí tenemos el mismo código que estábamos usando antes para mostrar el total, excepto que esta vez el total está simplemente incorporado para nosotros, así que las cosas son un poco más simples. Lo que quiero hacer es que en realidad quiero formatear esto usando el formato de moneda. Así que si vamos y desplazamos, puedes ver que tenemos el total, pero esto es en realidad moneda. Entonces, ¿cómo vamos a mostrar esto usando alguna moneda? Bueno, para hacer eso, vamos a querer usar la opción de formato de número para representar esto como moneda. Y queremos aplicar esto usando un formateador de valor en este campo total. Así que lo que vamos a hacer es que vamos a ir a esta definición de columna aquí para el total, y voy a pasar un formateador de valor. Esto me va a dar la fila data aquí de nuevo. Y tengo disponible para mí fila data punto valor.

y si esto es igual a indefinido por cualquier motivo, simplemente voy a devolver una cadena vacía y luego lo que quiero hacer es que quiero formatear esto usando, digamos, el formato de dólar estadounidense. Así que voy a crear un formateador utilizando la clase de formato de número internacional. Voy a pasar NUS como la configuración regional y dentro de aquí podría hacer algo como moneda y especificar que esto puede ser cualquier moneda que quiera hacer. Pero desde este punto, tengo suficiente para formatear estos data. Así que voy a pasar o devolver formateador punto formato fila data punto valor. Así que ahora que he hecho eso, puedes ver que estamos aplicando eso aquí. Y luego lo que voy a hacer es que voy a pasar realmente una opción de moneda a este segundo parámetro aquí. US, siempre olvido el exacto aquí. Y luego voy a hacer estilo como moneda. Así que ahora que he hecho eso, puedes ver que está formateando estos números a medida que entran, está aplicando, sabes, las comas y los puntos como querríamos, está añadiendo el dólar asignado para nosotros y ha internacionalizado completamente ese valor para nosotros para mostrar. Así que ahora tenemos un formato de moneda realmente bonito. La forma en que hicimos eso es que pasamos ese formateador de valor directamente a la definición de la columna total. ¿Alguna pregunta sobre este código? Lo siento, creo que dijiste esto, pero ¿por qué o podrías añadir este formato en el getter en lugar del formateador de valor? Esa es una gran pregunta.

Así que podrías, pero no vas a querer hacer eso debido al pipeline de renderizado. Una de las cosas que no he mencionado aún es que esos filtros y ordenaciones de los que hablamos antes, van a ser aplicados al valor que es devuelto por el getter de valor. Y así, desde la perspectiva del getter de valor, queremos devolver esos datos brutos, el número en este caso, de manera que el filtrado y la ordenación funcionen con ese número. Y luego el formateador de valor es en realidad para personalizar ese valor para fines de visualización. Y así, en este punto, ya que hemos convertido esto en una cadena, no podríamos usar ese filtro de número en esto. ¿Tiene sentido? Sí, gracias. Buen trabajo explicándolo. ¿Alguna otra pregunta? Vale. Seguimos avanzando. de nuevo, hay algunas diapositivas aquí que hablan de hacer estos reutilizables. Así que si quieres echar un vistazo a ese contenido, lo tienes disponible para que lo mires. Vale. Vamos a continuar por ese pipeline. Hicimos los getters de valor. Luego hablamos de los formateadores de valor. La última parte de este pipeline que vamos a cubrir en esta masterclass es la función de renderizado de celdas. Así que después de que se determina el valor para una celda, y hemos formateado opcionalmente el valor, podemos entonces usar un renderizador de celdas personalizado para tener un control total sobre cómo se renderiza esa celda en AGGrid. Es importante notar que sólo debemos usar un renderizador de celdas cuando sea necesario. Esto es como la forma más fácil de desoptimizar AGGrid es dándole un renderizador de celdas realmente complejo o mal optimizado, y simplemente arruina nuestro rendimiento. Y así esto es algo de lo que quieres ser bastante cuidadoso al implementar, y sólo quieres hacerlo cuando sea necesario. Por defecto, el renderizador de celdas por defecto es simplemente mostrar el contenido de texto directamente como un elemento HTML dentro de la cuadrícula. Simplemente estamos mostrando la cadena tal cual es. Pero cuando estamos usando un renderizador de celdas podemos añadir elementos adicionales. Podemos tal vez añadir o inyectar iconos. Podemos aplicar CSS personalizado. Podemos añadir oyentes de eventos. Todas las cosas que queremos hacer en términos de HTML y CSS, podemos hacerlo con el renderizador de celdas. El renderizador de celdas para una definición de columna acepta los siguientes valores. Así, indefinido simplemente renderizará el valor de la celda como el contenido de texto para la celda. También puede ser una cadena que haga referencia a un renderizador de celdas registrado. Así que vamos a ver que AGGrid viene de serie con un par de renderizadores de celdas personalizados que podemos aprovechar. Y finalmente, el renderizador de celdas puede ser un componente de React completo. Así que, si queríamos usar React para renderizar la celda, podemos hacerlo pasando un componente de React. Sólo como una nota, al igual que hemos estado viendo con el formateador de valor, el getter de valor, vamos a obtener parámetros de renderizador de celdas que nos dan acceso a todas las APIs disponibles y datos que queremos obtener. Así que podemos usar el renderizador de celdas de la misma manera que habíamos estado usando el formateador de celdas anteriormente. Podemos aplicar cualquier formato aquí si quisiéramos. Y así esto es sólo un ejemplo realmente simple de usar ese renderizador de celdas. Por supuesto, vamos a obtener algunos usos más avanzados de él aquí en sólo un segundo. Así que en este ejemplo, en lugar de usar un formateador de valor para el campo de precio, estamos usando un renderizador de celdas. La función de renderizado de celdas acepta el objeto params. Primero comprobamos si el valor es indefinido, y luego invocamos y devolvemos el valor transformado. No es un ejemplo particularmente útil. Podrías haber usado simplemente un formateador de valor en su lugar, pero esto sólo muestra que el renderizador de celdas funciona de una manera muy similar a ese formateador de valor. Así que lo que vamos a hacer es que vamos a empezar a usar esta función de renderizado de celdas para hacer algo más complejo. Así que en este ejercicio vas a abrir el ejercicio en StackBlitz. Vas a añadir un renderizador de celdas para la columna de fecha de pedido. Y lo primero que vas a hacer es que vas a comprobar si el valor no es indefinido en ese objeto params. Y luego, porque puedes simplemente pasar un componente de react aquí y los componentes de react pueden ser simplemente funciones, puedes simplemente devolver algo de JSX de estas funciones. Y así devuelves algo de JSX que incluye un icono de material junto a la cadena de fecha formateada. Y para renderizar ese icono, hay un poco de HTML aquí disponible para que lo copies y pegues.

Bien, vamos a ver la solución para este ejercicio. Así que voy a abrirlo. Y lo que quiero hacer en este ejercicio es que tengo la columna de fecha de pedido, y quiero personalizar la forma en que se representa. Y para hacer eso, voy a usar un renderizador de celdas. Si no tengo ningún data, simplemente voy a devolver y decir que no hay data aquí. Déjame conseguir el tipo para esto rápidamente. De esa manera no estoy aquí esperando por ello. Y luego lo que voy a hacer es que quiero representar la fecha con este icono de material adjunto. Y así, en realidad puedo devolver algo de jsx aquí si quisiera. Así que voy a devolver como un fragmento. Voy a devolver el icono. Y luego voy a devolver gramos.data. Pensé que eso estaba bien. Oh, aquí necesito. ¿qué está pasando por si acaso esto es un problema de fragmento lo siento por eso, vamos a saltar adelante a la solución para asegurarnos de que no estamos haciendo nada que sea inesperado. Simplemente voy a copiar esto. Asegurarme de que todo está como se supone que debe estar. Muy bien. Me topé con un pequeño error en esto. Pido disculpas. Pero al menos puedo hablar un poco sobre la solución. Y simplemente voy a darle a guardar y refrescarlo por si acaso me encuentro con algún tipo de problema de desarrollo. Muy bien, ahí vamos. Definitivamente acabo de golpear algún tipo de problema de caché. Algo común con las divisiones de pila. De nuevo, si te metes en algún tipo de estado extraño y como, esto no parece correcto, la forma en que normalmente lo hago es que voy a la pestaña de aplicación en Chrome DevTools, pulso borrar data del sitio. Y eso tiende a limpiar cualquier tipo de problemas de caché de compilación que estoy encontrando. Pero como he hecho un poco de trampa, déjame pasar por el código de lo que he hecho. Así que tengo mi renderizador de celdas aquí para la fecha de pedido. Y si no tengo un valor en él, entonces voy a devolver null. Y si tengo un valor, lo que estoy haciendo es que voy a renderizar un icono de evento, y luego estoy usando el formateador de fecha y hora de la API internacional para formatear esa fecha en una simple cadena de fecha internacionalizada aquí. Así que puedes ver que los renderizadores de celdas pueden ser en realidad componentes completos de React. Van a recibir estos parámetros como sus props. Y desde ahí, podemos realmente renderizar algo de HTML, CSS personalizado, lo que queramos hacer en este punto, podríamos hacerlo aquí. ¿Alguna pregunta sobre esto con estos renderizadores de celdas? Quiero destacar una vez más que esta es la forma más fácil para los desarrolladores, en mi experiencia, de desoptimizar AG Grid. Estos renderizadores de celdas se están renderizando cada vez que una fila entra en vista, ¿verdad? Y así, queremos tener un desplazamiento y renderizado muy suave performance dentro de AG Grid. Por lo tanto, si estamos haciendo algo computacionalmente complejo dentro de estos renderizadores de celdas o creando muchos nodos DOM o configurando muchos oyentes de eventos, entonces podemos desoptimizar muy fácilmente el rendimiento de nuestro AG Grid aquí. Así que ten mucho cuidado con estos renderizadores de celdas, querrás poner tu mejor pie adelante y escribir tus componentes de React más eficientes para estos renderizadores de celdas. De lo contrario, te arriesgas a hacer que la implementación de AG Grid sea bastante lenta. Así que, eso cubre el renderizado de celdas.

La siguiente sección en la que vamos a entrar es la edición de celdas. Los renderizadores de celdas pudieron obtener data o calcular data personalizado con el getter de valor personalizado, pudimos formatear los data que habíamos calculado usando un formateador de valor, y pudieron renderizar HTML y CSS avanzado o personalizado para estas celdas usando una función de renderizador de celdas. Pero como dije al principio, AGRID no se trata sólo de mostrar data, intenta dar a tus usuarios una experiencia completa de Excel para ver los data. Así que si quieres dar a tus usuarios la capacidad de editar los data, puedes usar editores de celdas. Para habilitar la edición de celdas, todo lo que tienes que hacer es habilitar la propiedad editable para ser verdadera en la definición de la columna. También puedes establecer editable para ser una función para determinar si la edición está habilitada. Si quieres hacer algo más complejo, puedes habilitar la edición a través de la API de la cuadrícula.

Entonces, si queremos permitir a los usuarios editar el nombre de un cliente, podríamos establecer ese campo editable en verdadero directamente en la definición de la columna donde queremos hacer posible la edición. También puedes hacerlo usando la API de Grid. Aquí tienes un ejemplo de código, así que podríamos decir, de acuerdo, comienza a editar esta celda en este lugar específico, y podemos usar la API de Grid para también detener la edición. De serie, AG Grid nos proporciona una serie de editores de celdas, nos da editores de celdas para editar texto corto y mucho texto. Nos da un editor de fechas. Nos da un editor de selección si quieres limitar al usuario a un conjunto de opciones. Y si estás en la versión enterprise, también tienes un editor de selección enriquecido que tiene más personalizaciones en términos de las opciones que puedes proporcionar al usuario. Al igual que la ordenación y el filtro, el TextCellEditor es el predeterminado, así que si establecemos editable en verdadero, va a elegir el TextCellEditor y puedes usar la propiedad de definición de columna CellEditor para especificar un editor de celdas proporcionado o personalizado. Así que, por ejemplo, si queremos permitir al usuario usar el editor de texto grande, podríamos especificar eso como el editor de celdas debajo de esa columna editable. Veremos cuántas veces puedo decir editable y mantenerlo todo junto. Para usar el editor de celdas de selección podríamos pasar eso como el editor de celdas de selección de AG. Y luego también puedes personalizar las opciones dándole parámetros de editor de celdas, que creo que vamos a ver. Vamos a jugar un poco con algunas opciones editables. Adelante y abre este ejercicio en stack splits, y vas a habilitar la edición de celdas para la columna de nombre del cliente, y luego usar el editor de celdas de texto grande de AG para la columna de número de cuenta. Esto sólo debería llevar un minuto o dos, y luego repasaré la solución. Le echaremos un vistazo. Vamos a jugar un poco con los editores de celdas. Voy a abrir este ejercicio. Pronto, los datos editados en nuestro ejemplo sólo se guardarán en el navegador. Así es. Sí. No es a un servicio en algún otro lugar. Para conservar esto, necesitas escuchar esos cambios editados, y luego te quedas. Depende de ti con el modelo de fila del lado del cliente para averiguar cómo conservar realmente esos cambios. Los otros modelos de fila tienen soporte incorporado para guardar estos cambios. Pero tal como está, esto no se está guardando en ninguna parte. Sólo se está haciendo en memoria. Así que, para el nombre del cliente, si quiero hacer esto editable, puedo simplemente establecer esto en verdadero. Y ahora para cualquiera de estos nombres, si quisiera, puedo entrar aquí, hacer doble clic en una celda, y puedo cambiar el nombre a lo que quiera que sea. Como preguntó Nelly, estos no se están conservando. Esto sólo se está haciendo en memoria, pero muestra que somos capaces de usar un editor de celdas personalizado. Y luego, sólo para mostrar un ejemplo más completo, para el número de cuenta, voy a establecer editable en verdadero. Y voy a establecer el editor de celdas para ser el editor de celdas de texto grande de AG. Así que ahora si entro aquí, puedes ver que me va a dar como un campo de texto completo que me permite pulsar enter aquí. Y tengo varias líneas, sólo un campo de texto completo si quisiera. Cosas bastante simples hasta ahora. Así que sigamos viendo la edición de celdas. Así que al igual que con la tubería de renderizado de valores y cómo somos capaces, al final de ella, de usar un renderizador de celdas para personalizar la forma en que estábamos renderizando esos, también puedes tener un componente de editor de celdas personalizado. Así que los editores de celdas proporcionados son todos adecuados, ¿verdad? Tenemos texto, número, fecha, todos esos están bien. Pero también podemos construir editores de celdas personalizados para satisfacer los requisitos del usuario para las aplicaciones. Y al igual que con los renderizadores de celdas, estos pueden ser en realidad componentes completos de React. Así que lo que vamos a hacer es que vamos a construir un editor de celdas de color personalizado usando React, y vamos a usar la entrada de color incorporada del navegador para lograr eso. Así que antes de crear los componentes, vamos a ver la interfaz de la API imperativa que establece ese contrato. Así que el editor de celdas tiene una sola propiedad en él llamada getValue. Se invoca una vez después de que la edición está completa para proporcionar el valor de vuelta a la cuadrícula. Así que establecer la comunicación con AG Grid requiere que configuremos un manejador imperativo del ref reenviado por AG Grid. Esto es un poco feo, y lo siento, pero esto es sólo algo de ese código de interop que tienes que hacer para hacer el puente entre AG Grid y React. Así que a medida que hacemos nuestro editor de color, lo que vamos a hacer es que vamos a usar forward ref para poder obtener el ref que nos pasa AG Grid. y vamos a usar el hook useImperativeHandle de React para obtener la API imperativa proporcionada a nosotros desde AG Grid.

Finalmente, vamos a registrar el componente, y tenemos dos opciones. Podemos proporcionar una referencia directa al componente en la definición de la columna, o podemos registrar el componente usando una constante de cadena, esto nos permite tal vez serializar estas definiciones de columnas o dejar que diferentes grids a lo largo de nuestra aplicación hagan referencia a ese componente por un nombre de cadena en lugar de con una referencia directa. Vamos a pasarlo directamente como una referencia, así que aquí tengo mi renderizador de celdas como mi renderizador de color y tengo un editor de celdas y estoy pasando mi editor de color personalizado. Así que me encantaría que lo intentaras. Tengo la solución integrada en esta diapositiva de ejercicio, porque creo que hay mucho que hacer aquí. Quiero que puedas copiar y pegar las partes a las que quieres tener acceso. Pero vas a implementar tu propio editor de color personalizado. Vas a usar el hook useState para capturar el valor inicial de las props. Vas a implementar ese método getValue usando este handle imperativo para devolver ese valor a AG Grid. Luego vas a actualizar la definición de la columna para el campo de color para que sea editable usando el editor de color como el editor de la columna. Hay un poco más en este ejemplo. Te daré un par de minutos para revisar este. Y luego pasaré por la solución aquí en unos cuatro minutos. Así que voy a abrir el ejercicio en stacklets. Y lo que quiero hacer aquí es que voy a implementar un componente de editor de color personalizado. Así que para hacer esto, lo primero que necesito hacer es que quiero usar props.value dentro de mi estado. De esa manera estoy inicializando este editor de celdas con el valor que sea para este color. La segunda cosa que necesito hacer es que necesito usar este handle imperativo para dar a AG Grid una devolución de llamada getValue que apunte al nuevo o actualizado valor. Finalmente, tengo mi entrada aquí. Y va a ser de tipo color. Cuando el valor cambia, estoy actualizando el estado. Estoy obteniendo una pequeña referencia a él. De esa manera, puedo usarlo en efecto para enfocarlo cuando se abre el editor de celdas. Y entonces básicamente, el flujo de trabajo aquí es que cuando el usuario hace doble clic en un color, Esto va a abrir este editor de celdas. Vamos a enfocar esta entrada. A medida que el usuario cambia el color, va a actualizar el estado, y cuando el usuario abandona el editor de celdas, AG Grid va a llamar a esta devolución de llamada getValue, que va a apuntar al valor más actualizado, y eso va a permitir a AG Grid saber cuál es el nuevo valor a establecer para el editor de color. Así que voy a volver a la grid, y ahora tengo mi editor de color. Voy a bajar a ese campo de color, y voy a establecer editable para que sea verdadero, Voy a establecer el editor de celdas para que sea este editor de color. Así que ahora puedo hacer doble clic en uno de estos colores, y puedes ver que tengo esta entrada aquí. Puedo cambiar el color y salir de él, y ese color se guarda. Así que lo cambio a quizás un azul aquí, y me voy. Puedes ver que el azul ha sido establecido. Así que somos capaces de implementar editores de celdas muy personalizados también. Este es un buen ejemplo también, porque nos muestra usando un renderizador de color. No tenías que implementar el renderizador de color aquí, pero si querías echar un vistazo al código, eso está disponible para que lo revises. Está mostrando que usando la tubería de renderizado, somos capaces de personalizar la forma en que estamos mostrando el color y usando la tubería de edición, somos capaces de personalizar la forma en que estamos editando un color y somos capaces de usar componentes de React para ambas partes de esta tubería. ¿Hay alguna pregunta sobre los editores de celdas que puedo responder antes de seguir adelante? Creo que pasamos a algunos estilos a continuación. Así que rápidamente, quiero hablar de cómo hacer persistencia porque como se preguntó antes, hey, esto es sólo edición en memoria, ¿verdad? Sí. Pero si quisiéramos persistirlo, hay formas de hacerlo. Así que tienes varias opciones para persistir los data. Por defecto, el campo vinculado a la fila data se actualiza y luego obtenemos una función setter de valor que se llama. Así que vamos a echar un vistazo a todas estas opciones sólo como un código abstracto para inspeccionar. Así que la función setter de valor es realmente genial porque los data son gestionados por la grid y es el inverso de la función getter de valor. Así que escribimos la función getter de valor para obtener los data. Podemos darle una función setter de valor que nos permita realmente persistir o establecer estos data. Podemos devolver verdadero para indicar que el valor se actualizó con éxito y para refrescar la celda, o podemos devolver falso para indicar que el valor no fue actualizado. Así que aquí hay un ejemplo donde estamos obteniendo el nuevo valor. Estamos comprobando para ver si el nuevo valor coincide con el valor antiguo. Si no es así, podemos llamar a una prop de cambio de nombre y dejar que el componente padre sepa que, hey, algunos de los data que me pasaste han cambiado. Quizás deberías ir a persistir eso al servidor.

Algunas cosas a tener en cuenta. Siempre vamos a querer hacer algún tipo de comprobación de igualdad para asegurarnos de que el valor ha cambiado realmente. porque el usuario puede abrir el editor de celdas y escapar de él. Y eso llamará a esta función de establecimiento de valor. Pero si los data no han cambiado realmente, no necesitamos hacer nada al respecto. Si los data han cambiado, entonces podemos simplemente llamar, como dije, a una prop onNameChangeCallback que nos fue pasada para hacer saber a un componente padre que algunos de estos data han cambiado. Y luego finalmente, estamos devolviendo true para indicar que la grid debería refrescar la celda. Si devolvemos false y estamos diciendo, hey, este fue un cambio ilegal, vuelve a lo que solía ser. Al devolver true, estamos diciendo, sí, este es un valor válido. lo hemos persistido, adelante y renderiza el nuevo valor en esa celda. También hay un evento on cell value changed en toda la grid al que podemos escuchar. Así que este evento se emite cuando un valor de celda ha sido actualizado después de una edición de usuario. Y así podemos usar la prop on cell value changed en el componente AG Grid React para escucharlo. Así que aquí hay un ejemplo aquí donde estamos escuchando cualquier cambio de valor, y podemos registrar cuál era el valor antiguo y el nuevo valor. ese evento tiene muchos detalles sobre qué parte de los data ha sido editada. Y así podemos usar esto como otro método para persistir cualquier cambio de data. Hay el evento onSellEditRequest que también quiero destacar. Así que esto se emite cuando el valor ha cambiado después de la edición. Y podemos usar esto también como una prop para vincularlo en el componente Azure Grid React. Así que aquí puedes ver que tenemos el evento onSellEditRequest al que estamos escuchando. Sólo podemos usar esto cuando está en un estado de edición de sólo lectura. Así que esto significa que permitimos al usuario cambiarlo, pero no vamos a dejar que estas cosas persistan. Podemos escuchar cualquier solicitud de edición usando esta función de devolución de llamada. De nuevo, hay algunos detalles más complejos o advanced aquí. Estas diapositivas están disponibles para ti. Eres bienvenido a revisar esto y aprender algunos detalles más sobre algunas de estas APIs más complejas o advanced. Con eso, vamos a entrar en la última parte aquí, que es el estilo de AG Grid. Hemos hablado de cómo mostrar valores con la grid, editar valores con la grid, ordenar y filtrar. Ahora hablemos de algunos estilos. Como mencioné al principio, AG Grid tiene varios temas preconstruidos. Estos temas son personalizables, y puedes sobrescribir algunos de esos estilos globales de CSS. Así que al sobrescribir estilos globales de CSS, ten en cuenta que necesitas no cambiar tres propiedades específicas. Así que si estás haciendo CSS personalizado, necesitas dejar que AG Grid tenga la propiedad sobre la posición, el desbordamiento y los eventos de puntero. La razón de esto es que si vas a inspeccionar el DOM para AG Grid, está haciendo un montón de posicionamiento absoluto o relativo de celdas. Y así es como maneja cosas como reordenar columnas, responsividad. Va a ser importante que gestione la posición y el desbordamiento cuando estés usando el modelo de desplazamiento infinito. De esa manera puede mostrar data vacíos y llenar eso a medida que lo transmite desde el servidor. Y luego también no personalices los eventos de puntero. Va a necesitar eso para controlar qué ratón mostrar para diferentes o qué cursor mostrar cuando estás interactuando con las diversas capacidades de edición y filtrado de AG Grid. Así que echemos un vistazo al estilo de las celdas. Puedes especificar estilos de celda usando la propiedad de estilo de celda de la definición de columna. Esta es nuestra oportunidad de hacer algunos estilos personalizados directamente en la columna. También puedes añadir clases de CSS a la propiedad de clase de celda. Y luego puedes hacer una aplicación más advanced de clases de celda usando la propiedad de reglas de clase de celda. Vamos a echar un vistazo a las tres. Así que primero, echemos un vistazo a la propiedad de estilo de celda. Así que en una definición de columna, si quisiéramos, podríamos pasar algunos estilos para aplicar a ella. Y esto simplemente toma un array de estilos de CSS que queremos aplicar. Así que si quisiéramos mostrar el nombre del cliente en texto blanco con un color de fondo, podríamos hacerlo simplemente pasando algunos estilos de celda. También podemos especificar clases usando un array con la propiedad de clase de celda.

Entonces, si quisiéramos tomar estos estilos y realmente escribirlos en CSS en lugar de en línea en JavaScript, podríamos hacerlo creando una clase de nombre de cliente CSS con esos estilos. Y podemos pasar el nombre de la clase como un array a la propiedad de clase de celda en la definición de la columna. Así que ahora estas celdas se renderizarán con esa clase de nombre de cliente y tendremos la capacidad completa de estilizarla usando CSS enganchándonos de ese nombre de clase.

Y finalmente, creo que el más interesante es la propiedad de clase de celda. También puede ser una función que se invoca. Así que podemos echar un vistazo a, por ejemplo, ¿es el valor un cero? Bueno, mostramos una clase de error o mostramos una clase de nombre de cliente. Y así podemos hacer una aplicación de clase advanced aquí haciendo una inspección en el valor para devolver o determinar qué clase aplicar realmente.

AG Grid va más allá al darnos reglas de clase de celda, que es simplemente formalizar el enfoque que mostré anteriormente. Así que para las reglas de clase de celda, le doy un objeto de diccionario de cada clase CSS que podría querer aplicar a la celda. Y luego le doy una función que devuelve verdadero o falso en cuanto a si esta clase debe ser aplicada a la celda o no. Así, por ejemplo, en este caso aquí, estoy aplicando una clase de valor de celda negativo si el valor es inferior a cero y una clase de valor de celda positivo si es mayor o igual a cero. Y puedes tener tantos valores en este diccionario como quieras.

Algunas cosas a tener en cuenta que quiero destacar. Así que los estilos de celda añaden y sobrescriben estilos existentes. Estos estilos nunca van a ser eliminados. Estos son estilos estáticos que se aplican. La clase de celda puede añadir clases pero nunca eliminar ninguna clase, ¿verdad? Podemos darle clases para aplicar, pero no podemos decir qué clases no deben ser aplicadas. Las reglas de clase de celda son la opción más advanced de las tres. Nos permite añadir y eliminar clases con esas funciones de predicado que controlan si una clase debe ser aplicada o no.

Estilo de fila. Así que eso es para las celdas, pero ¿cómo podemos querer estilizar realmente algunas filas? Bueno, para las filas, podemos usar el estilo de fila para añadir estilos a todas las filas. Podemos hacer GetRowStyle para añadir estilos de forma condicional, y luego, al igual que teníamos para las celdas, tenemos la clase de fila, getRowClass y las reglas de clase de fila para gestionar qué estilos se aplican. Así que, por ejemplo, para hacer un estilo de fila, Primero, porque estamos hablando de filas ahora y no de columnas, vamos a aplicar estas en el componente agGridReact directamente. Así que para agGridReact, vamos a decir, vale, para la clase de fila, aquí está la clase que quiero aplicar, o para las reglas de clase de fila, de nuevo, eso podría ser un diccionario, podemos aplicarlo, o para los estilos de fila, si sólo queremos aplicar algunos estilos estáticos, podemos hacerlo aquí. Aquí hay un ejemplo de mostrar esas reglas de clase de fila. Estos pueden ser simplemente diccionarios de nuevo con esas funciones de predicado que aplican estilos, estilos si estas funciones devuelven verdadero o que getRowClass puede ser una función que mira toda la fila de data y elige si aplicar o no una clase a ella.

Finalmente, quiero hablar de algunos de los temas incorporados. AG Grid tiene varios temas proporcionados. Valham es el tema original con el que AG Grid se lanzó por primera vez. Es muy denso, por lo que es genial si estás tratando de mostrar una gran cantidad de data. Tiene ese estilo denso. Alpine es el que hemos estado haciendo hoy. Tiene un aspecto bastante moderno y fresco pero es menos denso en el estilo Balham. Así que muestra algunos data pero no tanto data como el Balham y también tiene un estilo material incorporado y es el menos denso. Balham y Alpine también incluyen opciones de modo oscuro. Así que si queremos ir aquí queríamos cambiar la forma en que esto estaba estilizado aquí. Podría ir a mi CSS aquí o ¿es este un índice? Sí y podría cambiar el tema AG como si quisiera que esto fuera material en su lugar, podría incorporarlo, y ahora tenemos un aspecto material. Si quisiera hacer el BALHAM, también podría hacerlo y obtener ese aspecto realmente denso. Creo que lo deletreé bien. Sí, lo hice. Así es como controlas eso. Simplemente importas el tema que quieres aplicar a tu AG grid. Y esos son los tres temas que están incorporados en él. Puedes personalizar cualquiera de estos temas. Todos tienen variables CSS y reglas CSS. Además, si estás usando SAS, hay mezclas y funciones SAS para controlar o aplicar estos temas. Por ejemplo, si intentáramos personalizar el tema Alpine, podríamos hacerlo con SAS. Podríamos importar la mezcla AGThemeAlpine, y luego podríamos aplicarla a nuestra grid, y podemos controlar cosas como el tamaño de la grid, los colores activos, si se muestran o no los bordes. Muchas opciones de personalización aquí. Definitivamente recomendaría consultar la documentation para ver cómo puedes personalizar estos temas.

Si no estás utilizando SAS, no tienes que preocuparte. También soporta variables CSS. Por lo tanto, puedes personalizar estos temas utilizando esas variables CSS. Así que todas las cosas que podrías personalizar con el mixin de SAS, también puedes aplicar una variable CSS directamente en ese elemento raíz para controlar. Finalmente, hay algunas reglas SAS que puedes aplicar. Así que hay como AG pram y AG color property. Así que si quieres profundizar en alguna personalización advanced, tienes un conjunto completo de reglas SAS disponibles para hacer esa personalización. Así que eso fue AG Grid con React en dos horas. Espero que hayas disfrutado aprendiendo un poco sobre AG Grid y cómo implementarlo con React. Quiero hablar un poco sobre el tamaño del paquete. Tuvimos una pregunta sobre eso antes, y así que quiero tocar un poco este tema. En este ejemplo de hoy, y hay un gran post en el blog que uno de nuestros asistentes enlazó en el chat, lo voy a poner aquí. Creo que hay algunos consejos muy buenos aquí sobre cómo controlar el tamaño del paquete, porque la forma en que lo hemos estado haciendo en estos ejemplos es que hemos estado importando el paquete completo de AG Grid community, y eso viene con cada bit de funcionalidad que hemos cubierto hoy. todos los filtros, todos los editores, todos los ordenadores. Pero si no necesitas toda esa funcionalidad, si sólo necesitas algo de esa funcionalidad, este post en el blog explica cómo usar su sistema de módulos para cargar sólo las partes de AG Grid que quieres usar, eso te permitirá controlar el tamaño de tu paquete y asegurarte de que sólo estás enviando suficiente funcionalidad de AG Grid. Si quieres aprender más, de nuevo, todas estas diapositivas son tuyas para guardar. Así que voy a publicar un enlace a estas diapositivas una vez más en el chat. Son gratis para siempre, así que siéntete libre de compartir estas diapositivas y todos estos ejemplos con tus colegas para volver a referenciarlos, para repasar algunos de los materiales advanced que se incluyeron en cada uno de estos capítulos. Mientras LiveLoveApp esté alrededor, estas diapositivas estarán disponibles durante años para controlar también. De nuevo, mi nombre es Mike Ryan. Soy un Experto en Desarrolladores de Google. Puedes seguirme en Twitter, LinkedIn y GitHub en MikeRyanDev. Realmente disfruté trabajando con todos ustedes. Me quedaré por un par de minutos más si hay alguna pregunta final, y si no, muchas gracias a todos por unirse a mí. Ha sido un placer.

Oye, tengo una pregunta para ti, si tienes tiempo para responderla. Así que he estado usando AG Grid durante años. Me encanta. Es genial. Pero una cosa con la que he tenido un poco de dificultad es el tamaño de las columnas. Así que tratar de hacer que se ajusten al contenido y hacer que una fila se expanda para llenar el espacio restante es algo con lo que siempre he tenido dificultades para que funcione de manera consistente. ¿Tienes algún tip sobre ese tipo de cosas?

Sí. Así que, sabes, estoy, ¿estás tratando de hacer esto con el redimensionable? No, no tamaño estático. Tamaño estático. Vale. Así que una de las cosas a las que puedes tener acceso, y voy a ver si puedo conseguirlo con esto, por ejemplo. En el AGGrid, hay una función de callback onGrid ready. Y lo que esto te proporciona es que te proporciona una API de grid. Y en esa API de grid, en realidad tienes la capacidad de hacer size columns to fit, creo que es el nombre de ello. Ojalá estuviera obteniendo las tipificaciones de TypeScript aquí para esto. Oh, esto es sólo el evento. Así que creo que es como event.api. Sí. O size columns to fit. Y lo que esto hará es que tiene mucha funcionalidad en él para controlar el tamaño de estas columnas. Y estoy invocando esto un poco demasiado temprano en el pipeline, pero lo que quieres hacer es que puedes usar esta API, después de que se haya establecido tu data, y llamar a este método size columns to fit en él, y automáticamente ajustará todas las columnas basándose en la data que se ha renderizado. Y puedes llamar a eso en cualquier momento. Así que, como, mientras el usuario está desplazándose o si transmites nueva data o algo sobre el formato de la data ha cambiado, eso ha cambiado, siempre puedes llamar a ese size columns to fit.

Y eso le dirá a AG Grid que vuelva a invocar o mire para cambiar esto. Así que he hecho eso antes con resultados variados. Una de las cosas que parece hacer es elegir una fila o una columna para hacerla expandir al ancho completo. ¿Hay alguna manera de elegir qué columna elige para expandir?

Sí, así que dentro de aquí tienes algunas opciones, y creo que estos límites de columnas es lo que quieres hacer. Y puedes especificar, creo que puedes como eliminar columnas para que las inspeccione. Creo que también puedes, quiero decir que, y tendría que buscar esto. Quiero decir que la API de columna también tiene un método de tamaño automático. en él. Así que como si estás, miramos algunas de esas devoluciones de llamada de definición de columna, tienen la capacidad de obtener una API de columna, y eso tiene un tamaño automático en él también. Tendría que buscar en la documentation, pero realmente miraría eso. Y creo que en estas definiciones de columnas, como en una individual, no sé si juegas con esto, también puedes establecer el tamaño automático o la altura automática para que sean verdaderos para estos también, o auto tamaño sea verdadero en una base por columna solo con las definiciones de columna, así que eso podría ser la pieza que falta ahí sí gracias sí bien gracias a todos tanto ha sido una gran masterclass espero que todos tengan un gran día