Práctica con la Rejilla de Datos React de AG Grid

En el lado izquierdo, espero que todos puedan ver mi pantalla, en el lado izquierdo tengo el repositorio de GitHub. Vamos a usar esto para rastrear los diferentes capítulos, si se quiere, o las secciones de esta charla. A medida que avanzamos, voy a estar codificando en vivo. Si sientes que te perdiste algo o cometiste un error o te quedaste un poco atrás, consulta la rama para la sección de la que estamos hablando y describirá el código a medida que avanzamos. Por ejemplo, en la primera sección, aquí está el código de la primera cosa que presentaré mientras discuto, y luego la segunda parte, y así sucesivamente. Y al final de eso, así que cuando lleguemos al final de ese capítulo, si vas a... Estamos a punto de comenzar en la segunda sección. Así que por ejemplo, si estamos a punto de comenzar la segunda sección con características de enterprise, si simplemente revisas esa rama, estarás directamente en línea, de vuelta donde estábamos. Pero a medida que avanzas, si quieres seguir adelante, sólo asegúrate de que tienes la rama correcta para la sección de la que estamos hablando y el código está ahí. Y podrás copiar y pegar. Alternativamente, puedes codificar a medida que te gusta o puedes simplemente mirar, no tienes que codificar en absoluto y cuando tú, después de la masterclass, toma tu tiempo y ve a mirar el repositorio de GitHub y los videos de YouTube que tenemos, y puedes seguir a tu propio ritmo. Así que vamos a empezar. Vamos a crear un proyecto vacío de react utilizando create react app, react app. Simplemente lo vamos a llamar hola. Mantén un ojo en el canal de Discord. Así que somos simplemente una simple aplicación de plantilla de react aquí. No tiene nada que ver con la cuadrícula hasta ahora. Simplemente instalando todas las dependencias. Está tomando un tiempo, lo siento. Vaya, eso tomó más tiempo de lo que pensé, lo siento chicos y Googles. Bueno, así que si vamos a hola, veremos un proyecto nor. Voy a abrir este proyecto en mi IDE. Y como dije, hasta ahora, esto es sólo un proyecto de plantilla de React sencillo. No hay nada específico sobre la AG grid todavía. Esto era mucho más rápido antes, pido disculpas por el ligero retraso aquí. Mientras eso está pensando, volveremos al terminal. Así que para empezar con AG grid y React, hay dos dependencias que necesitas instalar. La primera es, vamos a guardarla y guardar las dependencias. La primera que vamos a instalar es AGgridCommunity. AGgridCommunity tiene todas las características principales y todas las características gratuitas. Puedes usar las características en AGgrid community sin una licencia. No necesitas contactarnos. Puedes usarnos en proyectos comerciales, y luego eso contiene el código principal. Luego también vamos a instalar AGgridReact. AGgridReact es el lado de renderizado de React de las cosas, así que necesitas los dos juntos. El AGgridCommunity es el código principal de la cuadrícula, y eso es parte de la edición community, y necesitarás AGgridReact también para la integración de React, y eso proporciona el renderizado de React. Instalaré esas dependencias bastante rápido. Tenemos tu IDE. Así que lo primero que vamos a hacer es abrir app.js. Déjame ver si puedo abrirlo sólo en caso de que la gente tenga preguntas. Así que si ustedes o la gente en el canal tienen algún problema viendo la pantalla o entendiendo, por favor no duden en hacer una pregunta y trataré de responderla. Bueno. Así que empezamos con React Create app que nos proporcionó. Este es sólo un código de plantilla si lo ejecutamos. Lo ejecutamos. Bueno. El repositorio, lo compartiré en el repositorio. Alguien preguntó, sólo lo compartiré de nuevo. Así que en el lado izquierdo, espero que puedan ver mi navegador. Vemos los resultados de Create React app. Lo compartiré. Bueno. Eso es lo que Create React app nos ha dado. Así que lo primero que necesitamos hacer es instalar nuestro componente aggrid React. Lo traeremos. Así que lo traeremos con importaciones. Aggrid React. Nos desharemos de estas cosas en la aplicación, que no necesitamos. Y usaremos nuestro componente aggrid React. Hasta ahora, esto no nos hará nada. Porque como mínimo, una cuadrícula o tabla requiere filas y columnas. Así que las filas serán las cosas horizontales que ves, y las columnas serán las verticales. Así que vamos a traer algunos data locales para ver cómo podría ser eso. Así. Enfócate. Así que cada uno de estos campos será algo que podamos sacar y hacer en la cuadrícula. Los data de la fila son sólo un array de data JSON. Puedes tener tantos atributos, propiedades como quieras, y luego las propiedades pueden ser complejas. En este ejemplo, sólo vamos a estar mirando data simples. Así que números y cadenas. Pero pueden ser de cualquier tipo y luego la cuadrícula ofrece funcionalidad para que leas ese tipo y lo muestres como quieras. Así que en este caso, pondremos algunos data locales en la última sección y te mostraremos cómo podemos extraer esto de una fuente remota de manera más realista. Yo diría que esto es 45,000 y esto es 50. Y luego esto lo hará BMW. 4 series. Así que esos son nuestros data de fila. No hemos hecho nada con ellos todavía, así que es. Así que eso le dirá a la cuadrícula que muestre esos data de fila. Esa es sólo la mitad de la historia porque también necesitamos mostrar y elegir qué columnas sacar. Para sacar así que tus data de fila pueden tener cientos de campos que tal vez sólo quieras mostrar uno o dos. Cómo eliges qué data mostrar es con los data de la columna. Así que haremos eso a continuación. Eso es igual y como los data de fila. Este es un array de data JSON y como mínimo, necesitas especificar el campo de nuevo para mostrar que vamos a tener Hacer Modelo. Y precio. Y de nuevo, necesitamos decirle a la cuadrícula. Buena pregunta. ¿Cuál es la agenda? Así que hemos ido directamente a ello, pausaremos en un segundo y Te diré cuál es la agenda.

Hasta ahora, hemos obtenido el AG, hemos instalado la dependencia de agigrid community y React. Especificamos algunos datos de fila data y columna data y los pasamos a la cuadrícula. Y podemos ver los data mostrados aquí, pero como puedes ver, está todo desordenado. Eso es porque necesitamos decirle a la cuadrícula que necesitamos poner algo de CSS. Y la cosa que eres una dependencia de CSS, absolutamente tienes que poner es el agigrid estructural CSS. Y eso es de agigrid community, list styles, agigrid CSS. Como mínimo, necesitas proporcionar esto.

¿Por qué no funciona eso? Oh sí. Olvidé proporcionar un nombre de clase. Te diré por qué estoy haciendo esto en un segundo. Y la altura. Normalmente no codificarías la altura aquí. Pero solo para fines de visualización, describiré por qué. Ahí vamos. Entonces, esto no es importante en esta sección en particular. Volveremos a ello en un segundo. Entonces, aquí especificamos la altura. La cuadrícula llenará el div del padre. Entonces, en este caso, tenemos un div simple, hemos establecido la altura en 500 píxeles. En una aplicación real, probablemente tendrías esto como parte de una aplicación más grande, pero independientemente de la cuadrícula, los componentes de ag-grid aquí, llenarán cualquier div padre que nos hayas dado. Entonces, en este caso, lo hemos establecido a 500 píxeles de ancho. Y solo para recordarte, hemos obtenido el mínimo que es ag-grid CSS. Y esto proporciona el CSS estructural que necesita la cuadrícula. Entonces, en la cuadrícula y el navegador, podemos ver las tres columnas y filas. Podemos ver hacer, modelo y precio. Que hemos especificado con definiciones de columna. Y podemos ver los datos de fila data, Ford, Toyota y BMW, que especificamos con los datos de fila data.

Entonces, eso es genial. Eso está funcionando, pero eso no se ve exactamente muy bien. Este es el mínimo que necesitarás poner para trabajar. Y lo obtendrías y solo esto si tú y tu organización o tu empresa quisieran proporcionar su propio estilo. Esto es lo que tendrías que poner como mínimo para que la cuadrícula funcione. Y luego podrías anular los estilos que documentamos cómo hacer. Pero más comúnmente, usarías uno de los estilos que proporcionamos. Entonces eso es AG grid reacciona. Estilos. Proporcionamos un puñado de estilos. Y vamos a usar Alpine para este. Y esto es probablemente la gran mayoría de lo que la gente hace. Entonces puedes ver ahora que he obtenido el estilo Alpine que proporcionamos y lo he especificado en el div padre. AG steam Alpine. Y ahora puedes ver que la cuadrícula tiene algo de estilo. Tiene filas, tiene los encabezados de campo más audaces y así sucesivamente. Y hay un montón de estilos que podríamos probar. Oscuro, por ejemplo. Es tan fácil como esto. Y si lo cambiamos a Alpine dark, puedes ver que el tema cambia a un tema más oscuro. Hay un tema material, tema balan. Así que adelante y experimenta, pero nos quedaremos con Alpine por ahora. Entonces, como mínimo, esto es lo que necesitas para una cuadrícula. Necesitas el estilo en, obtenido. Necesitas datos de fila data y profundidades de columna. Y en casi nada de tiempo, quitando mi explicación, estarías en marcha con una cuadrícula simple, codificada por supuesto en menos de cinco minutos, diría. Pero eso probablemente no sea realista para la mayoría de los casos de uso. La mayoría de las personas probablemente obtendrán data de los datos duros data. Los datos de columna data probablemente estarán codificados, pero los datos de fila data más realistas se obtendrán de una fuente remota. Ahora, echemos un vistazo a eso a continuación. Ahora, de nuevo, usando hooks, que es lo que estamos usando aquí. Y solo para decir que puedes usar hooks, puedes usar componentes basados en clases con cuadrícula, ya sea dentro de una cuadrícula o en la cuadrícula misma. No importa. Estamos usando un componente funcional aquí, pero cualquier cosa funcionará. Pero como estamos usando un componente funcional, vamos a usar la fecha. Y necesitamos hacer eso para que podamos establecer de forma asíncrona los datos de la fila más adelante. Lo obtendré de React. Lo obtendré de React. Lo siento, espera. ¿Qué he hecho mal? Este es el peligro de la codificación en vivo, supongo. Vale. Todos los que están viendo probablemente fallaron en monitorear lo que hice mal. Ahí vamos. Así que volvemos a donde estábamos antes, tenemos los datos de fila data y las columnas. ¿Podría acercar mi IDE? Sí puedo, déjame hacer la fuente más grande. Espero que esto sea más fácil. Un poco mejor. ¿Está más claro Samuel? Por favor avísame, acercaré más si eso no... Genial. Vale, así que volvemos a donde empezamos. Tenemos datos de fila codificados data y datos de columna data. Si ustedes chicos no pueden ver o chicas no pueden ver una pantalla o cualquier cosa que estoy mostrando, por favor hagan ping y responderé lo más rápido que pueda. Hasta ahora, todo bien. Tenemos algunos datos de fila data y datos de columna data, pero ahora vamos a obtener esos data de una fuente remota, que es probablemente más realista. Cuando los hooks se renderizan por primera vez, querríamos... Así que haré una pausa aquí por un segundo. Cuando despliegas tu aplicación de verdad, esto simplemente funcionará. Pero como somos los que queremos obtener estos data de una fuente remota, que tiene HTTPS y lo ejecutamos localmente, sí, probablemente tendremos problemas de causa, especialmente con las versiones recientes de Chrome. Entonces, lo que deberías hacer para los propósitos de esta demostración es si vas a la rama principal, tengo un enlace en el repositorio para un archivo de data, que es lo que podemos leer de ellos. De nuevo, copio esos data. Entonces, OlympicWinners.json, puedes encontrar eso de nuevo en el repositorio en la rama principal. Solo ve al archivo de data y guárdalo bajo public. Y lo llamaremos OlympicWinners.

OlympicWinners. Ahora, esto solo es necesario para evitar algunos problemas de causa. No hay nada especial en estos datos. Es solo datos olímpicos y es algo que podremos usar para mostrar en la cuadrícula. Usaremos fetch. Y aquí, usaremos un local. Es el OpenSUSE. Diamonds slash Olympicrecontype. Los ganadores son Jaceh y luego necesitamos obtener ese array basin y decirle por decirle, ponerlo de nuevo en Jaceh. Es lo que es y finalmente queremos establecer esos datos de fila en el estado que estamos usando. Ahora podemos eliminar los datos locales. Y ahora puedes ver que tenemos muchos datos. Es muy realista. Tenemos muchas filas y algunas columnas. Entonces, esto es un poco más avanzado de lo que hemos hecho antes, pero más realista. Como mínimo, la mayoría de las veces cuando escribes o implementas una cuadrícula, este es el flujo de trabajo que habrías hecho. Especificarías el tema que deseas usar dentro de la aplicación más grande. Especificarías qué componentes, qué columnas, quieres mostrar y especificarías los datos de fila y los obtendrías de una fuente remota. Haciendo solo eso con no mucho código, tendrás una cuadrícula simple y funcional. Y esto probablemente cubre un buen 80%, 60, 70, 80% de los casos de uso que cubrirás donde no necesitas requisitos complicados y solo quieres mostrar algunos datos tabulares. Con casi ningún esfuerzo, estarás en marcha. Así que llevemos esto un poco más lejos. Tus usuarios probablemente querrán, como mínimo, ordenar y filtrar los datos de fila. Tal vez quieran ver a los atletas más jóvenes o los atletas más viejos o ordenar por país. Eso es bastante simple de hacer. Podemos agregar sortable, true, y filter, true, y si guardamos eso, si pasamos el cursor aquí, solo con agregar sortable y filter, no tienes que hacer ambos. Ahora tenemos datos ordenados y tenemos un filtro simple aquí. Hablaremos más sobre los filtros en una sección posterior, así que no hablaré mucho sobre eso. Pero esto es solo para mostrar que puedes agregar ordenamiento, filtrado y muchas otras propiedades de columna muy fácilmente. Entonces agreguemos filtrado y ahora sabremos que podemos ordenar hasta incluyendo fechas, ordenable hacia adelante, filtrable. Y, puedes pensar que esto es muy tedioso y repetitivo, y tienes razón. Digamos que quieres filtrar cada columna o quieres ordenar cada columna, no quieres tener que especificar esto una y otra vez, especialmente si tienes muchas, muchas columnas. Pero saquemos eso. Podemos especificar la definición de columna como predeterminada en todas las columnas al especificar una definición de columna predeterminada. Y esto, lo que sea que especifiquemos aquí, se especificará en todas las columnas que tengas por defecto. Columna, déjame asegurarme de escribir esto correctamente, definición de columna predeterminada igual a memo. Entonces, solo para pausarte por un segundo, estoy usando used memo. Voy a usar use effect, use state, use callback. No voy a describir por qué estamos haciendo eso. Supongo que las personas saben cómo usar estas cosas en React, porque obviamente esto no es un taller de React. Siéntete libre de enviarme un mensaje en el chat o en Discord si tienes alguna pregunta específica sobre por qué lo estamos usando en GRID, y estaré encantado de responder. Pero estas son cosas estándar de React, y probablemente no entraré en demasiados detalles sobre por qué estamos haciendo algo u otra cosa con esta característica particular de React. Entonces, vamos a devolver un objeto, y vamos a tener sortable true, filter true, y le diremos a la cuadrícula que lo use. Ok. Entonces, ahora deberíamos tener sortable, filterable en cada columna. Entonces, cada columna ahora tiene sortable y filterable. Entonces, no tienes que repetirlo una y otra vez. Y esto se dice para proporcionar solo dos atributos de propiedad. Podrías hacer sortable y filter, sortable y filter, lo siento. Y hay muchos más atributos de columna. Describiré algunos más a medida que avanzamos, obviamente, pero echa un vistazo a aggrid.com para ver la lista completa de atributos y lo que hacen. Entonces, como dije, esto especificará cualquier propiedad que desees especificar en todas las columnas. ¿Realmente importé? Sí. Pero digamos que quieres anularlo. Quieres anular lo predeterminado, podrías decir aquí filter, false. Entonces, lo que esto hará es aplicar esto a todas las columnas y luego todo lo que hayas especificado localmente anulará eso. Entonces, este ya no tiene filtro. Todavía tiene ordenamiento, porque no hemos sobrescrito eso, pero el filtro se ha ido porque lo hemos sobrescrito. Entonces, el orden será la definición de columna predeterminada y luego todo lo que especifiques localmente tendrá prioridad y anulará eso. Pero por ahora, tenemos una cuadrícula simple que tiene ordenamiento y filtrado en cada columna. Y como dije, hablaremos sobre los filtros un poco más adelante. Tengo una sección completa sobre filtros y luego filtros personalizados. Así que pospondré cualquier discusión sobre filtros por ahora. Solo sepa que proporcionamos alrededor de tres filtros listos para usar que puede proporcionar y utilizar. Y en la edición Enterprise, hay otros dos listos para usar que puedes usar. Y luego, por supuesto, puedes escribir tus propios filtros personalizados en React. Petros, solo usa el canal de Zoom. No te preocupes por Discord. Si puedes enviarme un mensaje aquí, responderé las preguntas lo más rápido que pueda en el canal de Zoom. No te preocupes por Discord si no puedes llegar allí. Ok, hasta ahora, todo bien. Digamos ahora que queremos actuar en algún evento. Hablemos de los eventos a continuación. Como dije, para obtener la lista de propiedades de columna, y hay tantas, no podría descubrirlas todas en un taller, ve a aggrid.com, mira las definiciones de columna y ve todas las propiedades que puedes usar en una columna y cómo configurarlas y cómo usarlas. Esto es solo para describirlo en términos generales. Hemos dicho, forSpring y forSportsPring. Veamos a continuación los eventos.

Digamos que queremos que, cuando un usuario haga clic en una columna, queremos que suceda algo. Tal vez hacen clic en algo y queremos que, quizás estén mirando un montón de artículos de compras y hacen clic en algo y aparecería una imagen para mostrar cómo podría verse un artículo elegido, por ejemplo. No haremos eso, haremos un console.log o una alerta. Pero lo primero es lo primero, queremos agregar, oh, ya sabes qué, antes de seguir, veré dos propiedades más de la cuadrícula que podrías querer hacer.

A diferencia de las propiedades de las columnas, hay un montón de propiedades de la cuadrícula que puedes hacer, toneladas. Entonces, Bruna acaba de preguntar, ¿la tabla está virtualizada por defecto? Sí, lo está. Hay una cierta cantidad de filas y columnas, más extra, un poco de buffer. Entonces, digamos que solo vemos 15 filas allí. No estoy seguro de cuántas filas hemos visto, pero digamos que solo vemos 15 filas. Mostrará 15 filas en memoria y las renderizará más otras dos o tres. No puedo recordar cuál es el valor predeterminado. Y luego los data después de eso serán virtualizados. Y luego solo a medida que te desplazas se renderizará y todas las cosas que ya no están en el Viewport serán retiradas. Echa un vistazo a la documentation para la virtualización y cómo puedes anular eso, pero sí, por defecto la virtualización está habilitada, tanto vertical como horizontalmente. He hablado sobre las propiedades de las columnas. Echemos un vistazo a las propiedades de la cuadrícula. De nuevo, hay docenas y docenas de propiedades que puedes usar aquí. Usaremos dos solo para demostrar cómo podrías usarlo. Primero, animaremos las filas. Y las advertencias de console que podrías ver en el IDE, puedes ignorarlas. Estas son en una aplicación real, podrías hacer algo al respecto, pero estas son solo advertencias. Y para los propósitos de la masterclass, puedes ignorarlas. Así que hemos añadido animar filas ahora. Así que antes, no había animation, animar filas, ¿qué hice, déjame ver aquí, animar filas, verdadero. Necesito refrescar, creo. Oh, está bien, eso es refrescar. Así que el hot loading es genial, pero no siempre se refresca completamente. Así que espero que puedas ver antes ahora que hay una animation allí. Y ese es un efecto de animation genial, que me gusta bastante. Y lo hemos habilitado con solo poner animar filas en verdadero. Y añadamos algo de selección de filas. Selección de filas, y esto es solo una cadena, así que podemos usar esto, mobile-to-pool. Y ahora podemos seleccionar filas manteniendo pulsado Command o Shift. Y lo que estoy tratando de demostrar allí es que hemos hablado sobre las propiedades de las columnas, tipo de filtro, y ahora solo te estoy presentando a las propiedades específicas de la cuadrícula, así que animar filas y selección de filas. Y es tan fácil como simplemente proporcionar la propiedad y establecerla en un valor apropiado. Y todo lo que hicimos con allí fue habilitar la animation de las filas. Puedes ver esa genial animation y selección de filas. Y todo lo que tenías que hacer allí era configurar una propiedad. Así que, gran parte de la buena funcionalidad se desbloquea simplemente habilitando el conjunto en verdadero o estableciendo un valor predeterminado en la propiedad. Hay mucho poder para desbloquear con propiedades y valores simples. Pero de nuevo, para toda la lista de propiedades en las columnas y la cuadrícula en sí, ve a echar un vistazo a aggrid.com.

Bueno, siguiendo adelante, como dije antes, veremos los eventos a continuación. Ahora queremos ver los clics. Así que lo primero que necesitaremos hacer es que necesitaremos obtener la API de la cuadrícula. Hay un par de formas de hacer esto. Una es con eventos. Y la mejor manera de hacerlo, especialmente en React es usar una ref. Así que diré, ref de la cuadrícula. Lo estoy haciendo un poco al revés aquí. Así que vamos a decir, vamos a pasar una ref de la cuadrícula. No lo hemos especificado realmente. Así que const ref de la cuadrícula, igual a ref de la cuadrícula. Y lo importaremos. Bueno, eso obviamente no hace nada hasta ahora. Hemos especificado una ref en la parte superior aquí, y la hemos pasado a la cuadrícula, luego otros serán establecidos cuando se renderice la cuadrícula. Pero en realidad vamos a usar esto para crear un botón que va a deseleccionar cualquier fila que hayamos seleccionado. Uh, he saltado un paso, lo siento. Volveré a los eventos en un segundo. Lo siento, estoy un poco desordenado. Digamos que queremos hacer algo con esto. Así que cuando el usuario creará el botón, disculpas por el orden extraño. Haré una pausa de nuevo una vez que haya terminado y describiré lo que estoy haciendo aquí. Vale. Lo que estoy haciendo aquí, solo voy a demostrar cómo obtienes acceso a la API de la cuadrícula y la API de la columna, y luego cómo puedes usarla en un botón, por ejemplo, en este caso, pero en cualquier número de casos, pero en este caso, solo vamos a usarla en un botón. Push me llama a use callback. No estoy haciendo nada con el evento la ref de la cuadrícula punto currents. Solo vamos a decir, ref de la cuadrícula punto current, danos la referencia actual al componente de la cuadrícula AGGrid React. Y en este caso, vamos a usar API. Eso te dará acceso a la API de la cuadrícula y también a la API de la columna. Y eso es para las operaciones de la API de la columna. No vamos a usar la API de la columna en este ejemplo en particular. Vamos a usar la API de la cuadrícula, que es para deseleccionar todo. Vamos a usar la API de la columna. Bien. Así que tenemos un botón aquí. Eso dirá, supongamos que hemos seleccionado estas filas y queremos proporcionar una funcionalidad al usuario que deseleccionará todas las filas seleccionadas. Y ahí vamos. Así que hice eso de nuevo. He seleccionado un montón de filas, push me se activará cuando se haga clic en los botones y usando el Mr. people que he hecho ref de la cuadrícula.current te dará acceso a los componentes ag grid react. Y en el componente ag grid react, tenemos dos campos, la API, que he resaltado allí y la API de la columna y una API de la columna. Y la API proporciona un montón de funcionalidad que puedes hacer de forma programática. Puedes redimensionar las columnas. Puedes habilitar la ordenación, el filtrado. Puedes obtener los estados de una columna. De nuevo, hay docenas y docenas de métodos que puedes usar Por favor, mira en aggrid.com para la lista completa, pero en este caso simple, solo estoy tratando de demostrar que tenemos acceso a las APIs estableciendo una ref. Y luego en este caso, cuando se hace clic en el botón, estamos usando la API de la cuadrícula para deseleccionar todo para deseleccionar todas las filas seleccionadas. Así que solo para mostrarte de nuevo en el navegador, he seleccionado un montón de filas. Cuando hago clic en este botón, voy a llamar a la API de la cuadrícula y deseleccionar todo.

Así que, solo para repetir antes de hablar sobre el navegador, he especificado un oyente que vamos a usar aquí, usando useCallback. Cuando la cuadrícula responda a un evento y lo pase, lo transmitirá a ti, pasará los parámetros y puedes hacer algo con ellos. Así que tal vez quieras alertar al usuario de que ha hecho clic en una celda, tal vez quieras realizar algún tipo de cálculo, etc. En este caso, simplemente vamos a imprimir control.log cellClicked y lo que la cuadrícula nos ha pasado, que veremos en un minuto, Y para enganchar un evento, todo lo que tuvimos que hacer fue especificar el evento al que queremos escuchar y pasar un oyente. Así que si vamos a ver el navegador, puedes ver que cada vez que hago clic en una celda, se imprime un mensaje en la consola. Y cuando se dispara un evento, dependiendo del evento, obtendrás la API, la columnAPI, obtendrás los datos de la fila, obtendrás los datos de la celda. Puedes obtener casi todo lo que puedas necesitar para usar en un oyente de eventos. Obtendrás los datos de la fila, los datos de la columna, el acceso a la cuadrícula, y así sucesivamente. En este caso, solo estamos imprimiendo eso. Pero espero que demuestre lo fácil que es agregar un oyente a un evento, a una columna. Puedes escuchar la ordenación, puedes agregar filtros. Cualquier cosa a la que puedas concebir que quieras escuchar, puedes hacerlo en la cuadrícula, solo consulta aggrid.com para ver qué eventos puedes escuchar y qué devoluciones de llamada puedes escuchar, e implementarlo como esto. Espero que hasta ahora todo tenga sentido. Permíteme echar un vistazo rápido al canal de Discord. No hay preguntas allí, genial. De acuerdo.

Entonces eso describe brevemente cómo comenzar muy simplemente con la Edición Comunitaria. Entraremos en más detalles en las secciones siguientes. Pero esto es solo para recordarte lo que hicimos. Importamos los componentes de Agigrid React, importamos los estilos. Recuerda, necesitas aggrid.css como mínimo, eso proporciona el CSS estructural. Sin eso, la cuadrícula simplemente no funcionará. Y luego puedes proporcionar opcionalmente un tema. El 99% de las veces, vas a usar uno de los temas que proporcionamos. Y luego especificas el tema que vas a usar en el div padre. Especificamos el mínimo necesario de datos que necesitas en una cuadrícula. Necesitas los datos de fila, que son los datos horizontales, y luego los datos de columna, que son los campos que seleccionas de los datos de fila. Aquí especificamos el campo que nos interesa, y hemos extraído algunos JSON remotos, que es una matriz de objetos JSON, lo convertimos a JSON y luego establecemos los datos de fila, que se muestra en la tabla. También hemos establecido algunas definiciones de columna predeterminadas para que todas las columnas sean ordenables y tengan un filtro. Luego describimos cómo usar la API de la cuadrícula, en este caso, para el botón para deseleccionar cualquier fila seleccionada, que podemos probar ahora con el mouse. Ahí está. Esa fila está deseleccionada. Y finalmente, describimos cómo podemos usar eventos. En este caso, agregamos un evento de clic en una celda. Y agregamos un oyente que puede escuchar esos eventos. Y antes de que se me olvide, también agregamos dos propiedades de cuadrícula, lo siento, propiedades de cuadrícula para animar filas y agregar selección de filas con estas dos propiedades aquí. Entonces, ¿cuál es la forma recomendada de crear un tema para Agigrid? ¿Puede el tema acceder a? No veo por qué no. Sobre cómo hacerlo, tendrías que ir a la sección de estilos de aggrid.com, y describe el CSS estructural tal como está y cómo puedes anularlo. No estoy muy familiarizado con ese aspecto, pero está documentado en aggrid.com sobre cómo proporcionar tu propio tema. Creo que lo que mucha gente hace es tomar uno de los temas proporcionados y luego ajustarlo, lo cual es mucho menos trabajo que crear un tema desde cero. Así que eso podría ser algo que quieras considerar, mira los temas que proporcionamos de serie, ve cuál es el más cercano al que deseas y luego simplemente anúlalo con CSS, con variables SASS, etc. Pero si realmente quieres hacer algo desde cero, también documentamos cómo hacerlo en aggrid.com en la sección de estilos, creo.

Pasaremos a la siguiente sección, que es una breve segunda. Es solo cómo usar Agigrid Enterprise y algunas de las características proporcionadas allí. Pero como dije al principio, esto no se trata específicamente de Agigrid Enterprise. Si quieres usar Agigrid Enterprise, contáctanos en [email protected] para obtener una licencia de prueba gratuita y probar las características. Pero esta es solo una breve sección para decir cómo implementarlo, cómo agregar las características de Enterprise y usarlo. Para ver el código de eso, asegúrate de haber seleccionado dash Enterprise, y esa es la segunda sección que cubriremos ahora. Así que detendremos nuestra... De acuerdo. Nina, no te preocupes por el canal de Discord. Simplemente usa el canal de Zoom como lo estás haciendo ahora. Lo revisaré. Parece que otras personas están teniendo problemas con Discord. Solo usa el chat de Zoom. Está bien. Así que lo primero que vamos a hacer, hemos detenido nuestra aplicación que se estaba ejecutando. Solo voy a tomar un sorbo de agua. Lo primero que debemos hacer es instalar la dependencia de Agigrid. Agigrid Enterprise. Esto instalará y guardará la dependencia de Agigrid Enterprise. Como dije al principio de la primera sección, como mínimo, necesitas Agigrid Community y Agigrid React. Agigrid Community es el código principal de la comunidad. Agigrid React es el lado de representación de React. Y luego Agigrid Enterprise incluye las características de Enterprise. Necesitas tanto Agigrid Community como Agigrid Enterprise. Agigrid Enterprise no incluye Community. Importa de Agigrid Community y usa eso para ampliar su funcionalidad. Así que necesitas los tres para el código de Enterprise. Agigrid Community, Agigrid React y Agigrid Enterprise. ¿Cuál es la mejor manera de confirmar que la cuadrícula se ha cargado? La mejor manera de confirmar que la cuadrícula se ha cargado. También puedo informar al usuario. Subido. Puedo informar al usuario, playground, a la cuadrícula. Lo que creo que es la mejor manera de decírselo, hay eventos en los que puedes, así que hablamos de eventos antes. Y hay eventos de first data rendered y grid ready. Ambos eventos probablemente te servirían. Entonces, cuando se disparan esos eventos, puedes decirle al usuario que la cuadrícula está lista y que los datos están en la cuadrícula y se muestran. Así que en tu caso, simplemente verías la cuadrícula, pero si necesitabas una forma programática de informar al usuario, hay algunos eventos en los que podrías hacerlo. Eventos de grid ready y first data rendered. Puedes escuchar esos eventos y luego mostrar un mensaje emergente o un modal o algo para informar al usuario que la cuadrícula está lista para su inspección. Espero que eso responda a esa pregunta.

OK, así que hemos incorporado la dependencia de Agygrid, vamos a iniciar nuestra aplicación de nuevo. Incorporamos la dependencia pero aún no la estamos usando. Así que si recargamos nuestra aplicación verás lo que teníamos antes. Así que para importar las dependencias, todo lo que tienes que hacer es importar Agygrid Enterprise. Así que al hacer eso solo... De hecho, sabes qué, déjame comentar, déjame mostrarte algo. Así que sin Agygrid Enterprise incorporado, verás el menú de contexto predeterminado del navegador y cuando mires los filtros verás los filtros pre-proporcionados que son un filtro muy poderoso. Y puedes obtener filtros de número, fecha y cadena. Pero hablaremos de eso en una sección posterior. Pero verás que el predeterminado es este, y luego el menú de contexto es solo tu contexto de navegador. Así que de inmediato si solo importas Agigrid Enterprise y recargas tu aplicación. Lo primero que verás es un mensaje de consola diciendo que Agigrid Enterprise, un mensaje de advertencia, solo diciéndote que no tienes una clave de licencia. Está bien. No se desactiva ninguna funcionalidad. Puedes usar Agigrid Enterprise, probarlo gratis. Si quieres deshacerte de este mensaje de consola, puedes contactarnos en info en agigrid.com y te daremos una licencia de prueba gratuita. Así que eres libre de probar y jugar con Agigrid Enterprise y jugar con las características. Y luego si decides usarlo en una aplicación, puedes contactarnos para una licencia, pero no se desactiva ninguna funcionalidad. Verás una pequeña marca de agua y un mensaje de consola, pero toda la funcionalidad está habilitada. Así que aparte de eso, si luego vamos y hacemos clic derecho, verás que ahora se desbloquea alguna funcionalidad de inmediato sin que tengas que hacer nada más que importar Agigrid Enterprise. Verás que puedes exportar a CSV o Excel. Puedes copiar encabezados de grupo y así sucesivamente, y luego si miramos los filtros, verás que ahora tienes paneles de columna. Tienes cosas donde puedes fijar columnas a la izquierda y a la derecha, puedes auto-deslizar esas columnas, puedes ocultar y mostrar columnas de relleno, o el usuario más bien puede hacer esto. Y ahora tenemos un tipo diferente de filtro que teníamos antes. Tenemos un filtro de conjunto, que es el conjunto de todos los datos debajo. Así que ahora en el Enterprise, el filtro predeterminado se convierte en el filtro de conjunto. Y de nuevo, describiré los filtros más adelante, pero solo para demostrar que has desbloqueado la funcionalidad enterprise solo instalando la dependencia y luego importándola. Ahora, digamos que queríamos llevar eso un poco más allá. Así que eso es genial. Quiero decir, poder exportar tus datos es útil, especialmente a Excel para muchos usuarios, pero también puedes copiar datos. Así que un usuario podría seleccionar algunas filas por ejemplo, y luego copiar los datos haciendo clic derecho sobre ellos o copiándolos con encabezados y así sucesivamente. Pero llevémoslo un poco más allá. Digamos que querías, tenemos muchos datos aquí. Así que eso no es especialmente útil, incluso con la ordenación y el filtrado, lo cual es genial. Quizás la gente quiera ver los datos que hemos visto, pero agruparlos, y eso es realmente fácil de hacer. Así que podemos hacer eso usando la función enterprise llamada Row Grouping. Así que agrupemos por país. Y solo haciendo eso, puedes ver que los datos ahora están agrupados por país. Así que todavía tenemos los mismos datos olímpicos que teníamos antes, pero ahora agrupados por país. Digamos que queríamos agrupar también por año. Se agruparía por país y año. Ups. Así que solo estoy refrescando porque la recarga en caliente a veces causa problemas. Así que ahora puedes ver que solo agregando row group true, hemos agrupado por país y luego año. Y todo lo que tenemos que hacer es especificar la propiedad row group. Y ahora puedes hacer esto programáticamente al principio. Digamos que querías proporcionar un informe predeterminado a los usuarios de inmediato, donde no quieres usar datos cambiantes, puedes proporcionar de inmediato. Pero podrías querer que los usuarios puedan ver los datos de una manera que quieran ver. Así que en ese caso, podrías proporcionar esta funcionalidad mostrando primero la zona de arrastre, la zona de arrastre de la cuadrícula. Describiré eso en un segundo. Así que agregaremos row group panel show. Espera. Déjame mirar la propiedad. Row group panel show. Siempre. Así que he agregado una propiedad de cuadrícula llamada row group panel show. Esta es una zona de arrastre para varias funcionalidades. Y en nuestro caso, la usaremos para el agrupamiento de filas. Pero ves que al agregar esa propiedad, tenemos un encabezado en la parte superior con arrastrar aquí para establecer grupos de filas. Y eso es genial, pero también necesitamos decir dentro de qué grupos se pueden arrastrar. Así que podrías tener datos donde no tiene sentido poder agrupar por ciertos datos. Tal vez tengas fechas con milisegundos, y no tendría sentido poder agrupar por eso potencialmente. Así que querrías poder especificar por columna qué datos quieres que sean agrupables. En nuestro caso, queremos que cada columna sea agrupable. Así que de nuevo, especificaremos esto como una def de columna predeterminada, en lugar de tener que especificarlo para cada una. Así que habilitar row group, y esto hará que cada columna sea agrupable. Podemos guardar eso. Refrescar nuestra cuadrícula. Y ahora podemos hacer lo que hicimos antes. Podemos agrupar por país, solo arrastrándolo. Y lo que hice allí, en caso de que no fuera obvio, fue seleccionar una columna, hacer clic en ella, y luego arrastrarla a la zona de arrastre en la parte superior. Y luego para replicar lo que teníamos antes, arrastrar año hacia arriba. Y luego teníamos lo que teníamos antes. Tenemos datos de fila agrupados por país, y luego año. Y esto es útil si quieres proporcionar los datos en bruto al usuario, pero quieres que puedan cortar y dividir y ver los datos de una manera que elijan. Todo lo que tenías que hacer allí era especificar habilitar row group y decirle a la cuadrícula que siempre quieres que se muestre el panel. Así que de nuevo, con muy poco esfuerzo, puedes desbloquear una gran cantidad de datos para el usuario. Ahora solo terminaré muy brevemente en la sección enterprise. Hay una tonelada de secciones, una tonelada de características que puedes usar con características enterprise. Si cuando estás mirando aggrid.com y ves una pequeña e al lado de la característica eso significa que es una característica enterprise. Diría que probablemente el 70% de la funcionalidad que proporcionamos, el 80% de la funcionalidad estoy adivinando es gratuita para usar. Así que la mayoría de la funcionalidad que quieres usar en la cuadrícula es gratuita para usar y es una edición community. Pero si tienes necesidades específicas o necesidades enterprise, entonces tal vez necesites usar aggrid enterprise. Y si ves una pequeña e al lado, entonces necesitarás una licencia enterprise. Pero de nuevo, eres libre de usar aggrid enterprise y probarlo. Y si quieres una licencia de prueba gratuita, contáctanos en info en aggrid.com. Y luego también puedes llevarlo más allá y realmente comprar una licencia si eso es algo que decides hacer. Así que creo que dejaré eso en aggrid enterprise. Asumo que nadie tiene preguntas específicas. Solo recapitularé lo que hicimos.

Primero instalamos la dependencia de aggrid enterprise con NPM y la guardamos en package.json. Puedes ver aquí las dependencias gratuitas que tenemos, tenemos aggrid community, que es la edición comunitaria gratuita, que tiene el 78% de la funcionalidad del código que necesitas. Aggrid community es gratis para usar, no necesitas una licencia para eso. Aggrid React es el lado de renderizado de React. Así que como mínimo, necesitas aggrid react y aggrid community. Luego, si quieres usar características enterprise, pones aggrid enterprise y necesitas eso además de los otros dos para desbloquear las características enterprise y eso se construye sobre aggrid community. Y por último, necesitas asegurarte de que tus versiones principales y secundarias estén sincronizadas. Siempre quieres tener las versiones principales y secundarias sincronizadas, así que nunca querrás tener 27.4 y 3, por ejemplo, y desajustadas. Para las versiones de parche, estas pueden ser diferentes, eso está bien, pero quieres asegurarte de que tus versiones principales y secundarias sean las mismas en todas las penalidades que uses.

Sí, Aggrid soporta TypeScript. Proporcionamos todos los tipos que querrías usar. Documentamos cómo puedes usarlo con TSX, por ejemplo. Así que, por ejemplo, si quisieras usar una referencia de grid, podrías especificarlo como aggrid react, algo así. No recuerdo el tipo exacto, pero documentamos cómo usar esto, y sí, los tipos están expuestos para que los uses. Y si hicieras algo como esto, tendrías autocompletado. Así que, sí, está bastante soportado. Aggrid react, aggrid está realmente escrito con TypeScript. No tienes que usar TypeScript, pero está soportado.

Bueno, eso concluye las características de enterprise. A continuación, vamos a ver, voy bastante rápido. Si tienes preguntas o si quieres que repita algo, por favor, avísame en el canal de chat y puedo repetirlo. Entonces, pasaremos a la tercera sección, que son los renderizadores. Y esto es usando renderizadores personalizados. Así que, de serie, la cuadrícula te mostrará los datos brutos data y mostrará los datos brutos data. Así que, por ejemplo, aquí, Michael Phelps, Estados Unidos, 23. Esto simplemente está imprimiendo los datos brutos data que están en los datos JSON que proporcionas a la cuadrícula. Si es una cadena, mostrará una cadena. Si es un número, lo mostrará como un número, mostrará un número bruto. Si es un objeto complejo, probablemente sólo obtendrás objetos de objetos, pero puedes, con los getters de valor y demás, extraer datos complejos y imprimirlos. Pero en última instancia, lo que un usuario verá será una representación de cadena. O lo siento, algo así, datos simples. Pero lo que puedes hacer es proporcionar un componente React. Así que tal vez quieres que gire en Will o un deslizador o cualquier cosa. Cualquier cosa en estas filas y columnas, incluyendo encabezados y filtros, pueden ser componentes de React. Así que en esta primera sección, el documento describirá cómo usarías un renderizador de celda, que es probablemente la cosa más común para la que probablemente querrías crear un renderizador personalizado. Y cualquier cosa que puedas hacer en un componente de React, puedes meterla en la cuadrícula. Así que si puedes tener un componente funcional de React o un componente basado en clases y renderiza HTML, en última instancia, puedes usarlo en la cuadrícula. Así que lo primero que vamos a hacer es que vamos a tener un renderizador simple, no muy útil pero un renderizador simple, mi renderizador. Y esto sólo va a mostrar... Lo siento. Tenemos un renderizador simple aquí y vamos a usar este renderizador en la columna app-node. Así que, este no es un renderizador muy útil, obviamente. Pero de nuevo, tenemos un componente funcional simple y lo pasamos, le decimos a la cuadrícula que use este componente, mi renderizador. Y queremos usarlo en lugar de un renderizador de celda. Así que en lugar de representar nuestras salidas en los datos JSON brutos, vamos a producir lo que haga el renderizador. Y en nuestro caso, independientemente de los datos subyacentes, vamos a mostrar hola mundo. Y ahora eso no es muy útil, ¿verdad? Cada fila tiene hola mundo para la columna del atleta, así que eso no es muy útil. Así que vamos a ver lo que nos proporciona la cuadrícula. Cuando renderizamos cada columna, podemos... Dame un segundo, un agua. Siempre que cada fila y celda se renderiza, si tienes un renderizador personalizado, le diremos a la cuadrícula, llamaremos a tu renderizador e instanciarlo y pasar el estado de la cuadrícula y el valor de la celda y así sucesivamente. Así que vamos a ver lo que te pasamos. Así que vamos a ver las props que pasa la cuadrícula. Así que verás un montón de salidas aquí y cada fila mostrará la P, las props pasadas a los componentes. Y si expandimos cualquiera de ellos, verás un montón de cosas útiles. No describiré todas las cosas que se te proporcionan, pero algunas de las claves son la profundidad de la columna, la información de la columna, puedes ver la API y la API de la columna que se te proporciona. Pero lo que usarás más típicamente y más comúnmente es el valor. Verás en la parte de abajo, el valor merece el órgano. Y eso es lo que típicamente usarías más común, pero proporcionamos un montón de otras cosas que podrías querer hacer también, como las APIs, por ejemplo. Así que hagamos este renderizador un poco más útil y usemos los datos que nos dan. Así que p.value. Y con eso, deberíamos terminar con lo que teníamos antes. Así que estamos usando visualmente desde la perspectiva de los usuarios, estamos viendo lo que vimos antes, los datos de las filas y columnas, y estamos viendo a Michael Phelps y los datos de la cadena bruta, porque no estamos haciendo nada especial con ella todavía. Simplemente estamos tomando las props y sacando el valor de la factura y sacándolo. Así que nos quedamos con lo que teníamos originalmente. Pero digamos que queremos hacer algo un poco más realista. Digamos que en un renderizador, queríamos tener un pequeño botón, tal vez queremos hacer cuando un usuario hace clic en el botón, añadir un artículo a su carrito de compras o algo así. Así que hagamos algo así. No es exactamente un carrito de compras, pero hagamos algo con el renderizador que sea un poco más complicado. Así que const en dólar, quiero decir, esto tampoco es muy útil, pero podría demostrar el punto, tienes valor y quiero que esto sea una cadena, así que aquí vamos. Así que decimos eso y describiré lo que hemos hecho, si miramos en el navegador, podemos ver un botón que dice Kipme, en realidad debería decir dólar. Por eso el negocio se llama dólar. Así que hemos tomado nuestro renderizador simple y lo hemos extendido muy ligeramente. Ahora tenemos un Vengadores ahora que va a ser disparado cuando se haga clic en el símbolo del dólar y saldrá dólar clics y el valor de esa celda. Así que de nuevo, este es un renderizador muy simple, ¿verdad?, esto no es algo que probablemente harías, harías algo mucho más complicado. Pero echemos un vistazo a eso, así que si hacemos clic en eso, tenemos dólar clics y luego el valor de la celda, Nathalie Coaglan, que es el valor de la celda en la que hicimos clic. Así que de nuevo, esto es realmente simple, obviamente, probablemente harías algo más complicado con tus datos, es sólo para demostrar que cualquier componente de react que tengas puede ser renderizado dentro de la cuadrícula. Llevemos eso un poco más allá, te mostraré cómo puedes complementar los datos que tienes. Así que por defecto, cuando tienes un renderizador o un editor o un filtro o un filtro personalizado, obtendrás el estado de la cuadrícula y el valor de la celda en la que hiciste clic o así sucesivamente. Pero puedes complementar, puedes añadir a través de props los datos que quieras. Así que llevemos esto más allá. Digamos que... Digamos que queremos pasar el texto del botón. Así que quieres un componente genérico y quieres que sólo difiera por lo que pasas. Así que puedes complementarlo con un objeto y lo que especifiques aquí estará disponible en las props de los componentes a medida que se crean dinámicamente. Y lo que pongas en el dinámico, los parámetros pueden ser cualquier cosa. Perdón, un segundo. Lo siento por eso. Así que no hacemos nada con el estado y simplemente haremos esto disponible. Ahora caso vamos a hacer texto de botón. Voy a decir que el texto del botón va a ser app-lete-button. Y eso ahora estará disponible para nosotros en el, si miramos esto, miramos los datos, las cosas pasadas, verás botón, ¿cómo lo llamo? Creo que hice un error de tipeo, cellrenderer. Renderer. Ayuda si escribes correctamente. Así que hice el error de tipeo antes, no había escrito cellrenderer correctamente. Así que si miramos esto, hemos dicho en la columna app-lete, queremos proporcionar una prop llamada button text con un valor de app-lete-button. Y si miramos la prop path a los renderizadores, puedes ver que las props están siendo renderizadas y la prop path a los renderizadores, puedes ver que el texto del botón está disponible. Así que usemos eso. Así que en lugar de que el botón se llame dólar, podríamos pasar aquí p.button text. Y puedes ver que en el navegador rojo, tenemos app-lete-button. Así que por ejemplo, podrías querer usar este renderizador, hacerlo un renderizador genérico, y que se diferencie entre columnas sólo por las props que pasas. Así que sólo para demostrar eso. Renderer, hazlo genérico. Y describiremos esto un poco más adelante con los campos. Y esto podría ser botón de edad. Así que puedes ver que hemos usado los mismos componentes, este renderizador aquí, y lo hemos hecho genérico. Y hemos diferido sólo por las props que pasamos, texto de botón en este caso, pero podría ser cualquier cosa.

Eso es solo para demostrar cómo puedes complementar los renderizadores que usas y proporcionar algunos metadatos adicionales o props a ellos. Por último, voy a mostrarte cómo puedes usar un renderizador simple y este es un renderizador en línea. Y esto es probablemente algo que podrías querer hacer si estás haciendo pruebas o era un renderizador súper simple, algo que no vas a compartir. Puedes simplemente usar un renderizador en línea. Así que no necesitas especificarlo externamente. Puedes decir algo como, mi renderizador en línea, p.value. Así que esto es lo mismo que arriba realmente, pero tienes tu en el navegador, ves mi renderizador en línea y el valor. Así que finalmente puedes especificar algo en línea, no tienes que externalizarlo ya sea en un archivo separado o en un const separado como hemos hecho aquí. Si es súper simple, o si solo estás haciendo depuración o jugando, puedes hacerlo en línea como lo he hecho allí.

Bien, ¿qué sigue? Digamos que tienes un escenario donde quieres tener diferentes renderizadores basados en el valor de la columna. Así que podrías querer decir, renderizador X si los datos son uno y renderizador Y si los datos son dos, puedes elegir dinámicamente lo que vas a mostrar basado en selectores de renderizador de celda. Déjame mostrarte eso. Así que puedes tenerlo estático y ese es probablemente el caso de uso más común donde lo especificarías así, pero puedes tener un dinámico con selector de renderizador de celda. Y eso es una función que devuelve un objeto. Y de nuevo, solo para recordarte, este es el caso de uso si quieres diferentes renderizadores en una celda y quieres cambiar dinámicamente entre ellos basado en los datos de la fila o algún otro factor externo. En nuestro caso, lo haremos basado en los datos de la fila. Así que, si el valor es igual a 2000, vamos a devolver y especificar componentes, mi renderizador. Vamos a usar esto en un campo diferente en realidad. Si p.value es igual a 2004, vamos a devolver, describiré lo que he hecho aquí en un segundo. En este caso, vamos a tener un componente en línea. Solo voy a mover esto a otro campo. Quiero que esto esté en el campo de año. Estoy yendo bastante rápido, pero describiré lo que acabo de hacer aquí. He movido esto, he agregado una propiedad llamada selector de renderizador de celda, y eso se activa por datos de fila para esta columna, para cada fila en la columna de año del país. Esto se activará. Pasará P, que tiene la API, API de cuadrícula, los datos de la fila, y específicamente el valor de la celda para esa celda. Y lo que estamos haciendo aquí es decir si el valor, o si el valor del año es 2000, devolveremos mi celda, mi renderizador, el que especificamos arriba con el botón. Y si el valor es 2004, vamos a crear, devolver un componente en línea simple, y si el valor no es ni 2000 ni 2004, simplemente mostraremos el valor sin procesar. Así que guardemos eso y veamos qué pasa. Así que, aquí puedes ver para este valor, para esta fila, el valor del año es 2008, no hemos especificado qué hacer con 2008, así que la cuadrícula simplemente mostrará los datos sin procesar. Si el valor es 2004, vamos a devolver este componente en línea aquí, mis componentes en línea y agregar el valor, y finalmente, si el valor es 2000, vamos a usar mi renderizador con el botón, como dijimos antes. Así que, si quieres que algunas filas tengan una funcionalidad o renderizado especial, puedes usar dinámicamente, hacerlo, con mi selector de renderizador de celda. Cualquier renderizador que hagas, uses, aún puedes complementarlo con parámetros de renderizador de celda, como he hecho aquí. Así que, por ejemplo, en, ¿estoy silenciado? Dios, lo revisaré. No creo que esté silenciado. ¿Alguien más puede oírme? No para mí, no es, genial. Woo, me alegra escucharlo. Así que, lo siento por Joe, debe ser algo en tu extremo, me temo. Así que, solo para repetir, lo que sea que devolvamos, si es un renderizador personalizado, podemos complementarlo con parámetros de renderizador de celda, y lo que sea que hagamos en los parámetros de renderizador de celda estará disponible en los props. Si no especificas un componente y un renderizador para usar, la cuadrícula simplemente mostrará el valor sin procesar de los datos adyacentes. Espero que eso tenga sentido. Así que, sí, lo siento, Joe, no estoy seguro de poder ayudarte. Si otras personas pueden escuchar, debe ser algo en tu extremo, me temo, pero no creo que pueda ayudarte, Joe, disculpas. Bueno, no puedes oírme, supongo. Así que, solo para recapitular, describimos cómo puedes especificar un renderizador de celda. Todo lo que necesitas hacer es renderizador de celda y luego tu renderizador, así que en este caso, MiRenderizador así. También puedes tener renderizadores en línea, hola, así. Y finalmente, puedes tener renderizadores de celdas dinámicos y puedes elegir diferentes renderizadores basados en los datos de la columna. Espero que eso tenga sentido para todos. Eso fue bastante rápido. Solo tomaré otro sorbo de agua. Solo para recapitular, te recordamos que los renderizadores que he hecho aquí son bastante simples. Son simples, tienen botones simples y datos simples, pero podrías tener cualquier cosa. Podrías tener un gráfico o un deslizador dinámico o ruedas giratorias. Cualquier cosa que React pueda renderizar en nuestros componentes, componentes funcionales o basados en clases, puedes renderizar dentro de la cuadrícula. El tamaño de los componentes obviamente cambiaría el tamaño de la fila. Así que si tuvieras esos componentes con botón de atleta, y si tuvieras esos 30 píxeles de alto, toda la fila sería de 36 píxeles de alto para mostrar eso, pero este punto es cualquier componente de React que quieras renderizar en la cuadrícula, si es un componente de React válido, puede renderizarse en la cuadrícula. ¿Cómo se renderiza la celda si la línea es demasiado larga? Bien, así que he respondido eso. Si tuvieras un componente, digamos, que estaba mostrando un componente de varias líneas con imágenes y demás, llenaría esa altura. Así que, por ejemplo, si tuvieras algo que estaba mostrando una imagen de 100 píxeles de alto con un párrafo al lado, entonces toda la fila, así que esta columna, sería de esa altura, 100 píxeles de alto, con texto al lado. Así que toda la fila sería de 100 píxeles de ancho. La altura de la fila está determinada por la celda más alta, la celda más grande en esa fila. Así que si todas las demás filas, celdas son de 20 píxeles de alto y el renderizador dinámico tiene 100 píxeles o más, será 100 píxeles más alto, es bastante dinámico. Sí, es Bruno, es dinámico. Sí, puedes anular eso. Puedes decir que absolutamente quieres que tus alturas de fila sean de 50 píxeles y todo lo demás se recorte, por ejemplo, pero por defecto, será dinámico. Toma otro simple agua aquí.

Bien, así que pasaremos a la siguiente sección. Y va más allá con renders personalizados. Y así, no, no es, se llama filtros de commit. Así que vamos a tocar esta sección, sobre Filtros. En la primera sección o dos, te mostré cómo habilitar filtros, y de fábrica con Enterprise Edition, obtienes el filtro de conjunto como predeterminado, que es algo que probablemente veríamos aquí. Así que ves que este es un filtro de conjunto, que describiremos más adelante. Eliminemos la funcionalidad de Enterprise, y actualicemos. No te preocupes por este mensaje de error. Y hemos vuelto a un filtro simple. Así que esto solo para discutir, inicialmente, por ahora. Proporcionamos de fábrica tres filtros de fábrica en la Community Edition. De nuevo, la Community Edition es gratuita para que la uses, y comercialmente, no necesitas una licencia, y de fábrica, proporcionamos un filtro de texto, un filtro de número y un filtro de fecha. Así que vamos a repasarlos uno por uno. Voy a eliminar el código del renderizador, solo por simplicidad. Recuerda que el código está en. Si quieres recapitular lo que he hecho, solo ve a mirar el repositorio de Github para la sección particular que te interesa. Estará allí. Solo voy a eliminar este código para que podamos ver solo lo que estoy tratando de describir. Deja que esta red pueda ir. Y ahí vamos. Así que volvemos a una Community Edition simple. No hay código de Enterprise aquí ahora. Lo primero que vamos a ver es el filtro de texto.

Y eso es, si simplemente hacemos filter true, dependiendo de, dame un segundo, Towson, proporcionaré el enlace. Espero estar diciendo tu nombre correctamente. Así que ese es el repositorio. Y luego, solo para recapitular, en caso de que te lo hayas perdido, para la sección, si vas a las ramas, cada rama, cada sección es una rama diferente. Y si haces clic en esa sección, verás el código para esa sección. Bien, gracias, ¿Oskander? Probablemente estoy destrozando tu nombre, me disculpo. Pero cada una de las ramas es una sección. Así que estamos en la sección cuatro, y mostrará el código. Así que, por ejemplo, si estás tratando de trabajar junto conmigo y has cometido un error, puedes, después, ir a ver el código que realmente escribí. Así que vuelve aquí.

De fábrica, si simplemente dices especificar filter igual a true, usará el filtro predeterminado para cualquier código que estuvieras usando. Así que si estás usando la edición comunitaria, usará el filtro de texto. Y si estás usando la edición enterprise, usará el filtro de conjunto. Así que, la mayoría de las veces, el filter true es lo suficientemente bueno para la mayoría de las personas. Probablemente querrás usar el problema predeterminado. Los renderizadores no son, no, los renderizadores no son de la edición enterprise. De hecho, la mayoría de lo que estoy describiendo aquí es comunitario. Componentes personalizados, renderizadores, editores, filtros, que abordaremos en la siguiente sección. Todos esos son gratuitos para usar. Resaltaré y especificaré si algo que estoy haciendo es enterprise, pero como dije, justo al principio, la mayor parte de la charla, la mayor parte de esta masterclass es de la edición comunitaria. Resaltaré si algo que estoy haciendo es enterprise. Así que los componentes personalizados de cualquier tipo son de la edición comunitaria. Así que siempre que, si estás haciendo un componente React personalizado y quieres usarlo en la cuadrícula, eso es gratis, no tienes que usar una licencia enterprise para eso. Así que el Rogue Grouping que te mostré agrupando por año y por país, eso fue una característica enterprise, por ejemplo. Pero todo lo demás que ves en esta cuadrícula, ahora, es gratis, incluido el renderizador que viste antes. Todo eso es gratis para usar. Sí, las filas están virtualizadas. De fábrica, puedes anular eso, pero sí, las filas están virtualizadas y las columnas, de hecho. Puedes anular eso, así que caggrid.com para detalles sobre cómo anular eso, pero por defecto, sí, lo están. Y así será, así que filter tree será el filtro predeterminado. Es lo mismo que si hiciéramos agTextColumnFilter. Y repasaré los tres que se proporcionan. Así que si hacemos eso y miramos el filtro, verás que nada ha cambiado. Todavía podemos usar Mic o Michael o Jung para Jung. Y aunque esto es de la edición gratuita, y que a través de los tres filtros que vamos a describir son gratuitos, son súper poderosos. Así que no pienses que solo porque es gratis y se proporciona sin necesidad de obtener código enterprise, no son poderosos. Estos son súper poderosos y probablemente te llevarán una gran cantidad de camino, un nuevo camino hacia una aplicación antes de que necesites considerar un filtro personalizado o un filtro enterprise. Los filtros proporcionados son muy poderosos. Así que revisa agigrid.com para ver lo que pueden hacer. Describiré brevemente aquí, pero son muy poderosos y pueden hacer mucho más de lo que piensas. Así que en este caso, digamos que no queremos contenido. Queremos iguales, exactamente iguales. Podemos decir, eso no hace nada porque no es igual, no contiene, y ahora Michael Phelps está ahí. Así que, y luego puedes proporcionar toda la funcionalidad. Así que digamos que queremos hacer contiene Michael que me da todo con Michael en, pero solo lo queremos y si contiene maze. Y puedes hacer todo. Así que Michael o maze, y como puedes ver, solo el de texto puede hacer una gran cantidad de cosas. Así que echemos un vistazo al siguiente filtro que se proporciona de fábrica. Y este es el filtro de número. Nuevamente, esto es gratis. Nada de esto es específico de enterprise todavía. Si ves un error en la consola aquí, por cierto, eso no tiene que ver con la cuadrícula, eso es solo recarga en caliente. A veces no se actualiza completamente. Así que si miramos el filtro de edad, verás que ahora hemos especificado un filtro de número, no uno de texto. Y es igualmente poderoso que el filtro de texto, pero proporciona cosas que son sensibles al contexto. Así que, por ejemplo, no proporciona contiene, pero proporciona mayor que, menor que e igual. Así que podrías decir que es menor que 30 y es mayor que 20. Y dinámicamente, todo, todas las edades de estos ganadores entre 20 y 30 son, así que dije igual, quiero decir mayor que. Así que todas las edades entre mayor que 20 y menor que 30 se muestran. Y ese es el filtro de número. Así que es similar al filtro de texto, pero hace un filtrado apropiado para números. Y luego lo último, que no funcionará, y describiré por qué no funcionará, pero lo último, y te mostraré cómo solucionarlo, es filter AG date column filter. Ahora esto proporcionará un filtro de fecha genial, pero desafortunadamente, esto no funcionará. Así que echemos un vistazo al primero. Es 2408, 2008, 2408, 2008, pero no 2008. Y eso en realidad no funciona. Notarás que la fecha no se filtró. Y la razón de eso es que el filtro de fecha espera que los datos de la celda sean un objeto de fecha. Y los datos que tenemos aquí del array, estos datos aquí, como puedes ver, es solo una cadena. Así que parece una fecha, pero en realidad es solo una cadena. Así que cuando se ha aplicado el filtro de fecha y se intenta usar, ninguno de estos coincidirá porque son solo cadenas. Bueno, te mostraré cómo solucionar eso más adelante. Ahora, vamos a usar dos, finalmente para mostrar dos filtros más enterprise. Así que vamos a habilitar. Así que estos son filtros enterprise. Así que necesitarías una licencia enterprise para esto, pero esto solo completa los filtros que proporcionamos de fábrica. Estos tres hasta ahora, el filtro de texto, el filtro de número y el filtro de fecha, esos son gratuitos y en la edición comunitaria. Los siguientes dos filtros son enterprise. Y no pasaré mucho tiempo en esto. Y solo quería describir lo que hacen. Así que, ya sabes, filtro de columna. Y el último es filter, agmulti filter. Así que nuevamente, la advertencia en la consola nuevamente, porque no tenemos una clave de licencia. Pero si miramos el país, verás que ahora este filtro es un filtro de conjunto. El filtro de conjunto, proporciona un conjunto como verías en Excel, el mismo tipo de cosa, y proporciona un conjunto único de todos los valores en esa columna. Así que, por ejemplo, estos países se extraen de los datos de la fila. Así que si tuvieras países adicionales o menos, solo esos países aparecerían aquí. Puedes seleccionar, deseleccionar todos, y luego seleccionar uno por uno o seleccionarlos todos. O también puedes tener, elegir algo aquí y presionar enter, lo cual creo que es bastante genial, y filtrarlo. Así que, por ejemplo, solo te mostraré lo que hice de nuevo.

Voy a seleccionar, deseleccionar todo. Si escribo L-A-N-D, se filtra esta lista, y podría seleccionar manualmente algunos de estos si eso es lo que quisiera. O simplemente puedo presionar enter y seleccionará dinámicamente todos esos para mí. Ese es el filtro de conjunto. Nuevamente, hay mucho más que puedes hacer con el filtro de conjunto programáticamente y dinámicamente. Pero esto es solo para mostrarte lo que se proporciona como punto de partida.

Y luego el último, que es posiblemente el filtro más potente es el multi-filtro. Y esto mezcla dos tipos de filtros. Proporciona el filtro de número. Lo siento, el filtro de texto, y un filtro de conjunto. Puedes ver esta línea horizontal aquí te permite mezclar dos filtros. Y revisa edugrid.com, la documentación para lo que puedes hacer. Puede hacer mucho más de lo que estoy demostrando aquí. Pero aquí puedes ver un filtro de texto y un filtro de conjunto combinados. Así que podrías decir, y esto no es terriblemente útil con una fecha. Con un número. Sí, digamos que tiene seis. Ese no es un gran ejemplo. Voy a mover este filtro de conjunto a otro campo en realidad. Voy a usarlo en deportes. Creo que eso es más útil. Ahí vamos. Así que queríamos que contuviera la letra A. Y solo vale la pena notar que lo que sea que escriba en la parte superior reducirá automáticamente la sección inferior. Así que si escribo X, por ejemplo, solo boxeo está ahora disponible. Así que filtra la selección de abajo. Así que lo que sea que hagas en la parte superior reduce la selección en la parte inferior. Así que si hicimos A, solo deportes con la letra A y va a reducir lo mostrado. Y luego antes podríamos tener algo como 10 y se reduce aún más, aplicaría el filtro con un enter. Así que sé que es bastante breve sobre esos dos, el filtro SID y el multi-filtro. Pueden hacer una gran cantidad de cosas sin que tengas que escribir ningún código personalizado con un poco de configuración. De fábrica, hacen una gran cantidad como acabas de ver, pero con un poco de configuración los filtros Enterprise que he descrito, el filtro SID y el multi-filtro así como los tres gratuitos, los de texto, número y fecha pueden hacer una gran cantidad de funcionalidad de fábrica. No lo repasaré aquí. Solo quería mostrarte qué eran y cómo podrías usarlos, pero revisa Agigrid.com para la documentación de cómo realmente puedes aprovechar estos potentes filtros de fábrica.

Así que voy a eliminar los filtros Enterprise nuevamente. Volvemos a completamente enterprise, lo siento, aplicación completamente comunitaria. No estamos usando ninguna funcionalidad Enterprise aquí. Digamos que querías anular un debounce, querías ralentizar, querías que los usuarios tuvieran tiempo para pensar antes de que se aplicara un filtro, puedes agregar un debounce, o simplemente puedes complementar el filtro en primer lugar. Así que para filtrar, como vimos antes con los renderizadores, puedes tener parámetros de renderizador de celda, puedes extender o complementar un filtro con parámetros de filtro. Y como imaginarías, si tienes un editor personalizado, que no vamos a cubrir hoy, si tuvieras un editor personalizado o un encabezado personalizado, puedes complementarlo con parámetros de encabezado o parámetros de edición. Así que en nuestro caso, queremos cambiar el debounce a cero. Así que para este filtro, que es edad, queremos que se aplique de inmediato, así que no hay cambio, lo que sea que escriba se accede de inmediato. Si solo quieres ralentizarlo, puedo cambiarlo a dos segundos. Así que ahora si, lo que sea que escriba allí, no responderá durante dos segundos. Así que, escribo 23, uno, dos, boink. Así que, lo que sea que escriba allí, ahora allí, esperó el debounce de 2000 milisegundos, que son dos segundos antes de aplicar. Hay un montón de cosas que puedes usar para extender los filtros y describiré los botones en un segundo. Pero nuevamente, revisa agigood.com para todas las cosas geniales que puedes hacer con una cuadrícula y el filtro específicamente.

Entonces, ¿Agigrid admite tree shaking, Enterprise está alrededor. Sí. Así que, sí lo hace. Así que, no entraré mucho en esto, pero lo que estamos usando aquí para Agigrid community, Agigrid React y Agigrid Enterprise son toda la funcionalidad, todo lo que incluimos y algunas cosas serán eliminadas por tree shaking. Pero si realmente quieres maximizar o minimizar, debería decir el tamaño de tu paquete, entonces en Agigrid.com, ve a echar un vistazo a la construcción y herramientas y mira paquetes versus módulos. Lo que estamos usando, sí, con Agigrid Enterprise en la comunidad son los paquetes y se admite tree shaking, pero por defecto, usamos todo el código. Cada cosa, incluso si lo estás usando o no estará aquí en los paquetes. Si quieres reducir el tamaño del paquete, entonces ve a echar un vistazo a la documentación del módulo y en los módulos, solo pones el módulo que te interesa. Por ejemplo, si estás usando el código principal, se incluirá por defecto. Pero si solo quieres mirar el código CSV y la funcionalidad del portapapeles, solo pondrías esos dos módulos, y así automáticamente por defecto, tu paquete se reducirá porque no estás poniendo todo el código y el código que no se está usando. Sí, así que se admite tree shaking, pero si quieres maximizar el tamaño o reducir el tamaño de tu paquete, ve a echar un vistazo a la documentación de Azure Grid o paquetes versus módulos, cuáles son las diferencias y cómo puedes usarlos.

¿Puedes recuperar el estado de los filtros para Azure Grid? Sí, y describiré eso en esta sección un poco más adelante. Así que solo espera por eso. ¿Qué pasa con el caso de uso de la fecha donde no puedes cargar todos los datos de una vez? Hago más grande que los datos. Absolutamente. Así que lo que estamos viendo, es algo llamado datos del lado del cliente. Los datos que estamos usando ahora, esta aplicación se llama datos de fila del lado del cliente. Todos los datos se extraen de donde quieras extraerlos y todos los datos se renderizan. Así que todos los datos están en memoria y solo algunos de los datos se renderizan debido a la visualización. Pero aún así, si tuvieras un millón de filas, probablemente no querrías extraer un millón de filas en tu navegador. Probablemente mataría tu navegador. Así que lo que puedes hacer allí es diferentes tipos de modelos de filas. No tocaré esto en esta sección, pero si miras los datos de fila del lado del servidor, puedes obtener varias opciones. Así que para la versión gratuita, puedes mirar el desplazamiento infinito de filas. Echa un vistazo a los documentos para eso. No recuerdo dónde está eso aquí. Modelo de fila infinita. Así que esa es la versión gratuita. Y esto es algo, no entraré en ello, pero el modelo de fila infinita es algo que puedes usar en la edición comunitaria para como la fecha implica, datos de fila infinita. Obtiene fragmentos de datos a medida que avanzas. Y luego también hay modelos de fila enterprise que son más potentes como el renderizado del lado del servidor y el modelo de fila de viewport. No lo cubriré aquí, pero tienes opciones en la edición comunitaria para eso. Toma la versión gratuita. Así que pueden mirar el modelo de fila infinita. Y si estás en la versión enterprise, tienes aún más capacidad. Así que no tienes que poner todos tus datos de una vez y puedes usar la paginación como otra opción. Así que echa un vistazo a eso en azgrid.com. Los modelos de fila y la paginación son el camino a seguir. La edición comunitaria en el renderizador de celdas, sé que puedes renderizar diferentes valores según la celda actual. Pero, ¿qué pasa si quieres cambiar el valor en una celda según las tarifas? Sí, absolutamente. Así que sí, así que no tengo el código en la pantalla más, pero recuerda que puedes tener un selector de renderizador de celda y eso se llama por fila por celda y eso pasa la API, la API de columna, la API de cuadrícula, las definiciones de columna, el estado de la cuadrícula y el valor de la celda. Así que tienes todos los datos, tienes todo el estado de la cuadrícula disponible para ti a medida que las celdas se renderizan, a medida que se elige el renderizador.

Luego, una vez que has elegido un renderer, obtienes los mismos datos en tu renderer y puedes mostrar tal vez un fondo rojo si los datos son negativos y un fondo verde si los datos son positivos. Así que en varias etapas puedes determinar qué renderer mostrar y dentro del renderer puedes mostrar lo que mostraste dependiendo de los datos. Así que antes de que los datos se muestren realmente, tienes un montón de puntos en el ciclo de vida para elegir qué se muestra y cómo se muestra. Espero que eso tenga sentido. Había mucho allí.

Bien, así que he respondido esas preguntas. Así que volvemos a donde estábamos. Así que he agregado un Debounce. Ahora digamos que queríamos que este Debounce de 2000 milisegundos se aplicara a todo. No tenemos que especificarlo nuevamente en cada columna. Podemos suministrarlo en la definición de columna predeterminada y se aplicará a cada campo. Así que esto que contiene 2000, uno, dos. Ahora filtra. Así que nuevamente, cualquier cosa que puedas especificar en una columna, individualmente, puedes especificarla en la profundidad de columna predeterminada y se aplicará a todas las columnas. Así que reducirá la cantidad de código repetitivo que tienes que hacer o quieres hacer. Así que eliminemos eso. No queremos un de-balance de 2000 milisegundos en nuestro caso. Lo último que quiero ver con los filtros aquí, excepto antes de llegar al estado del filtro, que es una pregunta anterior, son los botones, porque creo que son bastante útiles. Así que vamos a ver esto de nuevo. Tenemos parámetros de filtro de nuevo a la edad. Y en este caso, queremos hacer botones. Y estos son cuatro botones. Prácticamente hablando, probablemente solo quieras mostrar dos botones en un filtro a la vez. Vamos a especificar eso en la edad. Así que ahora puedes ver que han aparecido dos botones. Y describiré los otros dos. Estos cuatro botones en total que proporcionamos en la caja. Ahora, el filtro no se aplicará hasta que el usuario haga clic en algo. Así que puedo escribir 25 y el de-balance se ignora. El de-balance se ignora aquí. Incluso si lo especificaste, y nada sucederá hasta que haga clic en Apply. Y puedo borrar cualquier filtro actual y luego volver a aplicarlo. Así que solo para repetir eso, si quiero tener 25, nada sucede hasta que hago clic en Apply. Esto es a veces el resultado de lo que algunos usuarios escriben en un montón de cosas que no quieres. Hay grupos para filtrar y desfiltrar a medida que los usuarios escriben. Tal vez quieras que el usuario escriba alguna fórmula compleja, o rejects, o algo así. Solo para que se aplique cuando haces clic en Apply. Cuando hago clic en Clear, borrará toda la interfaz del filtro, pero no el filtro actual. Así que si miras el fondo, verás un pequeño filtro, un símbolo de embudo, el símbolo del filtro. Así que el filtro todavía está en su lugar, aunque hemos borrado la interfaz con Clear. La interfaz borrada no se aplicará hasta que hagamos clic en Apply. Así que Apply aplica lo que hayas especificado en el filtro. Clear lo borrará, pero no lo aplicará hasta que lo filtres de nuevo. Así que espero que eso tenga sentido. Veamos los otros dos botones que tenemos aquí. Tenemos Cancel y tenemos Reset. Así que nuevamente, solo para recordarte que este mensaje que ves aquí sobre Cars list, eso no es un problema de age-agreed. Es un problema de recarga en caliente, así que puedes ignorarlo. Así que ahora puedes ver cuatro botones. Ahora, como dije antes, realísticamente no mostrarías los cuatro botones. Probablemente mostrarías dos botones. Probablemente Apply y Clear siendo los más comunes. Así que ya he descrito Apply. Nada sucederá hasta que hagas clic en Apply. Clear borrará el filtro actual pero no lo aplicará realmente hasta que hagas clic en Apply. Cancel cancelará de vuelta a lo que. Así que si cambio esto a ser 29 y hago clic en Cancel, restablecerá la interfaz a 25 y no hará realmente nada. Así que te das cuenta, por ejemplo, si tuviera algún filtro realmente largo, digamos que hice apply y cometí un error y estaba haciendo otra cosa, y pensé, oh Dios, no sé qué tenía antes. No quise hacer eso, puedes hacer clic en Cancel y eso solo restablece la interfaz a lo que sea que el filtro actual sea. Así que el filtro actual es A igual a 25. Y si escribo eso, y no quiero cambiar el filtro, solo quiero restablecer la interfaz a lo que es el filtro subyacente, puedo hacer clic en Cancel. Reset es el último, borrará la interfaz y lo aplicará. Así que es como dos botones en uno. Reset será lo mismo que clear y apply. Reset hará clear y apply en un solo paso. Así que lo borra y lo aplica y no hay más filtro. Espero que eso tenga sentido. Apply lo aplica, clear borrará la interfaz, pero no lo aplicará. Cancel hará cualquier cambio que hayas hecho y volverá a lo que es el filtro actual si hay uno y reset borrará la interfaz actual y lo aplicará. Así que borrará el filtro actual. Es mucho para asimilar solo escuchándome hablar, pero si no estás seguro, si quieres un recordatorio, ve a agigrid.com y describe los botones más claramente de lo que probablemente he hecho, quiero decir, cómo usarlos. Pero nuevamente, realísticamente, probablemente solo tengas dos botones a la vez, no querrías tener cuatro. Pero si quieres ver qué hacen los botones, visita agigrid.com. El punto que tenemos es demostrar que proporcionamos cuatro botones en la caja y el 99% de las veces esas cuatro acciones son las que querrás usar en tu aplicación.

Bien, así que eliminemos estos botones y ahora volvamos a ver por qué, recuerdas, el filtro de Day no funciona porque el filtro de Day espera objetos de Day en los datos de las filas y no tenemos fechas en los datos de las filas, en realidad solo tenemos cadenas sin procesar. Así que lo que vamos a hacer es proporcionar un comparador y voy a copiar este código para no tener que escribirlo, es un poco demasiado para escribir. ¿Dónde está? Oh, puedo ir a GitHub. Aquí vamos, así que estoy copiando esto solo porque es un poco para escribir y si lo escribiera a mano probablemente cometería un error. Así que vamos a echar un vistazo, espero haberlo hecho correctamente si este filtro funciona. Y describiré lo que he hecho y por qué lo he hecho, solo comprobaré que funciona primero. Ahora nuestro filtro está funcionando. Así que antes, si recuerdas, el filtro de fecha no funcionaba porque esperábamos objetos de fecha y en nuestro caso los datos subyacentes son solo una cadena sin procesar. Así que lo que hemos hecho aquí es escribir un parámetro de filtro y un comparador y esto es útil si tus datos subyacentes son un objeto complejo. Quizás sea algún dato extraño que necesites procesar antes de poder hacer algo con él en JavaScript. Y el comparador te permite hacerlo. Te da el valor del filtro, que en este caso es 24-08-2008 y el valor real de la celda subyacente, sea lo que sea. En nuestro caso es una cadena y así en este caso vamos a tomar la cadena y pasarla a un objeto de fecha y luego vamos a comparar el valor de la fecha. No voy a pasar demasiado tiempo en este comparador en particular. El punto es que puedes sobrescribir lo que se compara proporcionando un comparador mediante filter params. Así que ahora tenemos todos los filtros funcionando. Tenemos un filtro de number, filtro de text, filtro de date y luego te mostré el filtro de set y el multi-filter anteriormente. Eso cierra el ciclo, creo, en todos los filtros. Gracias.

¿Funcionaría la virtualización, ordenación, filtrado, en un modelo del lado del servidor? Sí, pero empuja la responsabilidad hacia ti, el desarrollador. Así que, por ejemplo, si estás usando un modelo de filas del lado del servidor pero digamos que tu backend, tu base de datos tiene un millón de filas en ella y solo estás extrayendo 1,000 filas, obviamente la cuadrícula no puede ordenar o filtrar datos de filas que no conocemos. Así que lo que sucedería allí es que habría un montón de eventos. Si un usuario hace clic en ordenar o filtrar, llamaríamos a hooks o eventos a los que tú como desarrollador escucharías y luego actualizarías desde la fuente de datos remota, los datos. Así que, por ejemplo, estabas mostrando todas las filas de A a C y el usuario quiere mostrar todas las filas de S a X, te diríamos que ahora eso es lo que el usuario quiere hacer, obtendrías filas de S a X y las devolverías a la cuadrícula. Así que empuja la responsabilidad de nosotros en este momento y podemos hacer todo tipo de filtrado y paginación, pero si tienes datos del lado del servidor o virtualización o desplazamiento infinito, entonces tú como desarrollador tienes que hacer eso por tu parte porque obviamente la cuadrícula no puede filtrar datos que no conoce. Espero que eso tenga sentido. Echa un vistazo a la documentación para ejemplos reales de trabajo. Tenemos repositorios completos, repositorios de GitHub que te muestran cómo hacer esto allí. ¿Vamos a cubrir la edición en línea con una edición comunitaria? Sí, así que puedo hacer eso brevemente. Puedes tener editores bastante complejos, que no vamos a cubrir en esto, pero para hacer un campo editable por defecto con solo una edición en línea simple, todo lo que tienes que hacer es decir editable true. Así que por defecto, eso es todo lo que tienes que hacer, vamos a hacer la edad, ahora si hacemos clic en él, es editable. Así que si hago clic en Michael Phelps, no pasa nada, estoy haciendo clic en enter o doble clic, no pasa nada. Si hago clic en la edad, ahora es editable y puedo cambiarlo a 29. Así que todo lo que hice allí fue configurar editable a true. Editable también puede ser un callback, puedes tenerlo por fila y por celda, podrías querer algunas celdas y algunas filas para ser editables y otras no, como antes te pasaremos como parámetro, el estado de la cuadrícula, el estado de la celda, APIs y todo ese tipo de cosas, y puedes determinar dinámicamente qué es editable. Y finalmente, puedes tener, un editor de celdas y eso puede ser un componente de React. Tu componente de React, que no vamos a describir hoy. Pero podría como lo mostramos con el rojo, editor, lo siento, el render anterior, y un filtro que describiremos a continuación, puedes tener un renderizador de celdas, lo siento, editor de celdas como un componente. Espero que eso responda a esa pregunta. Así que en el caso de uso más simple, solo dice editable, y luego la celda será editor, asumo que eso es lo que quieres decir con edición en línea. Bien.

Así que, la siguiente sección que vamos a ver es estados de filtro, que fue una pregunta que tuvimos antes. Así que cada vez que haces una operación de filtro o ordenación, o casi cualquier cosa, puedes obtener los estados del filtro o el estado del filtro, podrías querer decir que un usuario ha filtrado en tres columnas de una manera específica, y quieren guardar eso. Así que cada vez que abren la aplicación, se restaura, podrías querer guardar los estados, guardarlo en un backend. Y cuando el usuario inicia sesión de nuevo, cargar los estados y devolverlos. Así que describamos cómo podemos obtener los estados y qué podemos hacer con ellos. Así que, para guardar los estados en nuestro caso, no vamos a guardarlo en un backend, solo vamos a usar una referencia para esto. Así que en relación con nuestro perfil. y vamos a tener, pongamos esto junto para que puedas ver el código. Eso no está lejos de donde lo estamos usando. Así que, tenemos un use refs que podemos usar para almacenar datos, y vamos a tener botones que lo guarden y lo apliquen. Y estos vamos a, vamos a agregar los botones en esta sección en un minuto. Así que digamos, en el botón guardar, veamos cuántos errores cometo mientras estoy codificando en vivo aquí. Y describiré a medida que avanzo línea por línea, lo que he hecho. Así que vamos a usar este callback en un segundo, pero lo que sabemos es que estamos usando el grid ref que usamos antes si recuerdas, en el componente de la cuadrícula. Grid ref.current.api nos da la API de la cuadrícula en lugar del post en la API de la columna y grabando get filter model. Y eso nos dará una representación directa de todos los modelos actuales aplicados. Pero comencemos con eso. Solo echemos un vistazo a ese modelo de filtro. El on click, en el botón guardar, guardar filtro. En realidad no estamos guardando nada todavía, pero podemos mirar la salida. Así que recordatorio, vamos a obtener el modelo de filtro actual y vamos a sacarlo a la console.log. Así que si sacamos eso, verás, no es muy emocionante. Es un objeto vacío. Hagamos algo más interesante. Digamos que la edad es igual a 25. Y ahora si lo guardamos de nuevo, ahora vemos un objeto JSON que tiene edad, el tipo de filtro es un número, el tipo es igual y el filtro es 25. Ahora no necesitas entender la salida de get filter model o set filter model. No tienes que, la cuadrícula proporcionará cuál es el estado actual, puedes guardarlo y restaurarlo. Puedes manipularlo si quieres, pero típicamente no tendrás que hacerlo. Y no tienes que entenderlo, pero el punto es que esto sacará el estado actual del filtro. Podemos aplicar otro filtro y si hacemos un estado de plata de nuevo, veremos que los objetos JSON son también edad, con edad y año. Así que en realidad no estamos guardando el filtro, como se especifica, solo lo estamos sacando para que puedas ver lo que está haciendo el modelo de filtro. Así que guardemos eso con, guardar filtro punto current es igual al modelo de filtro. Así que en la referencia que proporcionamos arriba en currents, vamos a guardar el modelo de filtro actual. Tengamos en el botón aplicar. Y bajo este aplicar vamos a aplicar lo que sea guardado, y solo demostraré cómo funciona eso en la práctica. Así que podemos tener cons.filterModel es igual a guardado. De nuevo, describiré lo que estoy haciendo después de haberlo hecho. ReddRef punto current punto API. Así que vamos a llamar a otro método de API en la cuadrícula, y voy a ir a set filter model, modelo de filtro, y luego vamos a agregar un botón para realmente usar esto. Así que lo que tenemos aquí ahora es pushMe, que comentaré solo por simplicidad para que no veamos eso. Así que tenemos estados de filtro guardados, que cada vez que hago clic se guardará en nuestra grid ref, el estado de la cuadrícula, y aplicar, lo sacará del estado actual del filtro y lo aplicará. Así que probemos eso. Apliquemos mitch en allí y luego país contiene Australia. Así que tenemos el estado actual es ese, quise hacer clic en el filtro, lo siento. En la A, tenemos cualquier cosa que contenga mitch, y luego el país, cualquier cosa que contenga os. Así que tenemos Australia y Austria y cualquier cosa en un nombre de atleta de mitch. Así que si guardamos eso, digamos que cambiamos el filtro ahora. Vamos, no queremos mitch, queremos tim y queremos países que tengan no, no, no filtro de país. Digamos que no tenemos filtro de país. Así que cambiamos el filtro. Lo guardamos antes. Tuvimos, tuvimos un filtro de atleta filtro de país. Y ahora lo hemos cambiado, para solo tener atletas con el nombre de Tim. Ahora digamos que el usuario quiere, ha hecho cambios y piensa, está bien, quiero volver a donde estaba antes. Podemos aplicar los estados de filtro. Y ahora los filtros están de vuelta a donde estaban antes. Tenemos el filtro de atleta, que contiene mitch y el filtro de país, que contiene os. Y solo para recapitular lo que hicimos allí, esto fue tal vez un poco rápido. En el botón guardar, obtenemos acceso al modelo de filtro, que es datos JSON, y puedes convertir eso en una cadena y tal vez guardarlo en una base de datos y luego convertirlo de nuevo a JSON y restaurarlo. Pero lo que hemos hecho es, obtener el estado actual del modelo y guardarlo en una referencia en nuestro caso de uso. Más realísticamente, lo guardarías en un backend de nuestra base de datos. Y luego para aplicar, hacemos lo inverso. Obtenemos el modelo que guardamos en la referencia y lo volvemos a aplicar a la cuadrícula usando la API y set filter model. Eso a un alto nivel es, cómo obtendrías el estado de los filtros a través de la cuadrícula y cómo los restablecerías. Puedes manipular esos datos JSON si quieres, la mayoría de las veces no lo harás, pero puedes y luego puedes obtenerlo y configurarlo usando métodos de API. Antes de continuar, espero que eso responda a la, quien tuvo una pregunta sobre estados de filtro, espero que eso responda a tu pregunta. Es realmente bastante fácil.

I mean, api.getFilterModel will get this current state to the filters and getSetFilterModel will set it depending on what you want. Let's look at the questions here. And then, so we need to add, saveCallback. Well, for, I think if you're asking about editing, I'm not sure what you're referring to there, I'm afraid. Charles, when you say, so you need to add saveCallback, maybe you can ask again and expand a little bit about what you're asking there. I suppose it's the same if you have a few edited cell and so want to save all the changes in one action. Yes, so by default, the grid, when the user enters an editor cell with editables to be true and clicks enter, the underlying JSON data will be updated with whatever the user applies. You can listen to events and change that. So for example, if you're using something like Redux, you might not want to change the underlying data, but rather send it up to the Redux tool. You can listen to the save events and not save it down. Tell the grid, don't save the data in the editor and instead send it, fire it up for events or Redux and then it would fall the back down to the grid. So yes, you could. And depending on your use case, you probably would. I assume I can use this just to multiple states in history for undoing, absolutely. So the grid actually has undo and redo functionality. So you can always check out the grid, the documentation for how to do that. But if you wanted to do your own, perhaps it was very complicated, undo and redo, yes, absolutely. For each edit operation or each filter operation, you could save the states using the events. You'd listen to the events, save the state of events to wherever you want to save it. And then you could roll those forward or backward depending on what the user was doing in the grid, yes. So we've just shown filter state here, but you can get sourcing states and all sorts of states. The most common are edit filter states, grid states and data states and filter states, but using events you could capture anything and apply that as your state. Okay, I hope that makes sense. So let's move on. So next we'll look at applying filter. Well, actually one other thing I can do here. So we can add, say you wanted to clear the states, you could on button. So yeah, I'm gonna save this. We don't need a filter model in this case, I'll just write it and I'll describe what I've done. So, I mean, it doesn't really matter in this case, but. Yeah, so here we go. We've got Save, Apply and Clear. So Save does as we've done before, let's say that we've got 25 and, oops, not athlete, that's Mitch. So what am I filtering on there? How do you add this? Sorry, I made a mistake. Contains Mitch. So the user's done some filtering and you then he's done some filtering or she's done some filtering and you want to provide a functionality where you just reset all filter states or sortable states or so on, you can clear it and this applies to all the states, filter state and sorting states. You can apply an empty model, which is just an empty object and that would remove any sorting or filtering that had been applied. Just a useful trick that's occasionally useful. So the next thing I want to move on to is floating filters, which are pretty useful. So if you want to have a floating filter, all you need to do is filter true and that will enable this. So this will enable a floating filter will enable the floating filter, as you see here across all filters where there is a filter. So what I mean by that is if I move floating filter to my default column there, I remember default column there applies to all columns. You'll see that all of them have filters. That's because we've set filter to be true. I'll remove that and refresh. So now I've removed, just to remind you, just to show you what I did there, cause it was pretty quick, we had defaults filter true in the default column there, which means that every column had a filter, but to demonstrate what I'm talking about here, I removed that, and only the column that have a filter field, the date, age and athlete have filters. So that means that only athletes age and date can have floating filters. Although floating filter is enabled in every column, it will only appear for columns that a filter appears or is present. And you can do the same thing inline that you could do with the actual filters. So for example, I could do Mitch, I could do 25, and whatever you do in the floating filter is reflected in the actual filter above. And all we had to do there was add floating filter be true. So I think this is a pretty useful piece of functionality, and most of the times all you'll have to do is place five floating filters equal to true, and out of the box, you'll get some pretty cool functionality for the user. So the user doesn't have to click on there and do stuff. You could simply, or she could simply do it inline. What else did I want to talk about there? Okay. The last thing I wanted to talk about on filters is clipping. So occasionally, depending on your application and depending on where you're seeing it, you come across a case where the filter might be clipped. So in this case, we're changing the height of the grid or the parent grid to be 300 pixels. And that looks fine. But if we look at, if we use something like set filter, and I'm only showing, you're showing the set filter for demonstration purposes. If we look at the, and we remove floating filter. So what I'm trying to describe here is, you'll see sometimes that the filter menu, the menu can be clipped, hang on, what have I done? Okay. So I'm going to set the default filter, which would be a set filter. Don't worry about the filter I'm using here, that's not what I'm trying to demonstrate. So I need that to be even smaller. Let's do 150. There we go. So as you can see, the filter menu is being clipped because the grid only has 150 pixels to play with. It's being clipped at the heights of the containing parent div. And this can happen if you're on a mobile device or the user shrinks the browser to be very small and what you can do to fix that is by default the popup parents or what we call the popup parents will be the parent div. But in a use case like this where your grid's pretty narrow and pretty small and you still want to show the full context menu or grid menu and filter menu, you can specify popup parents. And this is used for specifically for parent filters. But its useful in other places as well, like context menu. So I've said document body to be the popup parents and you'll see now that the popup is showing fully and breaking out of the parent div. It's a small little thing, I just wanted to highlight because it can be a phasing, it can be a gotcha. And all you need to do is specify the popup parent. By default you probably want to use document parents but you may wanna use some other elements. I hope that makes sense, if you see a clipping on your menus take a look at pop up parents and you probably want to set it to be document.body by default if you've got very narrow or very thin grids. Could you specifically take a look at the questions? Patricia's asked, could you have a top higher level search outside the grid table? Yes, there's a thing called a quick-search, quick filter and a quick filter allows you to externalize filtering. So hopefully you can see my browser here, I've got a little TextBox out here and I can do a search outside the box and this could do more than what I'm showing here but there is functionality called quick filters so take a look at that under the documentation and that allows you to externalize your searching outside of the grid. Can you place the floating filters above the table headers? No, you cannot by default but you could create, so if you if you needed to perhaps your UI designs and specify that, you know floating filter had to be on the top and it is at the bottom, you could create a custom header, it'll probably be a fair bit of work but you could create a custom React components that does that for you but out the box no, floating filters are as far as I remember, below the actual headers. With this filter pop up to full screen on a mobile device how does the grid look on mobile? So the yes, yes, that would work on mobile device but you need to be careful with having tabular data on a browser, on a mobile device and this is not just a degree, this is any tabular data. You probably don't want to show this sort of thing on a let me show you back to three, 500 on a mobile device. You probably don't want to show many columns like we've got here and many thousands of rows as we've got here on a mobile device. You'd probably want to show a truncated view and fewer columns. So this becomes more of a design thing. So something you'd probably want to talk to you with your UX team or if you're the UX team have to think about. You can show tabular data and that is useful but you don't want to show many columns and many rows because although the user can scroll and that's probably okay on a tablet on an actual mobile device, yes, you can show it and yes, the menu will be, if you filter, it'll be shown. It probably wouldn't be a great UI experience. So smaller grids and then consider a different design of this decision on small devices.

Las tabletas están bien, pero en teléfonos móviles, menos filas y columnas es probablemente lo que quieres hacer porque es un dolor tener que mostrar a través de muchas filas en un dispositivo móvil. Pero sí, esta es la respuesta. Funcionará. Funciona bien en un dispositivo móvil. Es más una cuestión de diseño en ese punto.

Bien, ¿qué íbamos a ver a continuación? Bien, así que lo último que vamos a ver hoy llegando a dos horas, es sobre, esta masterclass fue planeada justo cuando se trataba de dos horas. Así que vamos a exceder un poco. Si tienes que irte, está bien. Puedes echar un vistazo al repositorio de GitHub y creo que esto ha sido grabado, así que puedes ver la grabación después si quieres seguir. Pero lo último que vamos a ver son filtros personalizados. Así que hemos visto lo que Agigrid proporciona de serie, tres gratuitos en la comunidad y luego dos adicionales en la empresa. Un total de cinco si usas una empresa. Pero si esos no funcionan para ti, y de nuevo, miraré agigrid.com para la documentación completa sobre lo que los filtros pueden hacer. Pero si quieres hacer algo especial o algo a medida, como hicimos con los renderizadores, puedes tener un filtro personalizado.

Así que lo primero que vamos a hacer es crear un nuevo archivo y lo llamaremos yearfilter. Sí, Mohammed, compartiré el enlace en un minuto, está bien. Filter.js. Déjame compartir ese enlace rápidamente. Ahí tienes. Y solo si te has unido tarde, solo un recordatorio de que cada sección es una rama diferente. Así que puedes ver el código para esa rama en particular si haces clic en ella. Hay un número cinco filtros personalizados en este momento. Así que, no voy a intentar escribir esto. Voy a copiarlo y luego lo revisaré y describiré lo que estamos haciendo. Así que, como hicimos antes con el, como hicimos antes, vamos a tener un componente React personalizado, como hicimos con los renderizadores, pero esta vez, vamos a tener un poco más de un componente complicado y esta vez lo haremos para filtros. Así que, hay dos formas de crear componentes en este momento en React. Puedes agregar componentes funcionales, como un hook, que vamos a demostrar aquí, o componentes basados en clases. Si estás usando un componente funcional, hay algunos métodos de ciclo de vida que la cuadrícula necesita poder llamar para que los filtros funcionen y los editores, como sucede, y otras cosas. Y para exponer esos a un usuario externo, necesitas usar un forward ref y un use-imperative handle. No voy a entrar mucho en cómo funcionan. De nuevo, ese es un tema específico de React, así que ve a echar un vistazo a la documentación de React si quieres saber. Pero en resumen, estos métodos aquí que he resaltado, isFilterActive, doesFilterPass, getModel, y así sucesivamente, esos son métodos de ciclo de vida específicos de filtro que la cuadrícula necesita poder llamar en el componente. Y para que la cuadrícula pueda ver esos, o para que cualquier componente pueda ver estos métodos, necesitas exponerlos a través de un use-imperative handle. Si estás usando un componente basado en clases, no necesitas usar forward ref y use-imperative handle. Los métodos simplemente se expondrán por defecto. Espero que eso tenga sentido, pero en resumen, cualquier método que quieras exponer a la cuadrícula tiene que estar dentro de use-imperative handle. Todo lo demás que no esté en use-imperative handle es efectivamente invisible para la cuadrícula. Y eso es bueno para la encapsulación y demás. Así que cuando estás escribiendo un filtro personalizado, necesitas proporcionar un mínimo de cuatro métodos. isFilterActive, doesFilterPass, getModel, y setModel. Para el primer paso, vamos a ignorar getModel y setModel. Así que vamos a devolver un modelo indefinible y no haremos nada con setModels. Así que podemos ignorarlos por ahora. Todavía necesitamos proporcionarlos, pero la cuadrícula los llamará cuando sucedan cosas. Pero no vamos a hacer nada con ellos por ahora. Lo que vamos a ver para este filtro es si el filtro está activo. Y si un filtro está activo, la cuadrícula verá por columna qué filtros están activos, y si están activos por fila, aplicará ese filtro. Así que para este, un filtro de año, vamos a comprobar si este filterState no es igual a off. Así que si por defecto el valor de filterState es off, y si está off, el filtro está apagado. Si el filtro es cualquier valor que no sea filterState, así que en otras palabras si es un año, llamará a este filtro por fila. Así que por fila, en nuestro caso particular, lo hemos codificado, y vamos a comprobar el valor del año, y si es 2008, va a funcionar. Así que, en nuestro filtro hemos creado dos entradas, así que un botón de radio, y el filtro va a estar encendido, o va a estar apagado. Y si el usuario hace clic en apagado, el filterState estará apagado. Si el usuario hace clic en encendido, el filterState estará encendido. Recuerda, tenemos un filtro simple donde el valor está simplemente codificado, y está codificado porque solo quiero hablar sobre los params o props que suceden aquí. Y tenemos dos oyentes para esos botones. Uno establecerá filterState, y uno establecerá filterState en, y uno establecerá filterState off, así que tenemos un filtro, pero no estamos haciendo nada con él. Vamos a importarlo. Eliminaré Enterprise, no lo necesitamos por ahora. Y eliminaré los otros filtros por simplicidad. Así que, importar, hemos importado el filtro de año, y lo aplicaremos aquí. Así que recuerda antes de usar el filtro por defecto, diríamos true, lo siento, true, o para usar uno de los proporcionados. Podrías usar AG text column filter, por ejemplo, y luego si pasas un componente React, usará ese componente React. Así que guardemos eso, y vayamos a echar un vistazo a nuestra aplicación. Si actualizamos eso solo para asegurarnos. Así que, aquí en el navegador, puedes ver los resultados de nuestro filtro de año aquí. Tenemos los dos botones, encendido y apagado. Por defecto está apagado. Y luego, por defecto, el filtro no está activo. Puedes decir que el filtro está activo porque no hay un pequeño símbolo de filtro aquí. Hacemos clic en encendido, verás que la fila está filtrada. Puedes ver que apareció el pequeño símbolo de embudo porque is filter active será true porque el estado del filtro no es igual a auth. Y el filtro aplicado. Nos perdimos un paso, disculpas. El filtro solo se aplicó debido a esta línea que he resaltado en el navegador, en el IDE. Así que en la parte de props del filtro, hay un método llamado filterChangedCallback, y eso se pasa a este prop porque es un filtro. No se pasaría a un editor o un renderizador, por ejemplo, pero la cuadrícula sabe que esto es un filtro y proporciona este callback, callback de filtro. Así que en este efecto, cada vez que el estado del filtro cambia, en otras palabras, si lo encendemos o apagamos, llamamos de vuelta a la cuadrícula. Estamos efectivamente diciendo a la cuadrícula, oye, el filtro ha cambiado, por favor actúa sobre eso. Así que cada vez que cambiamos los estados del filtro, llamamos a filterChangedCallback en los props, y la cuadrícula llamará, ¿está activo el filtro? Y si está activo, ¿pasa el filtro por fila?

Esperemos que eso tenga sentido. Así que solo para recapitular, tenemos cuatro métodos aquí. Son obligatorios. Los que tienes que implementar, por defecto, para que un filtro sea útil son filter active y doesFilterPass. GetModel y setModel son obligatorios, pero no tienes que implementarlos. Sin embargo, eso no significa que no podrías restaurar estados de filtro, estados de filtro personalizados, o establecer estados de filtro personalizados si quisieras, como hicimos antes. Y lo haremos más tarde.

Así que ese es nuestro filtro mínimo. Ahora, he codificado esto porque quería hablar sobre lo que obtienes en los params. Podrías igualmente llamar a esto props. Así que verás que lo guardé y lo output por fila porque el filtro está activo. Por, si el filtro no estuviera activo, el doesFilterPass no se llamaría. Por fila, se muestra el nodo de fila, que es un nodo interno. Es ocasionalmente útil, lo cual no vamos a cubrir ahora. Pero también obtienes los datos de la fila. Así que cada una de estas filas, por fila, llamamos a doesFilterPass, y proporcionamos todos los datos de la fila. Así que, por ejemplo, si quisieras hacer un filtro personalizado que realmente mirara tres o cuatro columnas al mismo tiempo, tendrás acceso a toda la fila, no solo al valor de la celda, tienes toda la fila. Así que params.data son los datos de la fila. Y lo que estamos haciendo en este caso particular es para esos datos de la fila, estamos mirando el valor del año. Si es 2008, queremos que se filtre. Así que espero que eso tenga sentido. Aún así, este no es un filtro muy útil. Solo filtramos por 2008 basado en un botón de radio. Así que veamos si podemos hacer esto un poco más útil. Um, bien, así que hagámoslo más útil cambiando el texto del filtro. Así que tenemos aquí en este momento, tenemos year filter. Así que en este momento, solo podemos, no importa en qué columna lo pongamos, dirá year filter. Digamos que queremos hacer eso un poco más genérico. Podemos hacer este filtro un poco más genérico. Y como vimos antes, como hicimos con los params por defecto, puedes extenderlos, y podemos pasar cualquier cosa aquí. No, la cuadrícula no hace nada con estos props. Simplemente lo hacemos disponible para el renderizador. Así que luego podemos decir filter text. Y en este caso, vamos a decir, year filter. Así que al final, pondremos un signo de exclamación al final solo para mostrar que es diferente. Así que en los props, será filter text, y lo vamos a usar. ¿Qué hice? Props. Props.filterText. Así que si hacemos un refresh y vamos a mirar year, podemos ver year filter con un signo de exclamación. Así que es muy similar a lo que teníamos antes, pero lo hemos cambiado. Así que ya no codificamos con en la cuadrícula year filter. Lo hemos externalizado, y tenemos year filter con un signo de exclamación. Así que ese es el paso uno para hacer esto más genérico. El paso dos es que solo estamos filtrando por año. Pero en realidad podemos filtrar por la columna que se especifica en el momento de los props. Así que hagamos eso en el filtro primero y luego describiré lo que estamos haciendo en el...

Así que podemos decir const field. Así que uno de los valores pasados a los props es el coldef, y esa es la definición de columna que se especifica. Y podemos extraer el field. Así que si vamos a mirar aquí, cada vez que se llama al filtro, esto se hace disponible en coldef, el field de los filter params. Pero el que nos interesa particularmente es este field year. Y eso se nos hace disponible a través de los props y podemos extraer eso. Así que podemos decir que queremos filtrar el field para que sea 2008. Así que esto va a tener el mismo efecto que teníamos antes. Vamos a decir que cada vez que el año sea 2008, filtra esa fila. Eso tiene el mismo efecto, porque si recuerdas el field es year. Así que field params.data field es lo mismo en este caso que params.data.year igual a 2008. Y si volvemos aquí, todo funciona. Pero aún así, es genérico. No hemos tenido que codificar el valor. Lo siento, el field que vamos a usar. Pero obviamente 2008 todavía está codificado. Así que veamos si podemos hacer eso un poco más genérico. Y llamemos a esto props.criteria. Probablemente puedas ver a dónde va esto. Ahora 2000, criteria es 2008. Y esto funcionaría igual, espero, que antes. Todavía filtramos por 2008, pero nuevamente, lo hemos externalizado de nuestro componente de filtro, así que todo aquí es genérico ahora. Nada en este componente es específico para la columna year. Podríamos usarlo para otras columnas, lo cual haremos en un segundo. Pero hemos externalizado todo, así que hemos pasado lo que es específico del año en los filter params, y luego en nuestro filtro genérico, podemos extraer el filter text, y los criteria. Llevemos esto un paso más allá. Y digamos que queremos mostrar botones de radio. Así que, lo siento, solo estoy refrescando mis notas aquí. Voy a copiar esto, porque probablemente cometeré un error tipográfico. Nuevamente, voy al enlace de GitHub, y valores. Y describiré lo que he hecho. Estoy llevando esto solo un poco más allá. Aunque, he copiado todo el código. Como antes, field genérico. Vamos a mirar eso. Y ahora vamos a mostrar una lista de valores en lugar de solo un valor. Y en la app, vamos a tener off. Así que solo me aseguraré de que eso funcione y luego describiré lo que he hecho para cerrar el ciclo. Así que ahora tenemos off, vamos a filtrar, lo pondré aquí, en lugar de. Hagamos, ups. Tal vez no. 2004, 2006, 2008. Así que tenemos los estados off, ahora podemos aplicar filtros en botones de radio. Así que hemos hecho esto un poco más genérico basado en botones de radio.

Así que hemos hecho esto un poco más genérico basado en botones de radio. Y describiré nuevamente lo que he hecho en un segundo. Así que porque parece mucho, pero ahora podemos tomar esto, aunque todavía se llama year filter, podemos aplicarlo a cualquier columna y ahora vamos a tener age filter, year filter, 18 y digamos 25. Así que porque externalizamos estadísticas, podemos tener, ahora tenemos un filtro genérico. Déjame describir lo que he hecho aquí.

Las únicas diferencias, así que como dijimos antes, hicimos esto un filtro genérico. Así que filtraremos basado en el actual, la columna que se especifica en las definiciones de columna. Hemos hecho el título, y externalizado, y proporcionamos una lista de valores en la definición de columna. Y mostramos esos valores como botones. Y dependiendo del botón, se establecerá el estado del filtro. Así que, en este caso tenemos 18, 25, o apagado. Y aquí tenemos 24, 26, 28. Así que eso es muy específico. Toda esa información es muy específica para este filtro personalizado que hice. Es poco probable que hagas un filtro que sea específico. O, lo siento, esto, como este. Pero lo que estoy tratando de demostrar aquí es estos dos métodos y cómo funcionan, y cómo puedes complementar filtros con filter params. Recuerda que la cuadrícula no hace nada especial con los params que pasas aquí. A menos que sean algo específico para una cuadrícula, para uno de nuestros filtros, el título y los valores simplemente estarán disponibles en los props de cualquier componente que estés especificando. Déjame mirar las preguntas.

Bien, estoy, Mohammed, proporcionaré el enlace nuevamente. Espero que puedas verlo esta vez. Y, Charles, sí, creo que sí. Esa es probablemente una pregunta para los anfitriones de las masterclass. Está siendo grabado, así que supongo que estará disponible después de la masterclass. Esa no es una pregunta que pueda responder. Creo que está siendo grabado, así que definitivamente estará disponible. Cómo se hará disponible, no estoy seguro. Quizás pregunte a los organizadores del evento. Pero al menos, el código que he revisado estará disponible en GitHub. Así que lo último que vamos a ver es el estado, porque esto es bastante útil si tienes un filtro personalizado. Toma un sorbo de agua a escondidas. Así que, en este filtro, vamos a devolver, necesita ser un objeto, bueno, necesita ser cualquier cosa en realidad, porque cuando se llama a set model, será lo que hayas proporcionado. Así que no tiene que estar en el formato que usan nuestros filtros, esto puede ser cualquier cosa. Así que déjame demostrar esto, porque el filtro que dices, estos componentes de filtro, lo que sea que digamos, este componente de filtro necesitará entender. Así que va de la mano. Así que si los estados del filtro son iguales a apagado, devuelve, indefinido. Así que no hay estado de filtro si el filtro está apagado. De lo contrario, devuelve, estado, estado del filtro. Así que esto puede parecer un poco como ciertos estados en componentes de React, no lo es, esto podría llamarse cualquier cosa. Esto es solo, lo que sea que guardemos aquí, lo que sea que llamemos aquí con el modelo se llamará más tarde en set model a través del modelo. Así que solo lo llamamos en un estado en nuestro caso de uso, pero lo que sea que guardes y devuelvas a la cuadrícula y esto es completamente específico del dominio. Y luego en el set model, hacemos, si el modelo es nulo, establece los estados del filtro en apagado. De lo contrario, establece los estados del filtro, modelo.estado. Así que lo que hemos hecho aquí es que, si no hay filtro establecido, el modelo será nulo y estableceremos el estado del filtro en apagado, lo que nuevamente, solo te recuerda, el estado del filtro está apagado, el filtro no está activo. Si un usuario ha hecho algunos cambios y decides guardar el estado, el estado del filtro se guardará y cuando llames a set filter state, restaura el estado del filtro, lo que sea que hayas guardado se pasará al modelo. Así que en nuestro caso, si hemos llamado con 2008 como valor, el estado 2008 se pasará hacia abajo y lo pasaremos a set filter state. Eso es específico para un filtro personalizado, pero el código que podemos usar para probar esto es el mismo que hemos hecho con cualquier filtro. Así que si recuerdas antes, teníamos el botón de guardar, y el botón de aplicar, y un botón de borrar. Podemos usar esos botones como hemos hecho antes, aunque vamos a usar un filtro personalizado. Así que volvamos a nuestra aplicación. Vamos a refrescarla. Así que miremos nuestro filtro personalizado. Vamos a plegarlo por 2004 y 18. Y ahora si guardamos eso, ese estado personalizado incluyendo cualquier estado de filtro predeterminado se guardará. Podemos ir a hacer otra cosa ahora. Vamos a borrar eso y borrar este. Y luego podríamos restaurar el estado nuevamente aplicando. Así que lo que hemos hecho allí es que hemos llamado a get model en cada filtro personalizado y cualquier filtro predeterminado pero no necesitas preocuparte por eso, hemos llamado a get model cuando llamamos a get filter states, get model se llama en cada filtro personalizado o específico. Y cuando restablecemos el estado del modelo, se llama a set model en cada filtro. Así que esto se hace por ti de forma gratuita en los filtros predeterminados proporcionados por AgGrid, pero si estás haciendo tu propio filtro personalizado, es muy simple implementar el modelo, el get model y set filter. Y esto es probablemente tan complejo como necesitaría ser. Pero nuevamente, el estado del modelo que guardas y restauras puede ser tan simple o tan complejo como necesites que sea. Así que lo que sea que devuelvas aquí y se te pase aquí es completamente específico del dominio. Cuando una celda es editable, ¿cómo te aseguras de que la fuente de datos y el estado de la cuadrícula estén sincronizados sin volver a renderizar? ¿Cómo, quién poseería el estado de la cuadrícula, los datos de la fila o los ganadores olímpicos? Así que cuando los datos se leen de Olympic winners dot JSON, así que el archivo JSON es inmutable, la cuadrícula obviamente no puede cambiar eso, pero los datos de la fila son mutables. Y si por defecto, si editas datos de la cuadrícula, los datos de la fila subyacente cambiarán. Si no quieres eso, si quieres que tu fuente de datos principal sea Redux por ejemplo, solo estoy usando eso como un ejemplo, podrías escuchar eventos en ediciones y capturar esos eventos, evitar que el evento se guarde y en su lugar dispararlo como un evento, un evento de cambio a Redux y luego fluir de nuevo a la cuadrícula. Así que siempre puedes, aún podrías tener un flujo único de datos desde Redux hacia abajo. Tenemos documentación y ejemplos de trabajo en el repositorio en GitHub sobre cómo hacer eso. Así que revisa azgrid.com para obtener documentación sobre cómo hacer eso, y eso te llevará a repositorios sobre cómo hacer eso. Pero por defecto, los datos de la fila que usamos en la cuadrícula son mutables. Así que estos datos aquí son mutables. Y si no quisieras que ese fuera el caso, documentamos cómo hacer eso. Espero que eso tenga sentido. Así que lo último que iba a ver, oh, así que esto es cierto para cualquier componente personalizado. Voy a describir qué y cómo hacerlo en un componente de filtro pero esto, lo que voy a describir ahora podría estar en cualquier componente de cuadrícula personalizado, editor, filtro, componentes de encabezado, componentes de filtro, tienes ciertos casos de uso donde en un componente, podrías querer exponer algún método y poder interactuar con ese método. Así que tienes, vamos a exponer mi acción de filtro especial. Y haremos eso, mi acción de filtro especial. Y nuevamente, para que esto sea visible para la cuadrícula o cualquier otra cosa que necesites, en un hook, necesitas usar en pares de handle. Si estás usando componentes basados en clases, no necesitas hacer eso. Pero en resumen, necesitas usar, lo que sea que pases aquí será expuesto a la cuadrícula. Así que, esto no es específico de la cuadrícula. Esto es algo completamente específico del dominio. Podrías querer disparar un evento o cambiar el color o algo basado en algún botón externo. Así que hemos expuesto esto, pero no estamos haciendo nada con ello. Hay un nuevo botón. Usemos este botón de empujar, que definimos antes. Y usemos eso. Así que vamos a usar la API de la cuadrícula. Grif.current.API.GetFilterInstance.

Sí, y luego vamos a llamar de vuelta. Describiré lo que he estado aquí. Así que, solo lo probaré, y luego te guiaré a través de lo que he hecho. Empújame. Así que, mi SpecialFilter. Como puedes ver en la parte superior, hice clic en Empújame. Y luego el método especial Bespoke que expusimos en el filtro se puede llamar. Así que, lo que esto está demostrando es que cuando tienes un componente personalizado de React que vas a poner en la cuadrícula, puedes exponer ciertos métodos si lo deseas. No es obligatorio, solo una cosa opcional. Y lo que expones luego se puede llamar. Primero, puedes obtener las instancias de filtro de esta manera, obtener instancia de filtro. Pasas la columna que te interesa, esa es la clave. En este caso, lo llamaremos en year. Asincrónicamente, la instancia te será devuelta del filtro de columna en su lugar. Y luego puedes hacer cosas en ese método. Puedes hacer algo, lo que sea que expongas. En nuestro caso, estamos exponiendo mi acción de filtro especial. Esto no es común, pero es útil ocasionalmente para hacer algo. Así que podrías tener botones externalizados y podrías querer hacer cosas especiales en tu filtro o tus editores o renders para cambiar el color o establecer un valor predeterminado o algo. De cualquier manera, puedes acceder a los componentes personalizados puros exponiéndolos en use imperative handle. Y luego puedes llamarlos usando, obtener etapa de filtro. Y luego tienes, obtener estado del editor y así sucesivamente, obtener instancia del editor e instancia del encabezado. Tienes todo tipo de cosas. Esa es solo una forma de agregar funcionalidad personalizada y poder llamar a eso en tu cuadrícula. Lo siento, en tus componentes.

Lo último que voy a describir y lo último que tocaremos hoy fue otro método. Así que lo que describimos aquí antes fueron los cuatro métodos de filtro obligatorios que debes proporcionar. Hay otros. Hay alrededor de cuatro o cinco más. No entraré en ellos, pero lo que describiré aquí es obtener modelo como cadena. Y lo que esto te permite hacer es en formato de cadena convertir lo que sea que sea tu estado de filtro en un formato de cadena. Así que, por ejemplo, si tuvieras un filtro que tuviera un dial giratorio y realmente no pudieras mostrar eso en un filtro flotante, tal vez quieras hacer un set. Tienes el filtro como una rueda giratoria y luego cualquier valor elegido en el filtro flotante quieres que solo muestre un valor simple. Cómo harías eso es implementar para obtener modelo como cadena, devolver lo que sea que sea el modelo como una cadena. Así que si los estados del filtro son iguales a apagado devuelve una cadena vacía, de lo contrario devuelve los estados del filtro. Y luego si vamos a la columna, podemos decir filtro flotante verdadero. No tenemos filtro, así que pongámoslo en 2004, 2006, 2008. En este momento lo tenemos reflejando exactamente lo que es el filtro, porque estos son valores simples. Pero digamos que el valor que estás guardando en tu filtro es en realidad un valor de dominio específico bastante complejo y quieres reducirlo a un valor de cadena simple. Podrías tener algo como mi valor de filtro, eso probablemente sea demasiado largo. Y luego puedes ver que dice, valor de filtro 2004. Así que si tuvieras un valor complejo en el filtro que no tiene sentido renderizar en este filtro flotante, puedes reducirlo a una cadena simple y cambiarlo a un filtro. Así que solo para recordarte, que obtener modelo como cadena y eso es más útil cuando vas a usar este filtro flotante junto con un filtro personalizado.

Eso es todo lo que había cubierto. Todo lo que quería cubrir por hoy. Pero nos hemos pasado un poco, unos 25 minutos, no está tan mal. Me quedaré por aquí y revisaré esta llamada ahora solo para ver si hay alguna pregunta allí. No hay preguntas en esta llamada. Creo que probablemente algunas personas tuvieron problemas tal vez para unirse a esta llamada. Pero espero que me quede por aquí otros cinco minutos. Si ustedes o chicas o simplemente personas en general quieren hacer preguntas, me quedaré por aquí otros cinco minutos. Pero si tienes alguna otra pregunta, Stack Overflow es un gran lugar. Mantenemos un ojo en eso. Y respondemos activamente cosas, revisa nuestros documentos para todas las cosas. Y apenas hemos tocado el 5% de la buena funcionalidad. Así que siéntete libre de echar un vistazo a Stack Overflow. Puedes usar GitHub para problemas legítimos. Por favor, no uses eso para preguntas. Más bien usa Stack Overflow. Si estás interesado en adquirir una licencia o probar Agigrid, intenta contactar por correo electrónico a info en agigrid.com. Recuerda que la empresa es gratuita para probar. Y si no quieres un mensaje de consola o marca de agua, puedes obtener una clave de prueba gratuita. Gracias a todos por unirse. Realmente lo aprecio. Muy buena asistencia, grandes preguntas. Me quedaré por aquí, son las 25 para mí. Me quedaré hasta la media para cualquier pregunta. De lo contrario, muchas gracias. Fue genial ser parte de esto. Creo que tengo una pregunta que viene de Bruna. Gracias a todos por sus agradecimientos, se aprecia. Sí, así que. Lo único que te he mostrado hoy que es específico de la empresa es el agrupamiento de filas y el set filtro y multi filtro. Son los que compras listos para usar. Solo esas tres cosas. Set filter, multi filter, y agrupamiento de filas son las únicas cosas que he descrito en esta charla que son específicas de la empresa. Todo lo demás está en la Community Edition y es gratuito para usar. Así que los componentes personalizados, el renderizador o el filtro, esos son completamente gratuitos para usar. Los estados, todo lo demás es gratuito. Solo hay tres cosas que he pasado en esta llamada. Hay un montón de funcionalidades empresariales. Por favor, echa un vistazo a edugood.com para más, pero específicamente para esta masterclass, set filter, multi filter, y agrupamiento de filas fueron las únicas cosas que cubrieron que eran empresariales. Todo lo demás está disponible en la edición gratuita Community Edition. Tres minutos más, algunas más preguntas. Gracias Michael. Gracias Michael. Así que si estás usando así que si estás usando use state todo el IRU no así que déjame retroceder un segundo. La respuesta es depende. Así que si cambias un valor de celda en la cuadrícula. Así que si solo haces clic en editar, editable para ser verdadero.

Déjame demostrar esto. Así que digamos que country y haz que country sea editable. Y si vamos al navegador. Yo haría X. Toda la cuadrícula, así que el valor de la celda y los datos de fila subyacentes cambian, pero no toda la cuadrícula. Toda la cuadrícula no se volverá a renderizar, solo ese valor, solo ese componente de celda se volverá a renderizar. Si cambiaste todos los datos de la fila, la cuadrícula en sí, el componente en sí no se vuelve a renderizar, pero volveremos a renderizar las filas. Así que si cambias todas las filas, así que si estás usando un modelo de fila donde te desplazas hacia abajo y estás poniendo, y estás volviendo a renderizar 10,000, digamos 1000 nuevas filas, por supuesto, las filas antiguas serán destruidas y las nuevas filas serán renderizadas, pero si estás haciendo nuevos estados y como, como he demostrado, sí, toda la cuadrícula no se vuelve a renderizar. Solo la celda que has editado se vuelve a renderizar. Y lo mismo es cierto si estás usando Redux. Si te fallas, y el uso, el cambio de datos de fila de la cuadrícula, toda la cuadrícula no necesariamente se vuelve a renderizar. Solo los datos de fila que han cambiado se vuelven a renderizar. Es una pregunta ligeramente complicada porque depende de tu caso de uso. Pero como regla, no deberías tener la cuadrícula volviendo a renderizarse cuando los datos cambian.