Comienza con AG Grid Angular Data Grid

Comenzaremos desde el nivel básico y luego avanzaremos a medida que avancemos en el taller hacia características más complicadas, supongo, para ambos servidores. así es como se usa AG Grid. Pero luego también si estás buscando hacer algo más complicado te mostraré cómo puedes hacer eso y trabajar con la cuadrícula.

Y luego, si planeas seguir el taller tengo un enlace en el chat al repositorio que tiene las instrucciones. Entonces, si vas a la rama principal, te dice puedes cambiar a través de las diferentes etapas del taller. Por ejemplo comenzaremos con el inicio rápido y Y estos serán los pasos en los que trabajaremos. Puedes comenzar desde cero como lo haré con el Angular CLI o puedes seguir estas instrucciones y cambiar de rama. Si revisas este repositorio, entonces en caso de que te quedes atascado en un paso, siempre puedes pasar al siguiente punto de partida y continuar con el taller. Y también espero que esto te sirva como una buena referencia. Definitivamente podrás ver de qué se trata AG Grid.

Y supongo que mientras estamos justo antes de comenzar a seguir los pasos y crear la aplicación. Así que probablemente me presente y tal vez te preguntes quién soy. Pero sí, mi nombre es Stephen Cooper y trabajo en Easy Grid en el equipo principal. Así que soy uno de los desarrolladores, supongo que ahora manteniendo la cuadrícula, agregando características, asegurándome de que nuestro sitio de documentación sea lo mejor posible para que las personas tengan éxito con nuestra cuadrícula. um pero sí, aj grid es una cuadrícula de javascript por lo que todo lo relacionado con tablas y características que podrías asociar con eso, clasificación, filtrado, um todas estas son las características que puedes esperar de aj grid y mucho más um definitivamente se usa mucho en entornos financieros um pero ese definitivamente no es el único lugar donde se usa, por lo que podemos tener actualizaciones de transmisión en vivo de muy buen rendimiento, algunos gráficos, así que tal vez toquemos estos temas al final del taller, pero comenzaremos desde el principio um y te mostraré cómo podrías comenzar a usar AG grid en tus propias um aplicaciones, así que creo que comenzaremos desde aquí y solo para que lo sepas, siéntete libre de detenerme hacer preguntas mientras avanzamos, si hay algo que no tiene sentido o si deseas más información al respecto, porque entonces puedo entrar en más detalles y asegurarme de que esté claro. Para comenzar, vamos a usar el angular CLI solo para crear una nueva aplicación para nosotros. Así que vamos a hacer eso con ng-new. Llamémoslo MyApp. Y luego vamos a establecer algunos valores predeterminados aquí. Estableceremos el estilo en SPSS. No necesitamos enrutamiento para esta aplicación. y vamos a establecer los estilos y plantillas en línea para que sea más fácil de ver durante este taller, pero eso depende completamente de ti cómo prefieras configurar tu propia aplicación o cómo se hace en tu proyecto actual así que una vez que se haya creado esta aplicación, te mostraré los pasos que necesitamos seguir para agregar AG Grid en ella, y esto se hace con Angular 14, ya que ahora es la versión más reciente, pero en términos de características de AG Grid, vamos a admitirlo hasta la versión 8 en este momento, y definitivamente a partir de la versión 9, aún tendrás soporte, por lo que si tu proyecto ya se creó en una versión anterior, sabes, vamos a ayudar y mantener esa compatibilidad. Entonces, si entramos en nuestra aplicación, tenemos que ejecutar start, deberíamos poder ver que tendremos una aplicación de plantilla. Echemos un vistazo. Lo tenemos. Es interesante que cuando lo haces con estilos en línea o plantilla, obtienes la antigua aplicación en lugar de la nueva. Pero detendremos eso. Y ahora vamos a agregar AG Grid. Hay dos paquetes que vas a querer usar para AG Grid. Tenemos nuestro AG Grid Community. Y estas son todas las características gratuitas de la cuadrícula. Y también tenemos AG Grid. Angular, que es un envoltorio de Angular, que proporciona el tipo, que proporciona el componente Angular que te permite interactuar con él de una manera específica de Angular. Entonces, tenemos nuestro código Angular y tenemos AG Grid Angular y community. Esos son los dos paquetes que necesitaremos para comenzar con AG Grid. Ahora, antes de poder avanzar, deberemos agregar el módulo AG Grid en nuestro módulo para importar todas las características. Así que ese es el módulo azgrid. Con eso, se importa el componente. Ahora vamos a iniciar nuestra aplicación. Y vamos a ir al componente de nuestra aplicación y vamos a cambiar esto. Entonces, nos desharemos del código generado. Nos dará una pizarra en blanco. Bien. Ahora nos preguntamos por qué no funciona. De acuerdo. Entonces, vamos a hacer eso. El componente que vamos a usar es ag-grid-angular. Así que lo agregaremos. Y lo principal que necesitas para una cuadrícula es, por supuesto, datos y definiciones de columnas. Así que voy a copiar algunos datos y también las definiciones de columnas para ahorrarme tener que escribirlos.

Así que los he copiado del repositorio de GitHub que publiqué en el chat. y vamos a revisar esto, así que lo que tenemos aquí es para nuestros datos de filadata vamos a ver algunos ganadores de medallas olímpicas, así que tenemos atletas, sus nombres, edad, países, de dónde son y también cuántas medallas ganaron en cada una de estas competiciones, y verás que nuestras definiciones de columna para la cuadrícula coinciden con las propiedades de nuestros datos de filadata, así que tienes el campo atleta que apuntará a este campo edad es esa propiedad y así sucesivamente. Así que necesitamos pasar estos a nuestros componentes. Así que tenemos entradas de datos de filadata. Así que pasamos eso a la fila datos de filadata y las definiciones de columna. Ahora, en este punto, estás pensando, ¿está AG Grid completamente roto, pero nos falta otra etapa de configuración que es darle todo el siguiente CSS... Así que lo que tenemos aquí, AGGrid.css. Este es el CSS principal de la cuadrícula, por lo que siempre deberás importarlo porque eso realmente gobierna cómo está estructurada la cuadrícula. Y luego el segundo archivo aquí es un tema. Así que AG Grid viene con algunos temas diferentes. Y este es el archivo de tema para AgThemeAlpine. Y si volvemos a nuestra cuadrícula Angular aquí, vamos a vincular el tema con AG ALPINE, y también vamos a establecer el estilo en esto para que ocupe la altura de nuestra aplicación de demostración. Digamos simplemente 100%. Y ahí lo tenemos. Tenemos nuestra primera cuadrícula. Y así puedes ver ahora nuestros datos de filadata, las tres filas que tenemos se muestran y se utilizan las definiciones de columna que proporcionamos. Así que eso es lo básico, el mínimo indispensable que necesitas hacer para comenzar con una cuadrícula g, y como dije hay diferentes temas, por lo que podríamos cambiar la clase para que sea oscura y si actualizamos el archivo css también para que sea el tema oscuro, verás que puedes tener la cuadrícula en modo oscuro también así que podrías hacerlo dinámico porque sé que eso es muy popular para que los usuarios puedan cambiar el estilo. Pero sí, hay varios temas diferentes, que puedes ver en nuestro sitio web, dependiendo de lo que estés buscando. Así que ese es el paso inicial.

No sé si hay alguna pregunta al respecto antes de continuar con el siguiente paso y comenzar a agregar más data y más características.

De acuerdo, parece que no las hay. Así que pasemos al segundo paso, que consistirá en agregar algunas propiedades de la cuadrícula. Así que seguiré estos pasos ahora.

En la mayoría de las aplicaciones, supongo que tus data vendrán de un servidor backend. Así que vamos a imitar eso ahora con un archivo local.json. Así que tengo aquí estos datos de fila. Y los voy a poner en un archivo en nuestra aplicación bajo assets. Así que permíteme crear un nuevo archivo, RhoData.json. Y voy a copiar esto. Así que ahora tenemos un archivo grande con todos esos data.

Ahora necesitamos actualizar nuestra aplicación para poder utilizar esos data. Lo primero que debemos hacer es utilizar el cliente HTTP de Angular. Digamos que necesitamos importar ese módulo primero, recordando hacerlo desde Angular. Ahí está el módulo del cliente. Y ahora en nuestro componente de la aplicación, podemos inyectarlo en nuestro constructor. Así que tenemos nuestro cliente HTTP. Y creo que cargaremos los data en ngOnInit. Así que implementemos eso. Hay dos formas, supongo, de cómo podemos obtener estos datos de fila. Así que el enfoque inicial que podrías querer hacer es simplemente decir this.http, vamos a obtener los data, que estarán en forma de un array. Así que no estoy escribiendo nuestros datos de fila por el momento. Pero eso es algo que probablemente se volverá más importante en la próxima versión, porque entonces podremos escribir los datos de fila y darte autocompletado en todas partes donde lo uses. Y simplemente diremos que los obtengamos de nuestros assets. OK, y luego nos suscribiremos a eso. Y luego esto... Ups. Y ahora puedes ver que estamos obteniendo muchos data. Es posible que no queramos hacerlo de esta manera, donde nos suscribimos dentro de nuestra aplicación. Probablemente sea mejor que Angular administre la suscripción. Así que en su lugar, podríamos convertir esto en un observable. Y utilizaremos la tubería async. Eliminaremos los datos de fila codificados. Y luego vamos a asignar eso y al menos no tendremos que escribir la suscripción. Y no tendremos que recordar cancelar la suscripción. Y solo para mostrar cómo AG Grid lo maneja, porque no estamos aquí, no tenemos un gran retraso en la red, pero podríamos imitarlo y ver qué sucede. También no voy a pasar mucho tiempo tratando los casos de error. Pero digamos que hay un retraso allí, así que puedes ver que lo vemos cargando. Y eso es lo predeterminado. También puedes reemplazar eso con tu propio componente. Pero ahora tenemos nuestros data cargados y estaremos listos para agregar más características a la cuadrícula. Vamos a eliminar el retraso por ahora, de acuerdo, así que lo siguiente que podrías querer hacer con esto es poder ordenar los data y actualmente, ya sabes, no hay funcionalidad de ordenación y eso se debe a que no lo hemos habilitado, así que para habilitar la ordenación puedes ir a las definiciones de columna aquí y para las columnas que desees puedes decir sortable y establecer eso en true. Así que ahora lo establecemos en la columna del atleta. Si hacemos clic en el encabezado, puedes ver que ahora podemos ordenar por la columna del atleta. Así que antes de pensar, oh, tengo que copiar y pegar esto en cada columna. No tienes que hacer eso. Hay algo llamado default column def. Así que podemos agregar una propiedad aquí llamada default column def. Y tiene la misma interfaz que la definición de columna. Y esto nos permite decir que estableceremos sortable en true.

Podemos eliminarlo de allí. Y luego pasar eso a nuestra cuadrícula como la definición de columna predeterminada. Si lo que deberíamos ver es que todas las columnas ahora comparten esta definición de columna predeterminada. Así que deberíamos poder ordenar por edad, país, año y ver quién ganó la mayoría de las medallas de oro. Así que la definición de columna predeterminada es una excelente manera de reducir, supongo, lo que llamas código repetitivo y tener características consistentes en todas las columnas.

También podríamos decir filtro, establecer eso en true, para que los filtros predeterminados funcionen y luego obtendrás este menú desplegable y podemos buscar 'lock'. Y luego eso funciona. Y luego para la edad, puedes ver que por defecto es solo un filtro de texto. Mira estas cosas.

A continuación, hay más formas en las que podemos configurar la cuadrícula. Y una de estas cosas que podríamos querer hacer es decir que hay una opción de animar filas. Establecer eso en true, lo que significa que cuando las filas se ordenen, obtendrás una bonita animación mientras las ordenas. Así que intentamos hacer que AgGrid sea lo más configurable posible. Así que si a tus usuarios les gustan las animations, puedes tenerlas activadas, o si quieres que tengan menos movimiento, entonces también puedes desactivarlas, pero eso está dentro de tu control. Así que todas estas son entradas. Pero ahora hay muchas formas en que los usuarios pueden interactuar con la cuadrícula, y tú querrás poder responder a eso en tu aplicación. Tal vez queremos que el usuario pueda seleccionar una fila. Así que podemos habilitar la selección de filas. Y para esto, vamos a decir 'multiple'. Hay una opción de 'single' o 'multiple'. Así que con eso habilitado, los usuarios ahora pueden seleccionar filas haciendo clic en ellas. Y digamos que queremos obtener la fila que han seleccionado, aquí es donde necesitamos comenzar a escuchar los eventos de la cuadrícula. Así que ahora hay muchas salidas. Y podemos ver que ha cambiado la selección. Creemos un controlador para eso. que tomará el evento. Así que agreguemos un cambio de selección. Y ahora el evento, el formato para esto será, en términos de las interfaces, es el nombre que sea, hay una interfaz para eso. Así que sabremos que será un evento de cambio de selección. Y luego eso nos dará las propiedades que están disponibles en ese evento. Así que en este caso, en realidad solo son las siguientes. Pero lo que podemos hacer con eso es imprimirlos, usar la API del evento, podemos obtener las filas seleccionadas de la API y ver cómo eso cambia. Así que no sé si eso puede ser un poco pequeño. Así que ahora puedes ver que cuando cambio la selección, obtenemos las filas seleccionadas. Y de esa manera puedes usar la cuadrícula como una interfaz un poco más interactiva si quieres, donde los usuarios seleccionarían algo y luego tal vez dirían, sabes, guardar o enviar esto. Así que hay muchos eventos diferentes que puedes hacer.

Ahora podrías estar pensando, ¿por qué tenemos tanto espacio para estas columnas? ¿Podemos mejorar la visualización allí? Hay diferentes formas de hacer esto. Podrías establecer un ancho explícito y decir, quiero que esa columna tenga 100 píxeles y acercar estas para que puedas usar todo el espacio de pantalla que tienes. Otra forma de hacerlo es conectarse a los eventos de la cuadrícula y también a las API. Hay un evento llamado 'firstDataRendered'. Y con esto, podemos crear un controlador para eso. controlador para eso. Nuevamente, sería el evento de 'first data rendered'. Y aquí vamos a usar la API de columnas y ajustar automáticamente todos los anchos de las columnas. Así que si hacemos eso. Ahora verás una vez que se carguen los data, ajustará automáticamente las columnas que están actualmente mostradas en la cuadrícula, lo que te da una noción ligeramente más compacta. Así que si descomento eso, puedes ver la diferencia. Así que depende de ti como desarrollador cómo quieres que se comporte la cuadrícula. ¿Quieres que los usuarios, cambien los anchos? Por el momento no lo hemos habilitado, pero podríamos ir a nuestras definiciones de columna predeterminadas, decir 'Resizable', establecer eso en true, y luego eso permitirá a los usuarios cambiar los anchos de las columnas ellos mismos.

O puedes usar las APIs para hacerlo por ti.

Ok, ¿tienes alguna pregunta hasta ahora? Ok, otra cosa que demostraré aquí antes de agregar más funcionalidades a la cuadrícula es cómo puedes acceder a la API de la cuadrícula, lo que te permite agregar un botón encima de la cuadrícula. Y lo usaremos para limpiar la selección actual. Diré 'Limpiar selección'. Así que en este punto no tenemos acceso a la API de la cuadrícula, por lo que una forma de obtenerlo es a través de una vista secundaria. Si usamos la vista secundaria, atributo y le pasamos el componente AGGrid, Angular. Escribe eso como 'grid'. Y luego escribe 'happy'. Y luego aquí abajo, podemos decir AGGrid, Eso es deseleccionable. Ahora, si agregamos una selección, podemos decir 'limpiar la selección'. Y puedes ver que ahora hemos utilizado la API de la cuadrícula que hemos obtenido a través de esta vista secundaria, para poder acceder a la cuadrícula e interactuar con ella a través de su API. Así que hay una API en la API de columna. Y solo para darte una idea rápida de las cosas que están disponibles en eso, en nuestra documentación, se enumeran bajo esta interfaz, API. Así que tienes la lista completa de todas las opciones de la cuadrícula, así como todos los métodos que puedes llamar en la API de la cuadrícula y la API de columna. Nuestra documentación tiene la lista exhaustiva de las cosas que puedes llamar.

Ok. Muy bien. De acuerdo. Muy bien. Entonces, si pasamos al siguiente paso, ¿hay más preguntas en este punto? Y eso sería agregar algunos estilos a la cuadrícula. Ahora voy a mostrar cómo puedes estilizar estas columnas, tal vez para tener los colores dorado, plateado y bronce. para hacer esto un poco más interesante, y solo para facilitar esto en esta pantalla más pequeña voy a cambiar el orden de las definiciones de columna para alinearlas Así que como puedes ver, por defecto, el orden en el que proporcionas las definiciones de columna es el orden en el que la cuadrícula las muestra. Aunque es posible que los usuarios arrastren las filas. Nuevamente, eso es configurable. Puedes suprimir eso si quieres. Correcto. La primera forma de agregar es poder agregar una clase de celda. así que podríamos decir 'metal gold y luego hagamos lo mismo para silver y bronze silver Como puedes ver, aún no ha cambiado nada. Y eso se debe a que no hemos especificado estas clases CSS. Así que solo las estoy obteniendo para poder copiarlas. Ahora, podrías pensar que tu respuesta predeterminada sería ponerlas aquí en los estilos de la aplicación, así. Y luego podrías estar confundido acerca de por qué esto no funciona. Así que hemos establecido nuestro estilo aquí con los colores de fondo y lo hemos referenciado en nuestra clase de celda. Pero el problema con esto es debido a la encapsulación de estilos. Por defecto, los estilos que defines aquí solo están disponibles para los elementos HTML que defines dentro de tu plantilla. Y debido a que las celdas mismas se están renderizando como parte de AGCritAngularComponent, los estilos que aplicas aquí no son recogidos por ellas. Están encapsulados aquí. Así que si quieres definir tus estilos aquí, en este componente, puedes cambiar la encapsulación para que sea ViewEncapsulation.none, y eso significa que esos estilos se aplicarán de forma global. Y puedes ver que ahora se están aplicando los estilos. Pero si no quieres cambiar la encapsulación de tu componente, entonces estos estilos deberán ser definidos externamente al componente. Así que los voy a poner aquí. Y luego puedes ver que, al estar definidos globalmente, AGGrid se está aplicando correctamente. Y ahora estamos mostrando los estilos. Así que nuevamente, eso dependerá de ti y de cómo está configurada tu aplicación sobre cómo quieres gestionar dónde se definen tus estilos y si quieres desactivar la encapsulación o no. Pero digamos que tenemos otra solicitud donde solo queremos aplicar los colores donde realmente haya medalla, así que por ejemplo aquí donde silver y bronze sean cero, en realidad no queremos aplicar el color y así podemos actualizar nuestra clase de celda para que sea condicional y esta clase de celda puede tomar una función también, comencemos con la de oro y tomemos algunos parámetros parámetros de clase de celda. Y diciendo que si el valor de la columna es mayor que cero, entonces queremos metal gold. De lo contrario, no queremos nada. Y ahora puedes ver que donde es cero, la clase no se aplica, donde hay más de cero, sí se aplica. Y hay varias formas diferentes de aplicar estos estilos.

Y también puedes tener algo llamado reglas de clase de celda, que lo hace de una manera ligeramente diferente. Para esto, toma un objeto donde le das el nombre de la clase y luego un valor booleano para aplicar esa clase o no. Esto sería medalla Silver. Y una vez más, podemos darle una función. Y decir que si el valor de los parámetros es mayor que 0, entonces aplicar esa clase. Así que puedes ver que para silver ahora, los 0 no tienen el estilo. Y también puedes ir un paso más allá, en términos de, si quieres que el código sea aún más conciso, es que admitimos una sintaxis de expresiones, que funciona así. Reemplaza esto con X mayor que cero. Y eso se debe a que nuestra AG Grid sabe cómo interpretar esta expresión. Y los detalles de eso, supongo que están en nuestra documentation, para ver cómo aplicar estilos a las celdas. Puedes ver que esta es la sintaxis de expresiones que tenemos disponible, por lo que x es el valor, y también puedes tener data si quieres aplicar estilos basados en varias columnas de o en esa fila de data y así sucesivamente. Pero sí, ahora tenemos nuestra cuadrícula y hemos agregado algunos estilos a ella. Espero que tenga sentido, ¿alguien tiene alguna pregunta al respecto o quiere que comparta otras formas de actualizar estilos? De acuerdo.

Hasta ahora, con esta A2Grid y esta cuadrícula, estamos utilizando prácticamente todas las formas predeterminadas de mostrar data en la cuadrícula. Pero una característica muy poderosa que es posible que desees utilizar dependiendo de tu proyecto es poder reemplazar los renderizadores de celda individuales que tenemos aquí con tu propio componente Angular.

Hasta ahora, solo estamos utilizando una representación de cadena, pero podemos poner nuestro propio componente aquí. Y para demostrar eso, detengamos la aplicación y vamos a utilizar la CLI para generar un nuevo componente para nosotros y luego lo usaremos como renderizador de celda. Entonces hagamos ng generate cell. Así que eso nos ha creado nuestro componente.

Ahora, lo primero que debemos hacer antes de poder usarlo como renderizador de celda es implementar la interfaz de AG Grid. Yo, renderizador de celda, angular. Y esto tiene dos métodos que debemos implementar. Tienes refresh y también AGInit. AGInit es común en todos nuestros componentes, y es el método que AGGrid llama para inicializar tu componente, y se llamará antes de que se llame a ngInit. Así que es ligeramente diferente al ciclo de vida de Angular. Es nuestra forma de interactuar con tu componente después de haberlo creado para ti.

Así que déjame borrar esto por ahora. Inicia la aplicación nuevamente. Y luego, si volvemos a nuestro componente de la aplicación, vamos a decir para nuestra edad, en lugar de usar el renderizador predeterminado, usemos nuestro componente para renderizarlo. Así que usamos el renderizador de celda y le pasamos nuestro componente de celda. Y ahora, si te fijas bien, verás que ahora estamos viendo que la celda funciona y eso es porque eso es lo que tenemos en nuestra plantilla aquí.

Entonces eso no es particularmente útil, porque probablemente no quieras que aparezca lo mismo en cada celda. Entonces, ¿cómo lo actualizamos realmente? Aquí es donde entra en juego este agenet. Primero que nada, agreguemos un valor aquí, propiedad de valor. Podemos decir número porque lo estamos usando en la columna de edad y luego, lo obtendremos de los parámetros. Entonces, podemos tener un método, digamos, obtener valor o puedes obtenerlo directamente de los data y eso será el data de la fila. Así que hagámoslo por ahora. A veces puede ser nulo si estás haciendo agrupación de filas, lo cual mencionaré más adelante en la masterclass. Y luego diremos edad. Y luego podemos actualizar nuestra plantilla para usar ese valor. Y luego puedes ver que solo dice Agregar. Así que puedes ver que ahora estamos mostrando el valor tal como viene de los data de la fila. Espero que todo eso tenga sentido.

Ahora hay una cosa que podrías decir, bueno, hemos codificado mucho en este componente. ¿Qué pasa si queremos crear un componente de celda compartible que podamos usar en varias columnas, y eso es algo que es muy posible hacer. Entonces, por ejemplo, tal vez tuviéramos esto como edad. Ahora, si vamos a usar eso para la columna de atleta, eso no tendría sentido. Así que podríamos agregar el nombre aquí y agregar este renderizador de celda. componente y puedes ver que ahora hemos dividido el nombre actual, lo cual no es ideal, así que ahí es donde podríamos entrar aquí en lugar de usar data y podríamos usar la función obtener valor si tiene eso, obtener el valor, de lo contrario, lo dejaremos indefinido y al menos estamos obteniendo el valor correcto. Pero como puedes ver, esta etiqueta todavía está codificada. Entonces necesitamos una forma de parametrizar eso. Entonces, además de tener un renderizador de celda, también puedes pasar parámetros a tus renderizadores de celda. Y eso se hace en este formato, tienes parámetros del renderizador de celda y digamos que vamos a darle una etiqueta y la llamaremos bueno, solo diremos etiqueta y le daremos esto, esto sería ese nombre y luego podemos hacer lo mismo para la edad Y decir h. Y para usar estos parámetros, volvemos a nuestro componente de celda. Y luego agregaremos una etiqueta. Entonces, eso es una cadena. Y luego aquí. Entonces, esto sigue siendo etiqueta igual a params.label. Pero, como puedes ver, la interfaz de iCellRendererParams no tiene una propiedad de etiqueta porque esa es nuestra propia personalizada. Y entonces, lo que podemos hacer es definir una interfaz para nuestro componente de celda, que luego, ya sabes, le dice a las personas, en realidad, este componente entiende la siguiente interfaz. Y luego podemos usar eso aquí. Y la compilación ahora funciona. Y luego realmente lo usamos en nuestra plantilla.

Y luego usarlo en nuestra plantilla. Ahora puedes ver que tenemos nombre y edad, que son los parámetros que hemos proporcionado aquí. y aquí, así que podríamos haber agregado código allí. Puedes ver eso.

Luego, veo. ¿Alguien tiene alguna pregunta o pensamiento o puede ver cómo eso podría ser útil en su proyecto? Déjame un comentario. Hazme saber que todavía estás aquí. Tan silencioso. Sin comentarios. Muy bien, continuaré.

Entonces, otra forma en la que puedes usar estos componentes de manera más dinámica es que tal vez tengas componentes que deseas mostrar según los datos de la fila data en sí. Tomemos la columna de edad, por ejemplo. Podríamos querer tener dos componentes diferentes, uno para indicar si es mayor a cierta edad o uno si es menor a cierta edad. Y podemos hacer eso con un selector de renderizador de celda. pero antes de eso, necesitaremos dos componentes diferentes para alternar entre ellos. Así que voy a copiar y pegar para ahorrar tiempo. Para tener un componente 'over' y 'under'. Permíteme corregir ese nombre de interfaz. Muy bien. Ahora he agregado un componente 'over' aquí y también uno 'under'. Entonces, si es 'under', lo resaltaremos en rojo. verde si es 'over' y decidiremos cuál usar en nuestro componente de la aplicación en sí. Ahora, en lugar de tener un renderizador de celda y parámetros de renderizador de celda, podemos tener un selector de renderizador de celda, y esto toma nuevamente un objeto de parámetros. Parámetros de renderizador de celda y dentro de este método vamos a verificar la columna de edad, para que podamos decir si params.data. Esa es la primera comprobación para ver si es data, porque si estamos haciendo agrupación de filas, entonces en realidad no habrá data en esta fila. Veremos eso más adelante en la masterclass. Y luego podemos decir si el params data.edad, digamos, si es mayor o igual a 25. Entonces vamos a devolver nuestro componente 'over'. Lo hacemos con este formato. Entonces el componente será el componente 'over'. Y también podemos pasar parámetros a eso si queremos. Y creo que tenía una etiqueta. Digamos 'over 25'. Y si no lo son, entonces vamos a devolver el componente 'under', así que decimos componente. Por ahora, lo dejaremos vacío. Y aquí vamos. No hemos proporcionado una etiqueta aquí, agreguemos una etiqueta a este valor. Acabo de silenciarte. Recibiendo comentarios. Muy bien. Ahora tenemos audio activado. ¿Querías hacer una pregunta? Muy bien. De acuerdo, continuaré. Ahora puedes ver que tenemos diferentes componentes. Así que tenemos el componente 'over' y el componente 'under', ambos en la misma definición de columna, pero seleccionamos dinámicamente qué componente queremos usar. Estas son todas, potencialmente, no es exactamente lo que quieres hacer, pero espero que te dé una idea del poder que tienes al utilizar AG Grid para personalizarlo y trabajar dentro de Angular. Esperemos que ese sea el framework que comprendes y en el que tienes confianza. Y esto solo muestra que puedes usar componentes de Angular dentro de AG Grid en sí, lo cual es una característica realmente agradable y bastante poderosa así que tenemos eso ¿Puedes darme un pulgar hacia arriba si esa característica es potencialmente útil ah sí, gracias O tal vez no. Qué revelación.

Genial. Entonces, hay una posible desventaja, bueno, no una desventaja, una limitación de este enfoque de pasar componentes directamente a las definiciones de columna es que a veces es posible que desees almacenar tus definiciones de columna en un servidor, por ejemplo, o es posible que desees recuperarlas dinámicamente y decir, si es este usuario, pueden ver estas columnas. O tal vez, si son un usuario avanzado, también pueden tener todas estas otras columnas. Y para hacer eso, es posible que desees que tus columnas sean serializables en JSON. Pero si intentas poner estos componentes reales en, entonces tendrás un problema con eso. Así que hay una forma de solucionar esto, que supongo que implica un poco de código adicional, y aplicas un mapeo. Por lo tanto, puedes proporcionar un objeto de componentes. Y digamos que tenemos un componente de celda, y ese será nuestro componente de celda. Podríamos decir 'over', y eso representaría nuestro componente 'over' y 'under'. y luego en la propiedad del renderizador de celda, en lugar de darle el componente real en sí podrías darle la cadena 'cell comp' y de la misma manera en este selector dinámico en lugar de eso podrías tener 'over' en lugar de eso podrías tener 'under' Oh sí, dice Agigrid buscando componente, pero no se encontró. Y eso es porque no he pasado el mapa de componentes al componente, al componente Agigrid. Ahí vamos. Ahora podemos ver que seguimos obteniendo el mismo comportamiento. pero ahora si intentamos serializar esto obtendrás la propiedad del renderizador de celda y cell comp así que es una forma agradable de separar tus componentes de las definiciones de columna en sí pero si no necesitas esa característica, entonces es muy conveniente poder pasar los componentes en sí okay, así que creo que eso es el renderizado de celda hecho La siguiente parte de la que voy a hablar es el filtrado.

Y también, vale la pena recordar que todo lo que he demostrado hasta ahora es completamente gratuito para usar como parte de nuestra Edición Comunitaria. Así que puedes comenzar a usar Azure Grid Community, incluirlo en tu proyecto, ejecutarlo en una aplicación de producción y todo está bajo la licencia MIT. Por lo tanto, no hay nada que pagar y puedes obtener todo esto completamente gratis. Sí, así es. Bien, filtrado. Hasta ahora hemos visto que el filtro predeterminado es solo un filtro de texto, pero eso no es tan bueno para estos números aquí. Entonces, lo que vamos a hacer es ver los diferentes filtros que tenemos disponibles. Y eso se hace de manera similar, diciendo qué filtro queremos usar. Así que si voy a nuestra documentación, voy a filtrado, si miramos nuestros filtros de columna proporcionados, tenemos texto, número, fecha. Todos ellos son parte de la edición comunitaria y el filtro de conjunto lo veremos cuando habilitemos las características empresariales. Entonces, para nuestras medallas, vamos a querer usar el filtro de número. Así que vamos a entrar aquí y el nombre es ag número filtro de columna. Entonces, si miramos la columna de oro, puedes ver que tenemos igual, menor que, mayor que, así que esto nos da una mejor manera de controlar y trabajar con números, puedes decir más de cinco. Y eso ahora es correcto. Así que podríamos agregar eso a plata y también a bronce. Y ahora todos se filtrarán como si los números ahora lo que quiero ver a continuación es el filtro de fecha. Y debido a que estás trabajando con una fecha en formato de texto, puede ser un poco complicado. Así que podemos habilitar el filtro de fecha aquí. Entonces, el filtro, pg, filtro de columna de fecha. Y ahora puedes ver que tenemos nuestra fecha. Así que si ingreso la fecha, 24-08-2008, en realidad no está funcionando. Daré puntos extra por adivinar por qué. Pero si echamos un vistazo a nuestra pestaña de red y miramos los datos que estamos obteniendo, veremos que la fecha está llegando como una cadena. Y eso es bastante común. Cuando obtienes datos de una API, tus valores de fecha vuelven como cadenas. En realidad, no son objetos de fecha de JavaScript. Entonces, hay diferentes formas en las que podrías manejar eso. Es posible que tengas lógica de análisis en tu servicio, que está devolviendo las fechas, que tal vez las haya convertido en objetos de JavaScript. Pero si descubres que tu cuadrícula tiene fechas en formato de texto, es posible proporcionar una función comparadora para el filtro de la siguiente manera. Hagamos eso aquí. Como antes, cuando teníamos renderizadores de celdas, podemos pasar parámetros de renderizador de celdas. Hay un objeto de parámetros de filtro, y luego tenemos filtro y luego tenemos parámetros de filtro. Y una de las opciones allí es un comparador, que está diciendo la fecha del filtro que llega como una fecha, y luego el valor de la celda que es una cadena. Entonces, este código es específico para el formato de la fecha en la que se establecen nuestros datos, que es, si miramos nuestros datos de fila, puedes ver que nuestras fechas están en este formato, dos dígitos con barras, eso es lo que este comparador está dividiendo y luego nos permite crear una fecha y decir si es mayor o menor que eso. Ahora, con ese comparador agregado, intentemos hacer lo mismo. 24-08-2008, y ahora puedes ver que nuestro filtro de fecha está funcionando correctamente, puedes decir después de ese día o antes. Y está funcionando, así que la razón por la que el filtro de fecha no lo obtiene automáticamente, supongo, es porque los formatos de fecha pueden ser tan diferentes y eso es como el conocimiento del dominio de la aplicación, pero puedes anular el comparador para obtener la funcionalidad que necesitas. Bien, pero como es posible que queramos facilitar nuestras vidas o no las vidas de nuestros usuarios, en lugar de tener que alternar este icono de filtro. Hay algo llamado filtro flotante. Entonces, si continúo y lo agrego a nuestra definición de columna predeterminada, se aplica en todas nuestras columnas. Lo que verás ahora es que esto agrega un nuevo encabezado, partes del encabezado, en las que podemos filtrar. Entonces ahora podemos simplemente escribir aquí y hará una coincidencia de cadena en eso. Y esto es una forma bastante agradable de, sí, facilitar las cosas para los usuarios. Y así, ya sabes, pueden abrir el filtro aquí y tal vez pueden cambiarlo a menos que y luego recordará ese comportamiento para el valor que estás ingresando. Así que ese es el filtro flotante. Pero luego podrías preguntarte sobre esta columna de edad, porque parece que la forma en que hemos configurado nuestra aplicación es poder tener o bien son mayores o son menores, así que tal vez queramos poder alternar el filtro en lugar de decir bueno, ¿son? No hemos establecido el filtro de número allí de todos modos. Entonces, lo que estoy diciendo es que podemos proporcionar una implementación de filtro personalizado para esta columna y usar eso para controlar las cosas. Una vez más, usemos la CLI para generar el componente por nosotros. Va a ser ng-g-component-age-filter. Y luego, como antes, ahora vamos a implementar la interfaz de filtro, supongo que solo para darte una idea de los componentes disponibles. Ya hemos hecho el renderizador de celdas. Ahora vamos a ver el componente de filtro, pero puedes ver que hay muchas otras habitaciones, supongo, o lugares donde puedes personalizar la cuadrícula.

Ahora vamos a ver el componente de filtro, pero puedes ver que hay muchas otras habitaciones, supongo, o lugares donde puedes personalizar la cuadrícula. Así que puedes tener un filtro flotante personalizado, componentes de encabezado, paneles de herramientas, consejos de herramientas, o incluso ediciones. Así que hay muchos hooks, o muchas formas en las que puedes proporcionar implementaciones personalizadas a AG Grid. Pero vamos a hacer el componente de filtro. Y eso va a implementar ifilter AngularComp. Vamos a deshacernos de eso. Así que hay más propiedades aquí para implementar que en el renderizador de celdas, porque hace un poco más. Entonces, la lógica que estamos tratando de lograr aquí es tener un botón de radio para decir si es menor de 25 o mayor de 25 y así que vamos a tener, vamos a empezar a implementar esto, así que podemos decir que está sobre el límite Va a ser un booleano o indefinido, si no queremos que el filtro esté activo. Así que necesitamos decir cuándo está activo el filtro. Así que eso va a ser cuando está sobre el límite. Es explícitamente verdadero o explícitamente falso. verdadero. De acuerdo, y luego para cuando, si el filtro pasa, esta es la lógica que se ejecutará para cada elemento de fila que tenemos. Y así esto será, bueno, si esto es verdadero, está sobre el límite, entonces supongo que vamos a juzgar si el prams.data.age es mayor o igual a 25. Y luego, de lo contrario, si isOverTheLimit se establece explícitamente en falso, entonces haremos, rams.Dated . Y luego, de lo contrario, vamos a devolver verdadero, solo para que no filtremos las cosas cuando no está activo. Luego, para obtener el modelo, devuelve el modelo para el estado actual del filtro. Nulo si no está activo. La cuadrícula va a llamar a esto. Lo que haremos aquí es que vamos a devolver. Está sobre el límite como nuestro. un objeto para que sea nuestro modelo. Y luego en el modelo establecido, este método se puede usar para inicializar el filtro. Así que va a ser... Tenemos que tener cuidado aquí. Asegurémonos de hacerlo bien. Entonces, booleano. Supongo que si el modelo, si eso es verdadero, entonces podemos decir que esto está sobre el límite es igual a verdadero. Y si se establece explícitamente en falso, entonces de nuevo podemos decir Que lo hemos establecido en falso. De lo contrario, podemos establecer que está sobre el límite sea indefinido, lo que significa que nuestro filtro está seleccionando todo. Y ese es el enlace específico de dónde estoy en este momento.

Ahora, si el modelo está sobre el límite, es falso. De lo contrario, vamos a establecer que está sobre el límite sea indefinido. De acuerdo. Y luego aquí, donde estamos obteniendo nuestro adionet, vamos a llevar esto arriba para que se llame primero, nos está pasando este objeto de parámetros y eso tiene un número de devoluciones de llamada en él que todos necesitamos usar una vez que implementemos nuestro filtro y vamos a tomar una carga llamada vamos a almacenarla localmente tal vez de acuerdo y ahora vamos a tomar nuestro componente de filtro de edad y dónde está nuestra definición de columna para nuestra columna de edad Y así diremos filtro, y podemos pasarle ese componente. Así que ahora, cuando abramos el filtro, estamos obteniendo que el filtro de edad funciona. Así que ahora cuando realmente hemos conectado nuestro filtro un poco más. Y creo que para ahorrarte verme escribir voy a copiarlo. Y luego puedo explicarlo. Así que lo que tenemos aquí son algunos botones de radio. Uno para todos, uno para menores de 25 y otro para mayores de 25. Y cuando haces clic en él. Vamos a llamar a este método en filterChanged, así que vamos a implementarlo en nuestro filtro. Y esto va a ser un booleano o indefinido. Y lo vamos a establecer como nuestro modelo. De acuerdo. Así que ahora puedes ver que tenemos nuestro filtro personalizado aquí, todos, menores o mayores. Así que la herramienta funciona, pero puedes ver que nuestro filtro no está haciendo nada. Aquí es donde entran en juego los parámetros. Y necesitas decir devolución de llamada filterChanged.

Esta es una forma de notificar a AG Grid que mi filtro ha sido actualizado. Necesitas ejecutar tu lógica de filtrado nuevamente. Ahora que hemos agregado eso, abramos nuestro filtro, veamos bajo y sobre. Ahora parece que está haciendo lo correcto. Y si lo borramos, ¿lo estamos obteniendo correctamente? Entonces, puedes ver que el componente se reutiliza tanto en el filtro flotante como en... Bien. Así es como tendrías un filtro personalizado también. Quiero decir, mi estilo no es el más bonito, pero eso no es lo que estamos tratando de demostrar aquí. Es más, ¿cómo puedes conectar esto a AG Grid? Supongo que otra cosa que podría demostrar aquí es la forma en que podemos obtener modelos de filtro y también establecer modelos de filtro. El caso de uso para esto es cuando un usuario puede estar actualizando filtros y quieres poder guardar ese estado o guardar sus preferencias. Entonces es posible que tengas un método que recupere ese estado de filtro y luego también pueda establecerlo nuevamente. Así que actualicemos este botón aquí, borrar selección. Y reutilicemoslo para obtener el modelo de filtro. Y aquí, simplemente imprimámoslo por ahora. Obtener modelo de filtro. Entonces, si lo llamo ahora, puedes ver que es un objeto vacío. Ahora digamos bajo y digamos obtener modelo de filtro. Esto se basa en, así que tienes columna y luego isOvertheLimit. Esto es lo que devolvemos desde nuestro método getModel aquí. Entonces podemos ver si lo establecemos en over y luego obtenemos el modelo de filtro, esto debería ser verdadero ahora, lo cual es. Y, por supuesto, si establecemos esto, así que es menor que cinco medallas y obtenemos nuestro modelo de filtro, ahora vemos que tenemos age y también tenemos gold para el oro que tiene más información. Este es el filtro de AG Grid, que indica qué tipo de filtro es el tipo de filtrado y en cuanto al valor. Muy bien, entonces finjamos que vamos a guardar esto en el almacenamiento local que puede ser nuestro servidor, o almacenamiento local. Estado del filtro. Digamos que queremos bajo y vamos a adivinar que no es realmente obtener, sino decir estado del filtro ahora. Y luego tengamos otro método que luego restaurará el estado del filtro. Y haremos lo contrario, así que es this.aggrid.api.setfiltermodel. Y simplemente lo tomaremos del almacenamiento local. Bien. Agreguemos un botón para eso. De acuerdo, si lo hacemos bien. Entonces, si lo hacemos bien, vamos a bajo, digamos que el oro tiene que ser menor que tres y vamos a obtener el modelo de filtro, luego digamos que actualizamos la página, establecemos el modelo de filtro, no se encontró la columna Entonces, verifiquemos qué se almacenó en el almacenamiento local. Ah, eso no es lo que queremos, ¿verdad? ¿Funcionará? Bien, eso se ve más saludable. Y digamos que queremos que sea menor que cinco. Bien. Eso está ahí. Si restablecemos esto y luego restauramos el modelo de filtro, ahora también necesitaremos pausarlo. Ahí vamos. Bueno, no del todo. Algo no funciona del todo. Veamos qué modelo estamos obteniendo del... Estamos obteniendo age is over the limit igual a falso. Eso parece correcto. Estamos estableciendo el modelo de filtro. No se está filtrando. ¿Quieres que continúe depurando esto o pase a las siguientes características? Avísame en los comentarios. Pasemos a las siguientes. Bien. De acuerdo.

Digamos que hay algo que tal vez esté ligeramente desactivado y cómo estamos evaluando este modelo. Sí, el botón puede tardar un poco. Así que verificaría qué estaba llegando aquí y luego vería por qué eso no se actualizaba como esperábamos. Correcto. Sí.

¿Alguien tiene alguna pregunta sobre el filtrado o las otras cosas que podrías hacer con los Filtros de AG Grid? ¿No? De acuerdo. Muy bien. Entonces, la siguiente parte que voy a ver es ver algunas de las Funcionalidades Empresariales. Para hacer esto, necesitamos agregar un nuevo paquete ahora, AG Grid Enterprise, porque hemos separado lo que puedes tener como una comunidad, y también, si quieres, estas Funcionalidades Empresariales, que añade mucha más funcionalidad a AG Grid. Pero para las funcionalidades empresariales, necesitarás comprar una licencia. Pero creo que vale la pena ver, algunas de las funcionalidades que estarán disponibles para ti. Así que si instalamos AG Grid, enterprise, de acuerdo. Y luego en nuestra aplicación, lo que necesitamos hacer es importar AGGrid Enterprise y eso habilitará todas esas funcionalidades. Como puedes ver, ahora tenemos enterprise, pero no hemos configurado nuestra licencia. Hay algunos registros en la consola que dicen, por favor, compra una licencia. Pero ahora hay algunas cosas que puedes hacer, ahora cuando hacemos clic derecho, ahora obtendrás este método. método que puedes usar para copiar data, o puedes exportar a CSV o Excel. Así que hay un conjunto completamente nuevo de funcionalidades que podría mostrarte desde nuestra documentación. Así que hay una comparación de funcionalidades. Como puedes ver, la mayoría de las cosas que obtienes en la comunidad. Y hay datos de fila en el lado del servidor que puedes obtener en Enterprise. Algunas cosas más en Enterprise en términos de selección de rango. Nuestro filtro establecido, que puedo mostrar ahora. Edición y todas las visualizaciones normales, eso está disponible para todos. Agrupación y pivote, y luego, por supuesto, importación y exportación. Y luego hay algunos paneles de herramientas y barras laterales y agregaciones que también vienen con AG Grid Enterprise. Entonces, si volvemos a nuestro componente de la aplicación, ahora podemos ver que cuando abrimos el atleta, ahora estamos usando este, el filtro establecido enterprise. Así que tienes eso configurado de forma predeterminada para permitirte hacer cosas como esta. Así que creo que puedo comenzar la honestamente. Tienes el filtro establecido y hay diferentes formas en las que puedes configurarlo también. Otra cosa, que creo que es bastante popular, es la agrupación de filas. Para hacer eso, especialmente si quieres que el usuario pueda hacerlo, hay algunas propiedades que necesitas configurar. Una de ellas es 'row group panel show', y vamos a configurar eso para que siempre se muestre. Así que puedes ver aquí que ahora nos ha dado esta área donde podemos arrastrar filas para poder agruparlas. Voy a limpiar un poco este código para que sea más fácil ver lo que estamos haciendo. Así que voy a comentar esto por ahora. Y vamos a traer mi columna de país, y sí, vamos a traerlos de vuelta arriba. Digamos que queremos agrupar por año, actualmente no podemos hacer eso. Así que necesitas agregar algunas propiedades a tus grupos de filas. Tenemos 'enable row group'. Y si lo configuramos como verdadero en 'year', eso nos permitirá agrupar por año. Y lo que quizás quieras ver aquí es cuántas medallas de oro o medallas de plata ganaron y tener eso agregado. Y eso es algo que necesitamos configurar en esas columnas para decir realmente sí, y agregar la función usando alguna. Así que si lo hacemos, probablemente se llame 'aggregate function' y vamos a decir que use alguna para todas estas, todas las medallas que tienen sentido. Y luego, si agrupamos por año nuevamente, ahora puedes ver que esas columnas se han sumado para mostrarnos lo que hay. Podemos expandir estos y profundizar en ellos. Eso es un vistazo rápido a la agrupación. Bueno, mientras tenemos ese grupo activado, vamos a habilitar, voy a decir 'rowGroup by' verdadero, para no tener que seguir configurándolo yo mismo. Y luego voy a habilitar también los gráficos y la selección de rango. sin configurar nada les da el valor verdadero.

Ahora, si entro aquí, selecciono Todo, ahora tienes la opción de hacer algunos gráficos también. Por ejemplo, podemos ver aquí, así de fácil, obtienes el oro, plata, bronce en el total. También podemos venir aquí y configurar lo que realmente queremos mostrar. Y luego digamos que agrupamos esos por... podemos cambiar el orden y puedes ver cómo está vinculado a la cuadrícula. Lo cual ahora ha revelado instantáneamente algunas peculiaridades en nuestros datos, parece que cada dos años el número de medallas ganadas ha cambiado. Estas son las herramientas de análisis que podrías proporcionar a tus usuarios y darles esta flexibilidad, no solo tenemos la cuadrícula, sino que la cuadrícula también viene con características de gráficos integradas. Esto es algo que personalmente usé antes de trabajar en AG Grid, que fue muy bien recibido por mis usuarios. Así que simplemente habilité los gráficos y de repente tenían toda esta funcionalidad disponible. Todos los gráficos circulares. Y hay muchas cosas diferentes que puedes hacer allí. Bien.

Así que estoy pensando en este punto en hacer esto lo más útil posible para ti. Si quieres darme algunos comentarios en términos de las características específicas en las que podrías estar interesado, y tal vez pueda enfocarme en esas áreas en lugar de demostrar características que podrían no ser aplicables para ti. Así que ahora es tu oportunidad de hacer preguntas o indicarme en la dirección correcta. De lo contrario, continuaré demostrando más características. De acuerdo. De acuerdo. De acuerdo. ¿Te gustaría que me enfoque en lo que puedes hacer como una comunidad, o estás interesado en ver las características empresariales más avanzadas que tenemos disponibles? De acuerdo. Muy bien. Hagamos algunas características empresariales más. Así que creo que hay algo de espacio aquí. Además, creo que antes de hacer esto, esto es algo que es específico de Angular. Como puedes ver, nuestro componente de Angular aquí está creciendo bastante y se está volviendo difícil ver exactamente qué está sucediendo aquí. Y aquí es donde creo que, como usuarios, podemos aprovechar la propiedad de opciones de la cuadrícula, que contiene exactamente la misma interfaz que el propio componente. Así que podemos crear realmente opciones de la cuadrícula aquí y decir opciones de la cuadrícula igual. y nos permitirá limpiar nuestra plantilla. Así que digamos... Habilitar gráficos. Establecer eso como verdadero. Así que en lugar de tener esto definido allí, podemos traer las cosas a nuestro componente y pasarlas todas juntas. el panel de grupos de filas. Siempre. Y otra ventaja que esto te brinda en comparación con definirlo en la plantilla misma es que te permitirá reutilizar, supongo, tus opciones de la cuadrícula como un objeto JavaScript. Podrías tener un objeto base que se comparte y podrías expandirlo en estas opciones de la cuadrícula y de inmediato estás reutilizando muchas de estas configuraciones sin tener que copiarlas en la plantilla misma. Así que cuando trabajaba con AG Grid, definitivamente me gustaba tener este enfoque mixto donde puedes definir prácticamente todas tus opciones estáticas que realmente no van a cambiar en estas opciones de la cuadrícula y simplemente pasar eso. Mientras que es muy útil aprovechar Angular, la tubería asíncrona para algo como los datos de las filas donde eso está cambiando. Y también puedes hacer lo mismo para las definiciones de columnas. Podrías tener un interruptor allí y hacer que tus definiciones de columnas pasen a través de una tubería y la cuadrícula responderá automáticamente y volverá a renderizar esas columnas en función de las definiciones de columnas que le estás proporcionando. De acuerdo. Otra característica empresarial es una, podemos tener una barra lateral aquí. Y si miramos esto, Entonces podría ser una cadena o una matriz de cadenas. Sé que podemos tener columnas y filtros. Así que ahora tenemos esta barra lateral, que ha aparecido aquí. Deben ser filtros. Ahí vamos. Así que tenemos el de columnas. Y ahora puedes ver que tenemos la capacidad de mover columnas aquí, y se reflejarán en la cuadrícula. Puedes ocultar, mostrar.

Te brinda otra forma de hacer agrupamiento de filas también. Bueno, así que podrías agruparlo por año. Es otra forma de interactuar con la cuadrícula. Y también, tienes los valores allí. Como puedes ver, también podemos hacer pivoteo. Así que si sabes cómo hacer pivoteo y usarlo como una característica, puedes hacerlo. Así que ahora hemos pivotado, hemos pivotado de alguna manera. Y hay algunas opciones más que podrías necesitar configurar para hacer pivoteo en las definiciones de columna a las que me referiría en la documentation para hacerlo. Y también en este panel de filtros que obtienes, puedes, nuevamente, trabajar con los filtros en este panel, en lugar de tener quizás filtros flotantes aquí. Así que te brinda otra opción de cómo quieres que tus usuarios trabajen con la cuadrícula.

Y luego no hay nada que te impida proporcionar tus propios componentes personalizados en estas áreas también, lo cual puedo mostrarte ahora. Vamos aquí. Así que si vamos a Componentes, nosotros Y ahora puedes ver, tenemos este componente de panel de herramientas. Que creo que está listo para nuestro ejemplo. Así que sí, vamos a copiar este, el estadísticas personalizadas. Así que si no has estado en nuestro sitio de documentation, esto es algo que vale la pena revisar. Tenemos todos estos ejemplos en vivo. Así que tienes la salida renderizada y también está el código aquí y también puedes abrirlo en Plunger. Y aquí es de donde voy a tomar este código y podemos incorporarlo en nuestra aplicación. Así que vamos aquí, agreguemos un nuevo archivo. Parece que todo se ha compilado. Veamos. Luego podemos echar un vistazo aquí y ver, ya sabes, cómo lo usaría yo en mi propia aplicación. Así que puedes ver que está llegando aquí como parte de la definición de la barra lateral bajo paneles de herramientas. esto es, vamos a darle su definición completa en lugar de usar el atajo, y esto es un array. Así que creo que podemos hacer esto, vamos a ver. Sí, mira, son una cadena o es una definición completa. Así que tenemos nuestras columnas o filtros. No puedo. Rachel, ¿estás tratando de hacer una pregunta? Si estás tratando de preguntar algo. Voy a copiar este código de aquí. Volvamos a nuestra aplicación. Estadísticas personalizadas. No se puede encontrar el oro. Más depuración. más tarde como este ejemplo. Es porque tenemos agrupamiento activado. Ahí vamos. Así que quitemos el agrupamiento y ahora estamos obteniendo las medallas totales mostradas en la cuadrícula. Creo que esto funciona con los filtros. No, no lo hace. Pero no hay nada que te impida escuchar este tipo de eventos y decir cuando los filtros hayan cambiado, actualiza mi panel de estadísticas personalizadas. Y seguir desde ahí. Esa es la barra lateral. Otro elemento que puedes agregar con enterprise es una barra de estado en la parte inferior, que es bastante útil para agregaciones rápidas y recuentos. Así que la barra de estado. Veamos esta definición de la barra de estado aquí. Voy a ponerlo en accesorios porque esto viene con algunas opciones predeterminadas para ti. Por ejemplo, como esto. Así que ahora ves que tenemos el número de filas, y esto tiene que ver también con los filtros.

Filtrémoslo para que sea 2000. Ahora dice que hay tantas filas de tantas y digamos que queremos hacer alguna forma de agregación allí. Bueno, entonces está el componente de agregación. Si solo echamos un vistazo rápido al código para asegurarnos de hacerlo bien, así que vamos a traer traer todo esto. Así que tenemos las filas, filas totales y cuántas están filtradas. Si comenzamos seleccionando un rango, tenemos promedios, conteos, mínimos, máximos. Así que nuevamente, estos son solo, supongo herramientas que puedes usar para mejorar tu cuadrícula y hacerla aún más poderosa para tus usuarios para que no tengan que copiarla y exportarla a Excel u otras funcionalidades. Hay mucho que puedes hacer con la cuadrícula incorporada, especialmente cuando has actualizado a usar las versiones enterprise.

Ahora me pregunto si alguien tiene proyectos específicos o ideas en los que estén trabajando o problemas que tengan actualmente con AG Grid en los que pueda ayudar. Te estoy mostrando diferentes características.

Quizás otra área en la que podríamos echar un vistazo es. Bueno, creo que. Tal vez queremos poder agregar nuevas filas a nuestro conjunto de data. Y eso es algo que las cuadrículas suelen ser útiles. De acuerdo. Sí. Sí. Entonces, ¿qué tal si decimos, bueno, ya sabes, este menú contextual, ¿podemos personalizarlo y agregar una opción aquí, que cuando hagamos clic en ella, agreguemos, duplicaremos una fila de data, tal vez. Porque creo que sería una buena manera de mostrar cómo podrías usar la cuadrícula e interactuar con ella de diferentes formas. Entonces, la forma en que haría esto es, esto es el menú de contactos, así que puedes venir aquí y ver cómo podríamos configurarlo para agregar un nuevo elemento en... Y así es esta devolución de llamada, obtener elementos del menú contextual. Entonces, en nuestras opciones de cuadrícula, voy a obtener elementos del menú contextual. Sé que esto es una devolución de llamada, que recibe parámetros. Obtener parámetros del menú contextual. Y sé que esto tiene una propiedad, creo que tiene elementos predeterminados. Así que podríamos proporcionar eso. Igual. Sí. Entonces creo que esto vamos a hacer un casting por ahora, y podemos ver que sigue funcionando, eso es bueno, pero también vamos a agregar nuestro propio elemento personalizado. Entonces puedes ver que este ejemplo tiene uno personalizado, así que podemos venir aquí y decir... vamos a tener Vamos a echar un vistazo. Vamos a copiar este, y vamos a devolver un array, ahora, con esto en él además de esos. a nuestra aplicación. Entonces, puedes ver, ahora tenemos nuestra alerta. Vamos a quitar ese agrupamiento de filas. Y dice Estados Unidos, podemos decir. Entonces, tenemos esa misma funcionalidad. Ahora, ¿qué pasa si, en lugar de hacer eso, queremos duplicar esta fila? Entonces, aquí en la acción cuando se hace clic, hay dos, supongo que hay un par de pasos aquí. En primer lugar, necesitamos poder obtener los datos de la fila y podemos obtenerlos de los parámetros. Así que primero vamos a verificar que los tengamos. Así que vendrá del nodo y podemos decir los datos de la data desde aquí. Así que si hacemos clic derecho aquí. De acuerdo, sí, así que tenemos los datos de la fila allí desde nuestro nodo de fila. Y luego sabemos en este punto, todavía tenemos acceso a la API de la cuadrícula. Entonces, lo que podemos hacer aquí es establecer... Bueno, esto no es exactamente lo que queremos hacer. Pero muestra que realmente podrías establecer los datos de la fila. Vamos a echar un vistazo. De acuerdo. Hemos actualizado los datos de la fila. Lo que realmente queremos hacer es simplemente duplicarla. Entonces aquí está... lo que probablemente queremos hacer es aprovechar la API de transacciones. y así esto es en realidad te mostraré aquí estoy trabajando con datos del lado del cliente donde se está actualizando puedes usar estas transacciones para actualizar el estado actual de la cuadrícula, así que vamos a usar esta transacción aplicar y diremos que estos son los datos que quiero agregar así que tenemos nuestro elemento de fila podemos usar la API aplicar transacción y sabemos que necesitamos darle un objeto que tenga agregar darle un array elemento de fila Si volvemos a nuestra aplicación. Así que vamos a tomar esta fila, duplicar. Y veamos dónde ha ido. Entonces puedes ver que nuestro recuento de filas está aumentando, pero probablemente aparece al final. Sí, lo está. Entonces probablemente queremos que aparezca en el índice correcto, así que necesitamos obtener el índice de fila de este nodo actual, nodo.rowindex, y luego digamos, agregar índice, Vamos a usar ese índice de fila.

Y ahí lo tenemos, ahora se está agregando y lo hemos duplicado y utilizado nuestro método de transacción para hacerlo. Esa es otra forma en la que puedes acceder a los data de los nodos de fila. Así que tienes el índice de fila donde se muestra y también los data, y luego utilizas la API para actualizar la cuadrícula en sí. Así que hay bastante potencia que puedes lograr a través de estos menús contextuales y también métodos externos.

Así que vamos a mostrar algunas características más que son bastante rápidas y fáciles de agregar. Por ejemplo, sé que en la descripción de esta masterclass, hablamos sobre la paginación. Así que es mejor que te muestre cómo hacerlo. Y eso es la paginación hecha. Así que puedes ver que tenemos del uno al cien en esta página. Y puedes pasar por las páginas o ir a la última página utilizando la paginación. Tal vez demuestre otra de mis formas favoritas de filtrar cuando tienes muchos data como este. Hay una función llamada filtro rápido. Así que si volvemos al filtrado, y está este filtro rápido. El filtro rápido es una forma muy poderosa de dar a tus usuarios un único lugar donde pueden escribir su texto y buscar en todas las columnas. Funciona de esta manera, así que agregarías aquí. Y digamos, Missy, ver Franklin o puedes buscar por las edades, o puedes decir donde tienen una medalla de oro o tal vez también tienen una de plata. No existe. Pero podemos mostrar cómo podríamos configurarlo.

Así que si venimos a nuestro componente aquí, y en la parte superior agreguemos un cuadro de texto, un input. y un input. De acuerdo. Está cambiando. Digamos que el filtro cambió, posiblemente, evento. Vamos a entrar aquí y agreguemos este cambio de filtro para manejarlo. Solo revisa de memoria cuál es el evento que obtienes de aquí. Estoy usando el evento del navegador, usando cualquier evento. Voy a echar un vistazo rápido a este ejemplo. Está utilizando el evento de entrada. Por eso ponemos tantos ejemplos en nuestra documentación, porque nos da una forma de agregar características, y tienes ejemplos funcionales que puedes copiar, y te pone en marcha mucho más rápido. De acuerdo, así que en realidad está obteniendo el ID del elemento y pasándolo. Creo que probablemente podamos usar Angular para hacer esto, ¿verdad? Con nuestro modelo de formulario. ¿Cómo se llama? Engine... Cambio. No. Permíteme cerrar mi ventana. Mi mente se ha quedado en blanco en cuanto a lo que el cambio aquí es cuando estás usando ng model Así que simplemente usamos los puntos de nuevo. viendo que para eso están Así que está conectado, así que ahora estamos obteniendo los valores, digamos 2008, así que el filtro rápido te permite filtrar en todas las columnas al mismo tiempo, así que puedes decir 2008, y Digamos de nuevo. Esa es una característica que me gusta mucho. Estoy pensando que si no hay nada más en particular que las personas quieran hacer, podría valer la pena concluirlo. porque estoy seguro de que hay otras formas en las que puedes consultar nuestra documentación tú mismo en lugar de que yo copie de ejemplos. Espero que esto haya sido útil en términos de mostrarte lo que es posible con AG Grid y cómo puedes comenzar y formas de configurarlo y utilizar los diferentes renderizadores de celdas y todas estas otras características que vienen con AG Grid enterprise.