Práctica con AG Grid's React Data Grid

En el lado izquierdo, espero que todos puedan ver mi pantalla, en el lado izquierdo tengo el repositorio de GitHub de. Vamos a usar esto para hacer un seguimiento de los diferentes capítulos, por así decirlo, o las secciones de esta charla. A medida que avancemos, estaré programando en vivo. Si sientes que te perdiste algo o cometiste un error o te quedaste un poco atrás, consulta la rama de la sección de la que estamos hablando y describirá el código a medida que avancemos. Por ejemplo, en la primera sección, aquí está el código para la primera cosa que presentaré mientras discuto, y luego la segunda parte, y así sucesivamente. Y al final, cuando lleguemos al final de ese capítulo, si vas a... Estamos a punto de comenzar la segunda sección. Por ejemplo, si estamos a punto de comenzar la segunda sección con características de enterprise, si simplemente revisas esa rama, estarás en línea directamente, de vuelta donde estábamos. Pero a medida que avanzas, si quieres seguir junto, asegúrate de tener la rama correcta para la sección de la que estamos hablando y el código está allí. Y podrás copiar y pegar. Alternativamente, puedes programar a medida que desees o simplemente mirar, no tienes que programar en absoluto y cuando termines el taller, tómate tu tiempo y ve al repositorio de GitHub y los videos de YouTube que tenemos, y puedes seguirlo a tu propio ritmo. Así que vamos a comenzar. Vamos a crear un proyecto de react vacío utilizando create react app, react app. Solo lo llamaremos hello. Mantén un ojo en el canal de Discord. Así que solo una aplicación de react de plantilla simple aquí. No tiene nada que ver con la cuadrícula hasta ahora. Solo instalando todas las dependencias. Está tardando un poco, lo siento. Wow, eso tomó más tiempo de lo pensé, lo siento chicos y Googles. De acuerdo, si vamos a hello, veremos un proyecto nuevo. Voy a abrir este proyecto en mi IDE. Y como dije, hasta ahora, esto es solo un proyecto de React básico. No hay nada específico sobre la cuadrícula AG todavía. Esto era mucho más rápido antes, disculpen la pequeña demora aquí. Mientras eso está haciendo algo, volveremos a la terminal. Entonces, para comenzar con AG Grid y React, hay dos dependencias que debes 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 usarlo en proyectos comerciales, y eso contiene el código principal. Luego también vamos a instalar AGgridReact. AGgridReact es el lado de representación de React de las cosas, por lo que necesitas los dos juntos. AGgridCommunity es el código principal de la cuadrícula, y eso es parte de la edición community, y también necesitarás AGgridReact para la integración de React, y eso proporciona la representación de React. Instalaré esas dependencias bastante rápido. Tenemos tu IDE. Entonces lo primero que vamos a hacer es abrir app.js. Permíteme ver si puedo abrirlo solo por si alguien tiene preguntas. Entonces, si ustedes o las personas en el canal tienen algún problema para ver la pantalla o entenderme, no duden en hacer una pregunta y trataré de responderla. De acuerdo. Así que comenzamos con React Create app proporcionado para nosotros. Esto es solo un código de plantilla si lo ejecutamos. Ejecutamos esto. De acuerdo. El repositorio, lo compartiré en el repositorio. Alguien preguntó, simplemente lo compartiré de nuevo. En el lado izquierdo, espero que puedas ver mi navegador. Vemos los resultados de Create React app. Solo lo compartiré. De acuerdo. Eso es lo que nos ha dado Create React app. Entonces, lo primero que tenemos que hacer es instalar nuestro componente de aggrid React. Lo extraeremos. Así que lo extraeremos con imports. Aggrid React. Eliminaremos estas cosas en la aplicación, que no necesitamos. Y usaremos nuestro componente de aggrid React. Hasta ahora, esto no hará nada por nosotros. Porque como mínimo, una cuadrícula o tabla requiere filas y columnas. Las filas serán las cosas horizontales que ves, y las columnas serán las verticales. Así que extraigamos algunos datos locales para ver cómo podría verse eso. Entonces. Enfócate. Cada uno de estos campos será algo que podemos mostrar y hacer en la cuadrícula. La fila datos es solo una matriz de datos JSON. Puedes tener tantos atributos, propiedades como desees, y luego las propiedades pueden ser complejas. En este ejemplo, solo vamos a ver datos simples. Números y cadenas. Pero pueden ser de cualquier tipo y luego la cuadrícula ofrece funcionalidad para leer ese tipo y mostrarlo como desees. Entonces, en este caso, pondremos algunos datos locales en la sección más reciente y te mostraremos cómo podemos extraer esto de una fuente remota de manera más realista. Diría que esto es 45,000 y esto es 50. Y luego esto lo haremos BMW. Serie 4. Entonces, esos son nuestros datos de fila. Aún no hemos hecho nada con ellos, así que está. Entonces, eso le dirá a la cuadrícula que muestre esos datos de fila. Esa es solo la mitad de la historia porque también necesitamos mostrar y elegir qué columnas extraer. Para extraer, tus datos de fila pueden tener cientos de campos que tal vez solo quieras mostrar uno o dos. Cómo seleccionas qué datos mostrar es con los datos de columna. Así que hagamos eso a continuación. Eso es igual y como los datos de fila. Esto es una matriz de datos JSON y como mínimo, necesitas especificar el campo nuevamente para mostrar, vamos a tener Marca Modelo. Y precio. Y nuevamente, necesitamos decirle a la cuadrícula. Buena pregunta. ¿Cuál es la agenda? Así que hemos entrado directamente en todo, pausaremos un segundo y te diré cuál es la agenda.

Hasta ahora, hemos importado AG, hemos instalado la comunidad de ag-grid y la dependencia de React. Hemos especificado algunos datos de filas y columnas y los hemos pasado a la cuadrícula. Y podemos ver los datos mostrados aquí, pero como puedes ver, está todo desordenado. Esto se debe a que necesitamos agregar algo de CSS a la cuadrícula. Y la única dependencia de CSS que debes agregar es el CSS estructural de ag-grid de la comunidad de ag-grid. Como mínimo, debes proporcionar esto.

¿Por qué no funciona? 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. Esto no es importante en esta sección en particular. Volveremos a ello en un segundo. Aquí especificamos la altura. La cuadrícula llenará el div padre. En este caso, tenemos un div simple, hemos establecido la altura en 500 píxeles. En una aplicación real, probablemente esto formaría parte de una aplicación más grande, pero independientemente, los componentes de ag-grid aquí llenarán cualquier div padre que les hayas dado. En este caso, lo hemos establecido en 500 píxeles de ancho. Y solo para recordarte, hemos importado lo mínimo necesario, que es el CSS de ag-grid. Esto proporciona el CSS estructural que necesita la cuadrícula. En la cuadrícula y en el navegador, podemos ver las tres columnas y filas. Podemos ver make, model y price, que hemos especificado con las definiciones de columnas. Y podemos ver los datos de las filas, Ford, Toyota y BMW, que hemos especificado con los datos de las filas.

Eso es genial. Funciona, pero no se ve muy bien. Esto es lo mínimo que necesitarías para que funcione. Si tú y tu organización o empresa quisieran proporcionar tu propio estilo, esto es lo mínimo que tendrías que agregar para que la cuadrícula funcione. Luego podrías anular los estilos, lo cual documentamos cómo hacerlo. Pero lo más común es que uses uno de los estilos que proporcionamos. Así es AG Grid React Styles. Proporcionamos varios estilos. Y vamos a usar Alpine para este. Y esto es probablemente lo que la mayoría de las personas hacen. Ahora puedes ver que he agregado el estilo Alpine que proporcionamos y lo he especificado en el div padre. AG-Theme-Alpine. Ahora puedes ver que la cuadrícula tiene algo de estilo. Tiene filas, tiene encabezados de columna en negrita, y así sucesivamente. Hay un montón de estilos que podríamos probar. Por ejemplo, Dark. 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, un tema balan. Así que adelante y experimenta, pero por ahora nos quedaremos con Alpine. Entonces, como mínimo, esto es lo que necesitas para una cuadrícula. Necesitas importar el estilo. Necesitas datos de filas y definiciones de columnas. Y en muy poco tiempo, quitando mi explicación, podrías tener una cuadrícula simple y codificada en menos de cinco minutos, diría yo. Pero eso probablemente no sea realista para la mayoría de los casos de uso. La mayoría de las personas probablemente obtendrán datos de una fuente remota. Ahora, veamos eso a continuación. Nuevamente, utilizando hooks, que es lo que estamos usando aquí. Y solo para decir que puedes usar hooks, puedes usar componentes basados en clases con la cuadrícula, ya sea dentro de una cuadrícula o en la cuadrícula misma. No importa. Aquí estamos usando un componente funcional, pero cualquier cosa funcionará. Como estamos usando un componente funcional, vamos a usar useState de React para establecer de forma asíncrona los datos de las filas más adelante. Importaremos eso de React. Lo importaremos de React. Lo siento, espera. ¿Qué he hecho mal? Esto es el peligro de la codificación en vivo, supongo. De acuerdo. Probablemente todos los que están viendo no se dieron cuenta de lo que hice mal. Ahí vamos. Así que volvemos a donde estábamos antes, tenemos los datos de las filas y las columnas. ¿Puedo hacer zoom en mi IDE? Sí, puedo, voy a aumentar el tamaño de la fuente. Espero que esto sea más fácil. Un poco mejor. ¿Es más claro, Samuel? Por favor, avísame, haré zoom si no es... Genial. De acuerdo, volvemos a donde empezamos. Tenemos datos de filas y columnas codificados. Si no pueden ver la pantalla o cualquier cosa que esté mostrando, por favor avisen y responderé lo más rápido que pueda. Hasta ahora, todo bien. Tenemos algunos datos de filas y columnas, pero ahora vamos a obtener esos datos de una fuente remota, que es probablemente más realista. Cuando los hooks se rendericen por primera vez, querremos... Así que haré una pausa aquí por un segundo. Cuando despliegues tu aplicación de verdad, esto funcionará sin problemas. Pero como queremos obtener estos datos de una fuente remota, que tiene HTTPS y lo estamos ejecutando localmente, es probable que tengamos problemas de CORS, especialmente con las versiones recientes de Chrome. Así que lo que debes hacer para este propósito de demostración es ir a la rama principal, tengo un enlace en el repositorio para un archivo de datos, que es lo que podemos leer desde allí. Nuevamente, copio esos datos. OlympicWinners.json, puedes encontrarlo nuevamente en el repositorio en la rama principal. Simplemente ve al archivo de datos y guárdalo en la carpeta public. Y lo llamaremos OlympicWinners.

OlympicWinners. Ahora, esto solo es necesario para solucionar algunos problemas de CORS. No hay nada especial acerca de estos datos. Es solo datos olímpicos y es algo que podremos usar para mostrar en la cuadrícula. Usaremos fetch. Y aquí, usaremos una fuente local. Es el OpenSUSE. Diamonds slash Olympicrecontype. Los ganadores son Jaceh y luego necesitamos obtener ese array y decirle a Jaceh que lo ponga de nuevo. 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. Así que, en resumen, la mayoría de las veces cuando escribes o implementas una cuadrícula, este es el flujo de trabajo que habrías seguido. 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ías una cuadrícula simple y funcional. Y esto probablemente cubre un buen 80%, 60, 70, 80% de los casos de uso en los que no necesitas requisitos complicados y solo quieres mostrar algunos datos tabulares. Con casi ningún esfuerzo, estarás listo y funcionando. 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 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 nos colocamos sobre aquí, solo con agregar sortable y filter, no tienes que hacer ambos. Ahora tenemos datos ordenables 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. Así que agreguemos filtrado y ahora sabremos que podemos ordenar hasta incluyendo fechas, ordenables hacia adelante, filtrables. Y, puede que pienses 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 un default column def. Y esto, lo que sea que especifiquemos aquí, se especificará en todas las columnas que tengan predeterminado. Column, asegurémonos de escribir esto correctamente, default column def equals memo. Así que, por ahora, tenemos una cuadrícula simple que tiene ordenamiento y filtrado en todas las columnas. Y como dije, hablaremos sobre los filtros un poco más adelante. Tengo una sección completa sobre filtros y filtros personalizados. Así que pospondré cualquier discusión sobre filtros por ahora. Solo sepa que proporcionamos alrededor de tres filtros listos para usar que puedes usar. 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í. De acuerdo, 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 completa de propiedades de columna, y hay muchas, 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 usarlas. Esto es solo para describirlo en términos generales. Hemos dicho, paraSpring y forSportsPring. Veamos los eventos a continuación.

Supongamos que queremos que algo suceda cuando un usuario hace clic en una columna. Tal vez hacen clic en algo y queremos, tal vez están viendo una lista de compras y hacen clic en algo y se muestra una imagen para mostrar cómo se vería el artículo seleccionado, por ejemplo. No haremos eso, haremos un console.log o un alert. Pero primero, queremos agregar, oh, sabes qué, antes de continuar, veremos dos propiedades de la cuadrícula que quizás quieras usar.

A diferencia de las propiedades de columna, hay muchas propiedades de la cuadrícula que puedes usar, muchas. Entonces, Bruna acaba de preguntar, ¿la tabla está virtualizada de forma predeterminada? Sí, lo está. Hay una cierta cantidad de filas y columnas, más un poco de espacio adicional. 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 recuerdo cuál es el valor predeterminado. Y luego los datos después de eso se virtualizarán. Y solo a medida que te desplazas se renderizarán y todas las cosas que ya no están en la ventana se eliminarán. Echa un vistazo a la documentación para obtener más información sobre la virtualización y cómo puedes anularla, pero sí, la virtualización está habilitada de forma predeterminada, tanto vertical como horizontalmente. He hablado sobre las propiedades de columna. Veamos las propiedades de la cuadrícula. Nuevamente, hay docenas y docenas de propiedades que puedes usar aquí. Usaremos dos solo para demostrar cómo podrías usarlas. Primero, animaremos las filas. Y las advertencias en la consola que puedas ver en el IDE, puedes ignorarlas. En una aplicación real, podrías hacer algo al respecto, pero estas son solo advertencias. Para fines del taller, puedes ignorarlas. Entonces, hemos agregado la animación de filas ahora. Antes no había animación, animar filas, ¿qué hice, déjame ver aquí, animar filas, true. Necesito refrescar, creo. Oh, está bien, eso es refrescar. La carga en caliente es genial, pero no siempre se actualiza por completo. Espero que puedas ver que ahora hay una animación allí. Y es un efecto de animación genial, que me gusta mucho. Y lo hemos habilitado simplemente estableciendo animar filas en true. Y agreguemos una 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 presionada la tecla Command o Shift. Y lo que estoy tratando de demostrar allí es que hemos hablado sobre las propiedades de columna, ordenar o filtrar, y ahora te estoy presentando propiedades específicas de la cuadrícula, animar filas y selección de filas. Y es tan fácil como proporcionar la propiedad y establecerla en un valor apropiado. Y todo lo que hicimos allí fue habilitar la animación de filas. Puedes ver esa animación genial y la selección de filas. Y todo lo que tuviste que hacer allí fue configurar la propiedad. Entonces, hay mucho poder desbloqueado con propiedades y valores simples. Pero nuevamente, para obtener la lista completa de propiedades en las columnas y en la cuadrícula misma, visita aggrid.com.

De acuerdo, avanzando, como dije antes, veremos los eventos a continuación. Ahora queremos ver los clics. Lo primero que debemos hacer es 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 referencia. Así que diré, gridRef. Lo estoy haciendo un poco al revés aquí. Entonces vamos a decir, vamos a pasar una referencia de la cuadrícula. Aún no la hemos especificado. Entonces, const gridRef = useRef. Y lo importaremos. Bueno, eso obviamente no hace nada hasta ahora. Hemos especificado una referencia en la parte superior aquí, y la hemos pasado a la cuadrícula, luego se establecerá cuando se renderice la cuadrícula. Pero en realidad vamos a usar esto para crear un botón que deseleccione todas las filas seleccionadas. Oh, me salté un paso, disculpen. Volveré a los eventos en un momento. Lo siento, me estoy desordenando un poco. Digamos que queremos hacer algo con esto. Entonces, cuando el usuario cree el botón, disculpas por el orden extraño. Pausaré nuevamente una vez que haya terminado y describiré lo que estoy haciendo aquí. De acuerdo. Lo que estoy haciendo aquí es simplemente demostrar cómo obtener acceso a la API de la cuadrícula y la API de columnas, y luego cómo puedes usarlo en un botón, por ejemplo, en este caso, pero en cualquier cantidad de casos, pero en este caso, solo lo usaremos en un botón. El botón `Presióname` llama a useCallback. En realidad, no estoy haciendo nada con el evento, el gridRef.current nos dará la referencia actual al componente AGGrid de la cuadrícula React. Y en este caso, vamos a usar la API. Eso te dará acceso a la API de la cuadrícula y también a la API de columnas. Y eso es para operaciones de la API de columnas. No vamos a usar la API de columnas en este ejemplo en particular. Vamos a usar la API de la cuadrícula, que es para deseleccionar todo. Usaremos la API de columnas. Bien. Entonces tenemos un botón aquí. Eso dirá, supongamos que hemos seleccionado estas filas y queremos proporcionar una funcionalidad al usuario que deseleccione todas las filas seleccionadas. Y ahí lo tienes. Así lo hice de nuevo. He seleccionado varias filas. Cuando hago clic en este botón, llamaré a la API de la cuadrícula y deseleccionaré todo.

Ok. Espero que hasta ahora tenga sentido. Y lo último que voy a describir son los eventos, a los que me referí anteriormente, pero en realidad no los describí, así que hagámoslo ahora. Hay muchos eventos y oyentes, al igual que con las API y las definiciones de color, buenas propiedades, consulta los documentos de la cuadrícula en aggrid.com para ver todas las cosas a las que puedes escuchar. En este caso, vamos a escuchar un clic en una celda. Cuando se hace clic en una celda, mostraremos una alerta para indicar que algo ha sucedido. Callback, E. Control.log, celda y lo que se nos pasa. Y para usar eso, haz clic y arrastra truncar más dos, ahí vamos.

Entonces, 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 pasará a través de los parámetros y podrás hacer algo con él. Por ejemplo, podrías alertar al usuario de que hizo clic en una celda, podrías 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. Entonces, 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 desees 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 eso demuestre lo fácil que es agregar un oyente a un evento, a una columna. Puedes escuchar el ordenamiento, puedes agregar filtrado. Cualquier cosa a la que concebiblemente quieras escuchar, puedes hacerlo en la cuadrícula, solo consulta aggrid.com para ver qué eventos puedes escuchar y qué devoluciones de llamada puedes usar, e implementarías esto. Espero que hasta ahora 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 y ejecutar muy simplemente con la Edición Community. 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 ag-grid.css como mínimo, eso proporciona el CSS estructural. Sin eso, la cuadrícula simplemente no funcionará. Luego puedes proporcionar opcionalmente un tema. El 99% de las veces, usarás uno de los temas que proporcionamos. Y luego especificas el tema que vas a usar en el div principal. Especificamos el mínimo necesario de datos que necesitas en una cuadrícula. Necesitas los datos de la fila, que son los datos horizontales, y luego los datos de la columna, que son los campos que seleccionas de los datos de la fila. Aquí especificamos el campo que nos interesa y extraemos algo de JSON remoto, que es una matriz de objetos JSON, lo convertimos a JSON y luego establecemos los datos de la 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 que deselecciona 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 la cuadrícula para animar las filas y agregar selección de filas con estas dos propiedades aquí. Entonces, ¿cuál es la mejor manera de crear un tema para Agigrid? ¿Puede el tema aprovecharlo? No estoy seguro del CSS en los proveedores de temas de GI, no veo por qué no. En cuanto a cómo hacerlo, tendrías que ir a la sección de estilos de aggrid.com y describe el CSS estructural tal como está diseñado 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. Entonces, eso podría ser algo que quieras considerar, mira los temas que proporcionamos de fábrica, ve cuál se acerca más 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.

Avanzaremos a la siguiente sección, que es breve. Es solo cómo usar Agigrid Enterprise y algunas de las características que se proporcionan allí. Pero como dije al principio, esto no se trata específicamente de Agigrid Enterprise. Si deseas 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 explicar cómo implementarlo, cómo agregar las características de Enterprise y cómo usarlo. Para ver el código de eso, asegúrate de haber seleccionado to-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. Simplemente usa el chat de Zoom, está bien. Eso está bien. Entonces, lo primero que vamos a hacer es instalar la dependencia de Agigrid Enterprise. Agigrid Enterprise se instalará y guardará como una dependencia. Como dije al comienzo 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 renderizado 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 lo usa para ampliar su funcionalidad. Entonces 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. Puedo informar al usuario también. Cargado. Puedo informar al usuario, playground, a la cuadrícula. Lo que creo que es la mejor manera de decírselo, hay eventos a los que puedes, así que hablamos de eventos antes. Y hay eventos como first data rendered y grid ready. Ambos eventos probablemente te servirían. Entonces, cuando se disparen esos eventos, puedes decirle al usuario que la cuadrícula está lista y los datos están en la cuadrícula y se muestran. Entonces, 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. Grid ready y first data rendered. Puedes escuchar esos eventos y luego mostrar una ventana emergente o un modal o algo para informar al usuario que la cuadrícula está lista para inspección. Espero que eso responda esa pregunta.

OK, así que hemos importado la dependencia de Aggrid, volvamos a iniciar nuestra aplicación. Hemos importado la dependencia pero aún no la estamos utilizando. Si recargamos nuestra aplicación, verás lo que teníamos antes. Para importar las dependencias, todo lo que tienes que hacer es importar Aggrid Enterprise. Solo con eso... En realidad, sabes qué, permíteme comentar, permíteme mostrarte algo. Sin Aggrid Enterprise importado, verás el menú contextual predeterminado del navegador y cuando veas los filtros, verás los filtros predefinidos que son muy poderosos. Puedes obtener filtros numéricos, de fecha y de cadena. Pero hablaremos de eso en una sección posterior. Pero verás que el predeterminado es este, y luego el menú contextual es simplemente el menú contextual del navegador. Entonces, si importamos Aggrid Enterprise y volvemos a cargar nuestra aplicación, lo primero que verás es un mensaje en la consola que dice que Aggrid Enterprise es una versión de prueba y te advierte que no tienes una clave de licencia. Eso está bien. No se deshabilita ninguna funcionalidad. Puedes usar Aggrid Enterprise, probarlo de forma gratuita. Si deseas deshacerte de este mensaje en la consola, puedes contactarnos en [email protected] y te daremos una licencia de prueba gratuita. Así que eres libre de probar y jugar con Aggrid Enterprise y sus características. Y si decides usarlo en una aplicación, puedes contactarnos para obtener una licencia, pero no se deshabilita ninguna funcionalidad. Verás una marca de agua y un mensaje en la consola, pero todas las funcionalidades están habilitadas. Dicho esto, si hacemos clic derecho, verás que algunas funcionalidades se desbloquean de inmediato sin tener que hacer nada más que importar Aggrid Enterprise. Verás que puedes exportar a CSV o Excel. Puedes copiar encabezados de grupo, etc. Y luego, si miramos los filtros, verás que ahora tienes paneles de columnas. Tienes cosas donde puedes fijar columnas a la izquierda y a la derecha, puedes deslizar automáticamente esas columnas, puedes ocultar y mostrar columnas de relleno, o el usuario puede hacerlo. Y ahora tenemos un tipo de filtro diferente al que teníamos antes. Tenemos un filtro de conjunto, que es el conjunto de todos los datos que están debajo. Entonces, ahora en Aggrid Enterprise, el filtro predeterminado se convierte en el filtro de conjunto. Nuevamente, describiré los filtros más adelante, pero solo para demostrar que has desbloqueado la funcionalidad de enterprise simplemente instalando la dependencia e importándola. Ahora, digamos que queremos llevar eso un poco más lejos. Eso es genial. Poder exportar tus datos es útil, especialmente a Excel para muchos usuarios, pero también puedes copiar datos. Un usuario podría seleccionar algunas filas, por ejemplo, y luego copiar los datos haciendo clic derecho o copiándolos con encabezados, etc. Pero llevémoslo un poco más lejos. Digamos que queremos, tenemos muchos datos aquí. Eso no es especialmente útil, incluso con filtrado y ordenamiento, que es genial. Quizás las personas quieran ver los datos que hemos visto, pero agruparlos, y eso es muy fácil de hacer. Podemos hacerlo utilizando la función de agrupación de filas llamada Row Grouping. Entonces, agrupemos por país. Y solo con hacer eso, verás que los datos ahora están agrupados por país. Aún tenemos los mismos datos olímpicos que teníamos antes, pero ahora agrupados por país. Digamos que queremos agrupar también por año. Se agruparía por país y año. Ups. Solo estoy actualizando porque la recarga en caliente a veces causa problemas. Ahora puedes ver que solo con agregar row group true, hemos agrupado por país y luego por año. Y todo lo que tenemos que hacer es especificar la propiedad row group. Y ahora puedes hacer esto programáticamente desde el principio. Digamos que deseas proporcionar un informe predeterminado a los usuarios de inmediato, donde no deseas que cambien los datos, puedes proporcionarlo de inmediato. Pero es posible que desees que los usuarios puedan ver los datos de la manera que deseen verlos. En ese caso, podrías proporcionar esta funcionalidad mostrando primero la zona de arrastre de la cuadrícula. Lo describiré en un segundo. Entonces agregaremos row group panel show. Espera. Permíteme ver la propiedad. Row group panel show. Always. He agregado una propiedad de cuadrícula llamada row group panel show. Esta es una zona de arrastre para varias funcionalidades. En nuestro caso, la usaremos para agrupar filas. Pero verás que al agregar esa propiedad, tenemos un encabezado en la parte superior que dice `Arrastra aquí para establecer grupos de filas`. Y eso es genial, pero también necesitamos indicar dentro de qué grupos se pueden arrastrar. Es posible que tengas datos donde no tenga sentido agrupar por ciertos datos. Tal vez tengas fechas con milisegundos, y no tendría sentido agrupar por eso potencialmente. Entonces, querrías poder especificar qué columnas quieres que sean agrupables. En nuestro caso, queremos que todas las columnas sean agrupables. Nuevamente, especificaremos esto como una columna predeterminada en lugar de tener que especificarlo para cada una. Entonces, habilitamos el agrupamiento de filas y esto hará que todas las columnas sean agrupables. Podemos guardar eso. Actualizamos nuestra cuadrícula. Y ahora podemos hacer lo que hicimos antes. Podemos agrupar por país, simplemente 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, arrastramos el año hacia arriba. Y luego tenemos lo que teníamos antes. Tenemos los datos de las filas agrupados por país y luego por año. Y esto es útil si deseas proporcionar los datos sin procesar al usuario, pero deseas que puedan cortar y filtrar y ver los datos de la manera que elijan. Todo lo que tuviste que hacer fue especificar enable row group y decirle a la cuadrícula que siempre quieres que se muestre el panel. Nuevamente, con muy poco esfuerzo, puedes desbloquear una gran cantidad de datos para el usuario. Ahora, simplemente terminaré brevemente la sección de enterprise. Hay una tonelada de características que puedes usar con las características de enterprise. Si cuando estás viendo aggrid.com ves una pequeña e junto a la característica, eso significa que es una característica de enterprise. Diría que probablemente el 70% de la funcionalidad que proporcionamos, el 80% de la funcionalidad, supongo, es gratuita para usar. Entonces, la mayoría de las funcionalidades que deseas usar en la cuadrícula son gratuitas y están en la edición community. Pero si tienes necesidades específicas o necesidades empresariales, es posible que necesites usar aggrid enterprise. Y si ves una pequeña e junto a ella, entonces necesitarás una licencia enterprise. Pero nuevamente, eres libre de usar aggrid enterprise y probarlo. Y si deseas una licencia de prueba gratuita, contáctanos en [email protected]. Y luego también puedes llevarlo más lejos y comprar una licencia si decides hacerlo. Así que creo que dejaré eso en aggrid enterprise. Supongo que nadie tiene preguntas específicas. Solo repasaré lo que hicimos.

Primero instalamos la dependencia de Aggrid enterprise con NPM y la guardamos en package.json. Aquí puedes ver las dependencias gratuitas que tenemos, tenemos Aggrid community, que es la edición gratuita de community, que tiene el 78% de la funcionalidad de código que necesitas. Aggrid community es gratuito para usar, no necesitas una licencia para eso. Aggrid React es el lado de renderizado de React. Entonces, como mínimo, necesitas Aggrid React y Aggrid community. Luego, si deseas utilizar las funcionalidades de enterprise, agregas Aggrid enterprise y también necesitas las otras dos para desbloquear las funcionalidades de enterprise y esto se basa en Aggrid community. Por último, debes asegurarte de que tus versiones principales y menores estén sincronizadas. Siempre debes tener las versiones principales y menores sincronizadas, por lo que nunca debes tener, por ejemplo, 27.4 y 3, y que no coincidan. Para las versiones de parche, estas pueden ser diferentes, eso está bien, pero debes asegurarte de que tus versiones principales y menores sean las mismas en todas las dependencias que utilizas.

Sí, Aggrid admite TypeScript. Enviamos todos los typings que desearías usar. Documentamos cómo puedes usarlo con TSX, por ejemplo. Entonces, por ejemplo, si quisieras usar una referencia de cuadrícula, podrías especificarlo como Aggrid react, algo así. No puedo recordar el tipo exacto, pero documentamos cómo usar esto, y sí, los typings están expuestos para que los uses. Y si hicieras algo como esto, tendrías autocompletado. Así que sí, es bastante compatible. Aggrid react, en realidad está escrito con TypeScript. No es necesario que uses TypeScript, pero se admite.

De acuerdo, 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. Um, así que pasaremos a la tercera sección, que son los renderizadores. Y esto es usando renderizadores personalizados. Por defecto, la cuadrícula te mostrará los data sin procesar. Y mostrará los data sin procesar. Por ejemplo, aquí, Michael Phelps, Estados Unidos, 23. Esto simplemente imprime los data sin procesar que están en los data 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 sin procesar. Si es un objeto complejo, probablemente solo obtendrás objetos de objeto, pero puedes, con los value getters y demás, extraer datos complejos pasados y mostrarlos. 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. Tal vez quieras que gire en Will o un control deslizante o cualquier cosa. Cualquier cosa en estas filas y columnas, incluidos encabezados y filtros, pueden ser componentes React. Entonces, en esta primera sección, el documento describirá cómo usar un renderizador de celda, que probablemente sea lo más común para lo que querrías crear un renderizador personalizado. Y cualquier cosa que puedas hacer en un componente React, puedes usarlo en la cuadrícula. Entonces, lo primero que vamos a hacer es tener un renderizador simple, no muy útil pero un renderizador simple, mi renderizador. Y esto simplemente mostrará... Lo siento. Tenemos un renderizador simple aquí y vamos a usar este renderizador en la columna app-node. Entonces, este no es un renderizador terriblemente útil, obviamente. Pero nuevamente, tenemos un componente funcional simple y se lo pasamos, le decimos a la cuadrícula que use este componente, mi renderizador. Y queremos usarlo en lugar de un renderizador de celda. Entonces, en lugar de representar nuestras salidas en los data JSON sin procesar, vamos a mostrar lo que haga el renderizador. Y en nuestro caso, independientemente de los data subyacentes, vamos a mostrar hola mundo. Y 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 veamos lo que nos proporciona la cuadrícula. Cuando renderizamos cada columna, podemos... Dame un segundo, un poco de agua. Cada vez que se renderiza cada fila y celda, si tienes un renderizador personalizado, le diremos a la cuadrícula, llamaremos a tu renderizador e instanciaremos y pasaremos el estado de la cuadrícula y el valor de la celda, y así sucesivamente. Así que veamos lo que te pasamos. Así que veamos las props que pasa la cuadrícula. Verás un montón de salidas aquí y cada fila mostrará las props pasadas a los componentes. Y si expandimos cualquiera de ellas, verás un montón de cosas útiles. No describiré todas las cosas que se te proporcionan, pero algunas de las más importantes son el nivel de columna, la información de la columna, puedes ver la API y la API de 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 inferior, el valor corresponde al órgano. Y eso es lo que típicamente usarías más comúnmente, pero proporcionamos muchas otras cosas que también podrías querer hacer, como las API, por ejemplo. Hagamos este renderizador un poco más útil y usemos los data que se nos da. Entonces p.value. Y con eso, deberíamos obtener lo que teníamos antes. Entonces, estamos usando visualmente desde la perspectiva de los usuarios, estamos viendo lo que vimos antes, las filas y columnas data, y estamos viendo a Michael Phelps y los data de cadena sin procesar, porque todavía no estamos haciendo nada especial con ellos. Simplemente estamos tomando las props y extrayendo el valor y mostrá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, queremos tener un pequeño botón, tal vez queremos hacer algo cuando un usuario hace clic en el botón, agregar un artículo a su carrito de compras, etc. 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. Entonces const on dollar, quiero decir, esto tampoco es muy útil, pero solo podría demostrar el punto, tienes el valor y quiero que sea una cadena, así que aquí vamos. Entonces 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. Entonces hemos tomado nuestro renderizador simple y lo hemos extendido un poco. Ahora tenemos un Avengers que se disparará cuando se haga clic en el símbolo del dólar y mostrará los clics del dólar y el valor de esa celda. Entonces, nuevamente, este es un renderizador muy simple, ¿verdad? Esto no es algo que probablemente harías, harías algo mucho más complicado. Pero veamos eso, así que si hacemos clic en eso, tenemos clics del dólar y luego el valor de la celda, Nathalie Coaglan, que es el valor de la celda en la que hicimos clic. Entonces, nuevamente, esto es realmente simple, obviamente, probablemente harías algo más complicado con tus data, solo es para demostrar que cualquier componente react que tengas se puede renderizar dentro de la cuadrícula. Vamos a llevar eso un poco más lejos, vamos a mostrarte cómo puedes complementar los data que tienes. 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, etc. Pero puedes complementarlo, puedes agregarlo a través de props a los data que desees. Así que llevemos esto más lejos. Digamos que... Digamos que queremos pasar el texto del botón. Entonces quieres un componente genérico y quieres que solo difiera por lo que pasas. Entonces puedes complementarlo con un objeto y lo que especifiques aquí estará disponible en las props de los componentes a medida que se crea dinámicamente. Y lo que pongas en lo dinámico, los parámetros pueden ser cualquier cosa. Disculpa, un segundo. Lo siento por eso. Entonces no hacemos nada con el estado y simplemente lo hacemos disponible. Ahora en este caso vamos a hacer button text. 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, si miramos los data, las cosas pasadas, verás el botón, ¿cómo lo llamé? Creo que cometí un error tipográfico, cellrenderer. Renderizador. Ayuda si se escribe correctamente. Así que cometí el error antes, no había escrito correctamente cellrenderer. Entonces, 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 ruta de las props a los renderizadores, puedes ver que se están renderizando las props y la ruta de las props a los renderizadores, puedes ver que button text está disponible. Así que usemos eso. 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, tenemos app-lete-button. Entonces, por ejemplo, podrías querer usar este renderizador, hacerlo un renderizador genérico, y diferir en las columnas solo por las props que pasas. Así que vamos a demostrar eso. Renderizador, hazlo genérico. Y describiremos esto un poco más adelante con campos. Y esto podría ser age button. Entonces puedes ver que hemos usado los mismos componentes, este renderizador aquí, y lo hemos hecho genérico. Y solo difiere por las props que pasamos, en este caso button text, pero podría ser cualquier cosa.

Esto es solo para demostrar cómo puedes complementar los renderizadores que usas y proporcionar metadatos adicionales o props a ellos. Por último, te mostraré cómo puedes usar un renderizador simple y este es un renderizador en línea. Y esto es probablemente algo que querrías hacer si estás haciendo pruebas o eso fue un renderizador muy simple, algo que no compartirás. Puedes usar un renderizador en línea. Entonces no necesitas especificarlo externamente. Puedes decir algo como, mi renderizador en línea, p.value. Entonces esto es lo mismo que arriba realmente, pero tienes en tu navegador, ves mi renderizador en línea y el valor. Entonces finalmente puedes especificar algo en línea, no necesitas externalizarlo ya sea en un archivo separado o en una constante separada como hemos hecho aquí. Si es muy simple, o si solo estás haciendo depuración o jugando, puedes hacerlo en línea como lo he hecho ahí.

De acuerdo, ¿qué sigue? Digamos que tienes un escenario donde quieres tener diferentes renderizadores según el valor de la columna. Entonces podrías querer decir, renderizador X si los datos son uno y renderizador Y si los datos son dos, puedes elegir dinámicamente qué mostrar según los selectores de renderizador de celda. Permíteme mostrarte eso. Puedes tenerlo estático y ese probablemente sea el caso de uso más común donde lo especificarías así, pero puedes tener uno dinámico con el selector de renderizador de celda. Y eso es una función que devuelve un objeto. Y nuevamente, 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. Entonces, si el valor es igual a 2000, vamos a devolver y especificar componentes, mi renderizador. Lo usaremos 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 componentes 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í. Moví esto, agregué una propiedad llamada selector de renderizador de celda, y eso se activa por fila de datos para esta columna, para cada fila en la columna de país y año. Esto se activará. Pasará P, que tiene la API, la API de la 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, nos quedaremos con el valor sin procesar. Así que guardemos eso y veamos qué sucede. Entonces, aquí puedes ver que 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á el valor 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 no es ni 2000 ni 2004, nos quedaremos con el valor sin procesar, como dijimos antes. Entonces, si quieres que algunas filas tengan una funcionalidad o renderizado especial, puedes usarlo dinámicamente, con mi selector de renderizador de celda. Cualquier renderizador que uses, aún puedes complementarlo con parámetros de renderizador de celda, como he hecho aquí. Entonces, por ejemplo, en, ¿estoy silenciado? Dios mío, echaré un vistazo. No creo que esté silenciado. ¿Alguien más puede escucharme? No para mí, no, genial. Woo, me alegra escucharlo. Entonces, lo siento por Joe, debe ser algo en tu extremo, me temo. Entonces, 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 hagamos en los parámetros de renderizador de celda estará disponible en las props. Si no especificas un componente y un renderizador para usar, la cuadrícula simplemente mostrará el valor sin procesar del dato adyacente. Espero que tenga sentido. Entonces, sí, lo siento, Joe, no estoy seguro de poder ayudarte. Si otras personas pueden escucharme, debe ser algo en tu extremo, me temo, pero no creo que pueda ayudarte, Joe, disculpas. Bueno, supongo que no puedes escucharme. Entonces, solo para resumir, describimos cómo puedes especificar un renderizador de celda. Todo lo que necesitas hacer es cell-renderer y luego tu renderizador, así que en este caso, MyRenderer así. También puedes tener renderizadores en línea, hola, así. Y finalmente, puedes tener renderizadores de celda dinámicos y puedes elegir diferentes renderizadores según 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 resumir, 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 control deslizante dinámico o ruedas giratorias. Cualquier cosa que React pueda renderizar en nuestros componentes, componentes funcionales o basados en clases, puedes renderizarlo dentro de la cuadrícula. El tamaño de los componentes afectaría obviamente el tamaño de la fila. Entonces, si tuvieras esos componentes con un botón de atleta, y si tuvieras 30 píxeles de altura, toda la fila tendría 36 píxeles de altura para mostrar eso, pero este punto es que cualquier componente de React que quieras renderizar en la cuadrícula, si es un componente de React válido, se puede renderizar en la cuadrícula. ¿Cómo se renderiza la celda si la línea es demasiado larga? De acuerdo, he respondido eso. Si tuvieras un componente, digamos, que estuviera mostrando un componente de varias líneas con imágenes y demás, llenaría esa altura. Entonces, por ejemplo, si tuvieras algo que estuviera mostrando una imagen de 100 píxeles de altura con un párrafo al lado, entonces toda la fila, esta columna, tendría esa altura, 100 píxeles de altura, con texto al lado. Entonces toda la fila tendría 100 píxeles de ancho. La altura de la fila está determinada por la celda más alta. Entonces, si todas las demás celdas de las filas tienen 20 píxeles de altura y el renderizador dinámico tiene 100 píxeles o más, tendrá 100 píxeles de altura, es bastante dinámico. Sí, Bruno, es dinámico. Sí, puedes anular eso. Puedes decir que quieres que la altura de tus filas sea absolutamente de 50 píxeles y que todo lo demás se recorte, por ejemplo, pero de forma predeterminada, será dinámico. Tengo aquí otro sorbo de agua simple.

De acuerdo, pasaremos a la siguiente sección. Y se trata de ir más lejos con los renderizadores personalizados. Y no, no se llama así, se llama filtros de confirmación. Entonces vamos a tocar esta sección, sobre Filtros. En las primeras secciones, te mostré cómo habilitar los filtros, y de serie con la Edición Enterprise, obtienes el filtro de conjunto como predeterminado, que es algo que veremos aquí probablemente. Entonces 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. Esto es solo para discutir, por ahora. Proporcionamos de serie tres filtros en la Edición Community. Nuevamente, la Edición Community es gratuita para que la uses, y comercialmente, no necesitas una licencia, y de serie, proporcionamos un filtro de texto, un filtro de números y un filtro de fechas. Así que vamos a ver cada uno de ellos. Voy a eliminar el código del renderizador, solo por simplicidad. Recuerda que el código está en. Si quieres repasar lo que he hecho, solo ve al repositorio de Github de la sección en la que estás interesado. Estará allí. Solo voy a eliminar este código para que podamos ver lo que estoy tratando de describir. Deja que esta red se vaya. Y ahí vamos. Así que volvemos a una Edición Community simple. Ahora no hay código de Enterprise aquí. Lo primero que vamos a ver es el filtro de texto.

Y eso es, si solo usamos el filtro true, dependiendo de, dame un segundo, Towson, proporcionaré el enlace. Espero estar pronunciando 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 de esa sección. De acuerdo, gracias, Oskander? Probablemente esté masacrando tu nombre, disculpa. Pero cada una de las ramas es una sección. Así que estamos en la sección cuatro, y mostrará el código. Entonces, por ejemplo, si estás tratando de trabajar junto conmigo y has cometido un error, después puedes ver el código que realmente escribí. Así que vuelve aquí.

De serie, si simplemente especificas filtro igual a true, usará el filtro predeterminado para el código que estés usando. Entonces, si estás usando la edición community, usará el filtro de texto. Y si estás usando la edición enterprise, usará el filtro de conjunto. Entonces, la mayoría de las veces, el filtro true es suficiente para la mayoría de las personas. Probablemente querrías usar el problema predeterminado. Los renderizadores no son de la edición enterprise. De hecho, la mayoría de lo que estoy describiendo aquí es de la edición community. Destacaré, y especificaré si algo de lo que estoy haciendo es de la edición enterprise, pero como dije al principio, la mayor parte de la charla, la mayor parte de esta masterclass es de la edición community. Destacaré si algo de lo que estoy haciendo es de la edición enterprise. Entonces, los componentes personalizados de cualquier tipo son de la edición community. Entonces, siempre que, si estás haciendo un componente personalizado de React y quieres usarlo en la cuadrícula, eso es gratuito, no necesitas una licencia enterprise para eso. La agrupación Rogue que te mostré agrupando por año y por país, eso era una función de la edición enterprise, por ejemplo. Pero todo lo demás que ves en esta cuadrícula, ahora, es gratuito, incluido el renderizador que viste antes. Todo eso es gratuito para usar. Sí, las filas son virtualizadas. De serie, puedes anular eso, pero sí, las filas son virtualizadas y las columnas también. Puedes anular eso, así que caggrid.com para obtener detalles sobre cómo anular eso, pero de forma predeterminada, sí, lo están. Y eso será, entonces el filtro tree será el filtro predeterminado. Es lo mismo que si hiciéramos agTextColumnFilter. Y pasaré por los tres que se proporcionan. Entonces, si hacemos eso y miramos el filtro, verás que no ha cambiado nada. Todavía podemos usar Mic o Michael o Jung para Jung. Y aunque esto es de la edición gratuita, de la edición gratuita, y a través de los tres filtros que vamos a describir son gratuitos, son muy potentes. Así que no pienses que solo porque es gratuito y se proporciona sin necesidad de obtener código enterprise, no son potentes. Estos son muy potentes y probablemente pueden llevarte muy lejos, a una nueva forma de aplicación antes de que necesites considerar un filtro personalizado o un filtro enterprise. Los filtros proporcionados son muy potentes. Así que consulta agigrid.com para ver lo que pueden hacer. Lo describiré brevemente aquí, pero son muy potentes y pueden hacer mucho más de lo que piensas. Entonces, en este caso, digamos que no queremos contenido. Queremos igual, exactamente igual. Podemos decir que eso no hace nada porque no es igual, no contiene, y ahora Michael Phelps está ahí. Entonces, y luego puedes proporcionar toda la funcionalidad. Entonces, digamos que queremos que contenga Michael eso me da todo con Michael, pero solo lo queremos si contiene maze. Y puedes hacer todo. Entonces Michael o maze, y como puedes ver, eso es solo el filtro de texto que puede hacer una gran cantidad de cosas. Así que echemos un vistazo al siguiente filtro que se proporciona de serie. Y este es el filtro de números. Nuevamente, esto es gratuito. Ninguno de esto es específico de la edición enterprise todavía. Si ves un error en la consola aquí, por cierto, eso no tiene que ver con la cuadrícula, es solo la recarga en caliente. A veces no se actualiza completamente. Entonces, si miramos el filtro de edad, verás que ahora hemos especificado un filtro de números, no uno de texto. Y es igual de potente que el filtro de texto, pero proporciona cosas que son sensibles al contexto. Por ejemplo, no proporciona contiene, pero proporciona mayor que, menor que e igual. Entonces podrías decir que es menor que 30 y mayor que 20. Y dinámicamente, todo, todas las edades de estos ganadores entre 20 y 30 están, así que dije igual, quiero decir mayor que. Entonces todas las edades entre mayor que 20 y menor que 30 se muestran. Y ese es el filtro de números. Entonces es similar al filtro de texto, pero realiza un filtrado apropiado para números. Y luego lo último, que no funcionará, y te mostraré cómo solucionarlo, es el filtro AG date column filter. Ahora esto proporcionará un filtro de fecha genial, pero desafortunadamente, esto no funcionará. Entonces echemos un vistazo al primero. Es 2408, 2008, 2408, 2008, pero no 2008. Y eso en realidad no funciona. Te darás cuenta de que la fecha no se filtró. Y la razón de eso es que el filtro de fecha espera que la data de la celda sea un objeto de fecha. Y la data que tenemos aquí del array, esta data aquí, como puedes ver, es solo una cadena. Entonces parece una fecha, pero en realidad es solo una cadena. Entonces, 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 solucionarlo más adelante. Ahora, vamos a usar dos, finalmente para mostrar dos filtros más de enterprise. Entonces vamos a habilitar. Estos son filtros de enterprise. Entonces necesitarías una licencia enterprise para esto, pero esto completa los filtros que proporcionamos de serie. Estos tres hasta ahora, el filtro de texto, el filtro de números y el filtro de fechas, esos son gratuitos y están en la edición community. Los dos filtros siguientes son de enterprise. Y no me detendré mucho en esto. Solo quería describir lo que hacen. Entonces, ya sabes, filtro de columna. Y el último es el filtro, filtro agmulti. Entonces, nuevamente, la advertencia en la consola, 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 se ve en Excel, algo similar, y proporciona un conjunto único de todos los valores en esa columna. Entonces, por ejemplo, estos países se extraen de los datos de la fila. Entonces, si tuvieras países adicionales o menos, solo esos países aparecerían aquí. Puedes seleccionar, deseleccionarlos todos, y luego seleccionar uno por uno o seleccionarlos todos. O también puedes elegir algo aquí y presionar enter, lo cual creo que es bastante genial, y filtrarlo. Entonces, por ejemplo, solo te mostraré lo que hice nuevamente.

Seleccionaré, deseleccionaré todo. Si escribo L-A-N-D, se filtrará esta lista, y podría seleccionar manualmente algunos de estos si eso es lo que quiero. O puedo simplemente 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 de forma programática y dinámica. 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 combina dos tipos de filtros. Proporciona el filtro de texto. Lo siento, el filtro de números y un filtro de conjunto. Puedes ver esta línea horizontal aquí te permite combinar dos filtros. Y echa un vistazo a edugrid.com, la documentación de 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. Entonces podrías decir, y esto no es muy ú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. Lo voy a usar en deportes. Creo que eso es más útil. Ahí vamos. Entonces queríamos que contenga la letra A. Y solo vale la pena señalar que lo que escriba en la parte superior reducirá automáticamente la sección inferior. Entonces, si escribo X, por ejemplo, solo el boxeo está disponible ahora. Entonces filtra la selección a continuación. Entonces, lo que hagas en la parte superior reduce la selección en la parte inferior. Entonces, si hicimos A, solo se mostrarán los deportes con la letra A y reducirá lo que se muestra. Y luego antes podríamos tener algo como 10 y se reduce aún más, aplicaría el filtro con un enter. Entonces sé que es bastante breve en estos dos, el filtro SID y el multi-filtro. Pueden hacer una gran cantidad de cosas sin tener que escribir ningún código personalizado con un poco de configuración. De forma predeterminada, hacen una gran cantidad como acabas de ver, pero con un poco de configuración los filtros de Enterprise que he descrito, el filtro SID y el multi-filtro así como los tres gratuitos, los filtros de texto, número y fecha pueden hacer una gran cantidad de funcionalidad de forma predeterminada. No lo describiré aquí. Solo quería mostrarte lo que eran y cómo podrías usarlos, pero consulta Agigrid.com para la documentación de cómo puedes aprovechar realmente estos filtros potentes de forma predeterminada.

Entonces voy a eliminar los filtros de Enterprise nuevamente. Volvemos a la aplicación completamente comunitaria. No estamos usando ninguna funcionalidad de Enterprise aquí. Digamos que quieres anular un debounce, quieres ralentizar, quieres que los usuarios tengan tiempo para pensar antes de que se aplique un filtro, puedes agregar un debounce, o simplemente puedes complementar el filtro en primer lugar. Entonces, 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 puedes imaginar, 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. Entonces, en nuestro caso, queremos cambiar el debounce para que sea cero. Entonces, para este filtro, que es la edad, queremos que, se aplique de inmediato, por lo que no hay cambios, lo que escriba se accede de inmediato. Si quieres simplemente ralentizarlo, puedo cambiarlo a dos segundos. Entonces ahora, si, lo que escriba allí, no responderá durante dos segundos. Entonces, escribo 23, uno, dos, boink. Entonces, lo que escriba allí, ahora, esperó el debounce de 2000 milisegundos, que son dos segundos antes de aplicar. Hay muchas cosas que puedes usar para extender los filtros y describiré los botones en un segundo. Pero nuevamente, consulta 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á presente? Sí. Entonces, sí lo hace. Entonces, no entraré en esto demasiado, pero lo que estamos usando aquí para Agigrid community, Agigrid React y Agigrid Enterprise son todas las funcionalidades, todo lo que incluimos y algunas cosas serán eliminadas por tree shaking. Pero si realmente quieres maximizar o minimizar, debería decir tu tamaño de paquete, entonces en Agigrid.com, ve a ver la construcción y las herramientas y mira los paquetes versus los módulos. Lo que estamos usando, sí, con Agigrid Enterprise en la comunidad, lo siento, en la edición comunitaria, son los paquetes y el tree shaking es compatible, pero de forma predeterminada, 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 ver la documentación de módulos y en los módulos, solo pones el módulo en el que estás interesado. Por ejemplo, si estás usando el código principal, eso se incluirá de forma predeterminada. Pero si solo quieres ver el código CSV y la funcionalidad del portapapeles, solo pondrías esos dos módulos, y automáticamente, de forma predeterminada, tu paquete se reducirá porque no estás incluyendo todo el código y el código que no se está utilizando. Sí, el tree shaking es compatible, pero si quieres maximizar el tamaño o reducir el tamaño de tu paquete, ve a ver 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 Agigrid? Sí, y lo describiré en esta sección un poco más adelante. Así que espera eso. ¿Qué pasa con el caso de uso de fecha donde no puedes cargar todos los datos de una vez? Hago más grande que los datos. Absolutamente. Entonces, 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 representan. Entonces, todos los datos están en memoria y solo se representa parte de los datos 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. Entonces, lo que puedes hacer allí son diferentes tipos de modelos de fila. No tocaré esto en esta sección, pero si miras los datos de fila del lado del servidor, puedes obtener varias opciones. Entonces, para la versión gratuita, puedes ver el desplazamiento infinito de filas. Echa un vistazo a la documentación para eso. No puedo recordar dónde está eso aquí. Modelo de fila infinita. Entonces esa es la versión gratuita. Y esto es algo, no entraré en eso, pero el modelo de fila infinita es algo que puedes usar en la edición comunitaria como se implica la fecha, datos de fila infinita. Obtiene fragmentos de datos a medida que avanzas. Y luego también hay modelos de fila de enterprise que son más potentes como el renderizado del lado del servidor y el modelo de fila de la ventana de visualización. No lo cubriré aquí, pero tienes opciones en la edición comunitaria para eso. Toma la versión gratuita. Entonces pueden ver el modelo de fila infinita. Y si estás en la versión de enterprise, tienes aún más capacidad. Entonces no tienes que poner todos tus datos de una vez y puedes usar la paginación como otra opción. Entonces 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 representar diferentes valores en función de la celda actual. Pero, ¿qué pasa si quieres cambiar el valor en una celda en función de las tasas? Sí, absolutamente. Entonces sí, así que ya no tengo el código en la pantalla, pero recuerda que puedes tener un selector de renderizador de celdas y eso se llama por fila por celda y eso pasa por 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. Entonces tienes todos los datos, tienes todo el estado de la cuadrícula disponible para ti a medida que se representa la celda, a medida que se elige el renderizador.

Luego, una vez que hayas elegido un renderizador, obtienes los mismos data en tu renderizador y tal vez puedas mostrar un fondo rojo si los data son negativos y un fondo verde si los data son positivos. Entonces, en varias etapas, puedes determinar qué renderizador mostrar y dentro del renderizador puedes mostrar lo que mostraste según los data. Entonces, antes de que los data se muestren realmente, tienes una serie de puntos en el ciclo de vida para elegir qué se muestra y cómo se muestra. Espero que eso tenga sentido. Hubo mucho allí.

Bien, así que he respondido esas preguntas. Así que volvemos a donde estábamos. Entonces, he agregado un Debounce. Ahora digamos que queríamos que este Debounce de 2000 milisegundos se aplique a todo. No tenemos que especificarlo nuevamente en cada columna. Podemos proporcionarlo en la definición de columna predeterminada y se aplicará a todos los campos. Entonces, esto que contiene 2000, uno, dos. Ahora filtra. Entonces, nuevamente, cualquier cosa que puedas especificar en una columna, individualmente, puedes especificarlo en la definición de columna predeterminada y se aplicará a todas las columnas. Entonces, reducirá la cantidad de código repetitivo que tienes que hacer o quieres hacer. Entonces, vamos a eliminar eso. No queremos un Debounce de 2000 milisegundos en nuestro caso. Lo último que quiero ver aquí con los filtros, excepto antes de llegar al estado del filtro, que es una pregunta anterior, son los botones, porque creo que son bastante útiles. Entonces, volvamos a ver esto nuevamente. Tenemos parámetros de filtro de vuelta a edad. Y en este caso, queremos hacer botones. Y estos son cuatro botones. Hablando prácticamente, probablemente solo quieras mostrar dos botones en un filtro a la vez. Vamos a especificarlo en la edad. 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. Entonces puedo escribir 25 y el Debounce se ignora. El Debounce se ignora aquí. Incluso si lo especificaste, y no sucederá nada hasta que haga clic en Aplicar. Y puedo borrar cualquier filtro actual y luego volver a aplicarlo. Entonces, solo para repetir eso, si quiero tener 25, no sucede nada hasta que haga clic en Aplicar. 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 rechazos, o algo así. Solo para que se aplique cuando hagas clic en Aplicar. Cuando hago clic en Limpiar, borrará toda la interfaz de usuario del filtro, pero no el filtro actual. Entonces, si miras el fondo, verás un pequeño filtro, un símbolo de embudo, el símbolo de filtro. Entonces el filtro todavía está en su lugar, aunque hemos borrado la interfaz de usuario con Limpiar. La interfaz de usuario borrada no se aplicará hasta que hagamos clic en Aplicar. Entonces, lo que hayas especificado en el filtro se aplicará con Aplicar. Limpiar lo borrará, pero no lo aplicará hasta que lo vuelvas a filtrar. Espero que eso tenga sentido. Veamos los otros dos botones que tenemos aquí. Tenemos Cancelar y tenemos Restablecer. Entonces, nuevamente, solo para recordarte que este mensaje que ves aquí sobre la lista de autos, no es un problema de Agigrid. Es un problema de recarga en caliente, así que puedes ignorarlo. Ahora puedes ver cuatro botones. Ahora, como dije antes, realistamente no mostrarías los cuatro botones. Probablemente solo mostrarías dos botones. Probablemente Aplicar y Limpiar sean los más comunes. Entonces ya he descrito Aplicar. No sucederá nada hasta que hagas clic en Aplicar. Limpiar borrará el filtro actual pero no lo aplicará hasta que hagas clic en Aplicar. Cancelar volverá atrás a lo que estaba. Entonces, si cambio esto a 29 y hago clic en Cancelar, restablecerá la interfaz de usuario a 25 y no hará nada en realidad. Entonces, ¿te das cuenta, por ejemplo, si tuviera un filtro realmente largo, digamos que lo apliqué y cometí un error y estaba haciendo algo más, y pensé, oh dios mío, no sé qué tenía antes. No quería hacer eso, puedes hacer clic en Cancelar y eso simplemente restablece la interfaz de usuario a lo que es el filtro actual. Entonces, el filtro actual es A igual a 25. Y si escribo eso, y no quiero cambiar el filtro, solo quiero restablecer la interfaz de usuario a lo que es el filtro subyacente, puedo hacer clic en Cancelar. Restablecer es el último, borrará la interfaz de usuario y lo aplicará. Entonces es como dos botones en uno. Restablecer hará lo mismo que limpiar y aplicar. Restablecer hará limpiar y aplicar en un solo paso. Entonces lo borra y lo aplica y no hay más filtro. Espero que eso tenga sentido. Aplicar lo aplica, limpiar borrará la interfaz de usuario, pero no lo aplicará. Cancelar hará cualquier cambio que hayas hecho y volverá a lo que es el filtro actual si lo hay y restablecerá la interfaz de usuario actual y aplicará eso. Entonces, borrará el filtro actual. Eso es mucho para asimilar con solo hablar, pero si no estás seguro, si quieres un recordatorio, ve a agigrid.com y describe los botones de manera más clara de lo que probablemente he hecho, quiero decir, cómo usarlos. Pero nuevamente, realistamente, probablemente solo tendrías 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, entonces vamos a eliminar estos botones y ahora volvamos a ver por qué, recuerdas, el filtro de Día no funciona porque el filtro de Día espera objetos de Día en los datos de la fila y no tenemos fechas en los datos de la fila, en realidad solo tenemos cadenas sin procesar. Entonces lo que vamos a hacer es proporcionar un comparador y voy a copiar este código para no tener que escribirlo, es demasiado para escribir. ¿Dónde está? Oh, puedo ir a GitHub. Aquí vamos, así que estoy copiando esto solo porque es demasiado para escribir y si lo escribiera a mano probablemente cometería un error. Así que vamos a ver, espero haberlo hecho correctamente si este filtro funciona. Y describiré lo que he hecho y por qué lo he hecho, solo voy a comprobar que funcione primero. Ahora nuestro filtro funciona. Entonces 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. Entonces 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. Tal vez sea algún dato extraño que necesitas pasar 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, así que en este caso vamos a tomar la cadena y convertirla en un objeto de fecha y luego vamos a comparar el valor de la fecha. No voy a dedicar mucho tiempo a este comparador en sí. El punto es que puedes anular lo que se compara al proporcionar un comparador mediante los parámetros del filtro. Así que ahora todos los filtros funcionan. Tenemos un filtro de número, filtro de texto, filtro de fecha y luego te mostré el filtro de conjunto y el multi-filtro antes. Eso cierra el ciclo, creo, en todos los filtros. Gracias.

¿Funcionaría la virtualización, el ordenamiento, el filtrado en un modelo del lado del servidor? Sí, pero la responsabilidad recae en ti, el desarrollador. 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 y solo estás extrayendo 1,000 filas, la cuadrícula obviamente no puede ordenar o filtrar datos que no conocemos. Entonces, ¿qué sucedería allí? Habría una serie de eventos. Si un usuario hace clic en ordenar o filtrar, llamaríamos a ganchos o eventos a los que tú, como desarrollador, escucharías y luego actualizarías desde la fuente de datos remota, los datos. Por ejemplo, antes estabas mostrando todas las filas de A a C y el usuario quiere mostrar todas las filas de S a X, te lo diríamos, eso es lo que el usuario quiere hacer, obtendrías las filas de S a X y las devolverías a la cuadrícula. Entonces, esto traslada 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, debes hacerlo en tu parte porque obviamente la cuadrícula no puede filtrar datos que no conoce. Espero que tenga sentido. Echa un vistazo a la documentación para ver ejemplos reales de trabajo. Tenemos repositorios completos en GitHub que te muestran cómo hacer esto. ¿Vamos a cubrir la edición en línea con una edición de la comunidad? Sí, puedo hacer eso brevemente. Puedes tener editores bastante complejos, que no vamos a cubrir en esto, pero para hacer que un campo sea editable de forma predeterminada con una simple edición en línea, todo lo que tienes que hacer es establecer editable en true. Entonces, por defecto, eso es todo lo que tienes que hacer, vamos a hacerlo con la edad, ahora si hago clic en ella, es editable. Entonces, si hago clic en Michael Phelps, no sucede nada, hago clic en enter o doble clic, no sucede nada. Si hago clic en edad, ahora es editable y puedo cambiarlo a 29. Así que todo lo que hice fue establecer editable en true. Editable también puede ser una devolución de llamada, puedes tenerlo por fila y por celda, tal vez quieras que algunas celdas y algunas filas sean editables y otras no, como antes, te pasaremos como parámetro el estado de la cuadrícula, el estado de la celda, las API y todas esas cosas, y puedes determinar dinámicamente qué es editable. Y finalmente, puedes tener un editor de celdas y puede ser un componente de React. Tu componente de React, que no vamos a describir hoy. Pero podría ser como lo mostramos con el editor rojo, lo siento, el renderizador anterior, y un filtro que describiremos a continuación, puedes tener un editor de celdas, lo siento, un editor de celdas como un componente. Espero que eso responda esa pregunta. Entonces, en el caso de uso más simple, solo dice editable, y luego la celda será editable, supongo que eso es lo que quieres decir con edición en línea. De acuerdo. Entonces, la siguiente sección que vamos a ver son los estados de filtro, que fue una pregunta que tuvimos antes. Entonces, cada vez que realices una operación de filtro o ordenamiento, o casi cualquier cosa, puedes obtener los estados del filtro o el estado del filtro, es posible que desees decir que un usuario ha filtrado en tres columnas de una manera específica y quiere guardar eso. Entonces, cada vez que abran la aplicación, se restaurará, es posible que desees guardar los estados, guardarlo en un backend. Y cuando el usuario vuelva a iniciar sesión, cargar los estados y devolverlos. Entonces, describamos cómo podemos obtener los estados y qué podemos hacer con ellos. Entonces, para guardar los estados en nuestro caso, no los guardaremos en un backend, solo los usaremos como referencia. Relativo a nuestro perfil. y vamos a tener, vamos a juntar esto para que puedas ver el código. No está muy lejos de donde lo estamos usando. Entonces, tenemos una referencia que podemos usar para almacenar los datos, y vamos a tener botones para guardar y aplicar. Y vamos a agregar los botones en esta sección en un minuto. Entonces, digamos, en el botón guardar, veamos cuántos errores cometo mientras estoy codificando en vivo aquí. Y describiré línea por línea lo que he hecho. Entonces vamos a usar esta devolución de llamada en un segundo, pero lo que sí sabemos es que estamos usando la referencia de la cuadrícula que usamos anteriormente si recuerdas, en el componente de la cuadrícula. gridRef.current.api nos da la API de la cuadrícula en lugar de la API de la columna y llamamos a getFilterModel. 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. En el clic, en el botón guardar, guardar filtro. En realidad no estamos guardando nada todavía, pero podemos ver la salida. Entonces, como recordatorio, vamos a obtener el modelo de filtro actual y lo vamos a mostrar en console.log. Entonces, si mostramos eso, verás, no 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 nuevamente, 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 getFilterModel o setFilterModel. No tienes que hacerlo, la cuadrícula proporcionará cuál es el estado actual, puedes guardarlo y restaurarlo. Puedes manipularlo si quieres, pero normalmente no tendrás que hacerlo. Y no tienes que entenderlo, pero el punto es que esto mostrará el estado actual del filtro. Podemos aplicar otro filtro y si volvemos a mostrar el estado, veremos que el objeto JSON tiene dos edades, con edad y año. Entonces, en realidad no estamos guardando el filtro, como se especifica, solo lo estamos mostrando para que puedas ver qué está haciendo el modelo de filtro. Entonces, guardemos eso con, guardarFiltro.current = filterModel. Entonces, en la referencia que proporcionamos anteriormente en current, vamos a guardar el modelo de filtro actual. Agreguemos un botón para realmente usar esto. Entonces, lo que tenemos aquí ahora es pushMe, que comentaré solo por simplicidad para que no lo veamos. Entonces, tenemos estados de filtro guardados, que cada vez que hago clic, se guardará en nuestra referencia de cuadrícula, el estado de la cuadrícula, y aplicar, lo sacaremos del estado actual del filtro y lo aplicaremos. Así que probémoslo. Apliquemos mitch allí y luego el país contiene Australia. Entonces, el estado actual es ese, me equivoqué al 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. Entonces, tenemos Australia y Austria y cualquier nombre de atleta que contenga mitch. Entonces, si guardamos eso, digamos que cambiamos el filtro ahora. Vamos, no queremos mitch, queremos tim y no queremos ningún filtro de país. Digamos que no tenemos ningún filtro de país. Entonces cambiamos el filtro. Lo guardamos anteriormente. Teníamos, teníamos un filtro de atleta y un filtro de país. Y ahora lo hemos cambiado, para tener solo atletas con el nombre de Tim. Ahora, digamos que el usuario quiere, ha realizado cambios y piensa, está bien, quiero volver a donde estaba antes. Podemos aplicar los estados de filtro. Y ahora los filtros vuelven a estar como 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 un JSON data, y puedes convertirlo en una cadena y tal vez guardarlo en una base de datos y luego convertirlo nuevamente 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 realistamente, lo guardarías en un backend de nuestra base de datos. Y luego, para aplicar, hacemos lo contrario. Obtenemos el modelo que guardamos en la referencia y lo volvemos a aplicar a la cuadrícula usando los métodos de la API. Eso, a grandes rasgos, es cómo obtendrías el estado de los filtros en toda la cuadrícula y cómo los restablecerías. Puedes manipular ese JSON data si quieres, la mayoría de las veces no lo harás, pero puedes y luego puedes obtenerlo y establecerlo usando métodos de la API. Antes de continuar, espero que eso responda la pregunta, quienquiera que haya tenido una pregunta sobre los estados de filtro, espero que eso responda tu pregunta. Es bastante fácil.

Quiero decir, api.getFilterModel obtendrá este estado actual de los filtros y getSetFilterModel lo establecerá según lo que desees. Veamos las preguntas aquí. Y luego, necesitamos agregar, saveCallback. Bueno, si te refieres a la edición, no estoy seguro a qué te refieres, lo siento. Charles, cuando dices, entonces necesitas agregar saveCallback, tal vez puedas preguntar de nuevo y ampliar un poco sobre lo que estás preguntando allí. Supongo que es lo mismo si tienes algunas celdas editadas y quieres guardar todos los cambios en una sola acción. Sí, por defecto, la cuadrícula, cuando el usuario ingresa a una celda de edición con 'editable' en true y hace clic en enter, los datos JSON subyacentes se actualizarán con lo que el usuario aplique. Puedes escuchar eventos y cambiar eso. Por ejemplo, si estás usando algo como Redux, es posible que no desees cambiar los datos subyacentes, sino enviarlos a la herramienta de Redux. Puedes escuchar los eventos de guardado y no guardarlos. Dile a la cuadrícula que no guarde los datos en el editor y en su lugar envíalos, actívalos para eventos o Redux y luego volverán a la cuadrícula. Entonces sí, podrías hacerlo. Y dependiendo de tu caso de uso, probablemente lo harías. Supongo que puedo usar esto solo para múltiples estados en el historial para deshacer, absolutamente. De hecho, la cuadrícula tiene funcionalidad de deshacer y rehacer. Por lo tanto, siempre puedes consultar la cuadrícula, la documentación para ver cómo hacerlo. Pero si quieres hacerlo tú mismo, tal vez sea muy complicado, deshacer y rehacer, sí, absolutamente. Para cada operación de edición o cada operación de filtro, podrías guardar los estados usando los eventos. Escucharías los eventos, guardarías el estado de los eventos donde quieras guardarlo. Y luego podrías retroceder o avanzar en ellos según lo que el usuario esté haciendo en la cuadrícula, sí. Acabamos de mostrar el estado del filtro aquí, pero puedes obtener estados de origen y todo tipo de estados. Los más comunes son los estados de edición, los estados de la cuadrícula y los estados de los datos y los estados de filtro, pero usando eventos podrías capturar cualquier cosa y aplicar eso como tu estado. De acuerdo, espero que tenga sentido. Sigamos adelante. A continuación, veremos cómo aplicar filtros. Bueno, en realidad, otra cosa que puedo hacer aquí. Podemos agregar, digamos que quieres borrar los estados, puedes hacerlo en un botón. Sí, voy a guardar esto. No necesitamos un modelo de filtro en este caso, solo lo escribiré y describiré lo que he hecho. Entonces, quiero decir, en este caso no importa mucho, pero. Sí, aquí vamos. Tenemos Guardar, Aplicar y Borrar. Entonces, Guardar hace lo que hemos hecho antes, digamos que tenemos 25 y, ups, no atleta, eso es Mitch. Entonces, ¿en qué estoy filtrando allí? ¿Cómo agregas esto? Lo siento, cometí un error. Contiene Mitch. Entonces, el usuario ha realizado algunos filtros y luego ha realizado algunos filtros o ella ha realizado algunos filtros y quieres proporcionar una funcionalidad donde simplemente restableces todos los estados de filtro o estados de ordenamiento, puedes borrarlo y esto se aplica a todos los estados, estado de filtro y estados de ordenamiento. Puedes aplicar un modelo vacío, que es simplemente un objeto vacío y eso eliminaría cualquier ordenamiento o filtro que se haya aplicado. Solo un truco útil que ocasionalmente es útil. Lo último de lo que quería hablar sobre los filtros es el recorte. A veces, dependiendo de tu aplicación y dependiendo de dónde lo veas, te encuentras con un caso en el que el filtro puede recortarse. Entonces, en este caso, estamos cambiando la altura de la cuadrícula o la cuadrícula principal a 300 píxeles. Y eso se ve bien. Pero si miramos, si usamos algo como set filter, y solo lo muestro, lo muestro para fines de demostración. Si miramos y quitamos el filtro flotante. Entonces, lo que estoy tratando de describir aquí es, a veces verás que el menú de filtro, el menú puede recortarse, espera, ¿qué he hecho? De acuerdo. Entonces voy a establecer el filtro predeterminado, que sería un filtro establecido. No te preocupes por el filtro que estoy usando aquí, eso no es lo que estoy tratando de demostrar. Entonces necesito que sea aún más pequeño. Hagámoslo 150. Ahí vamos. Como puedes ver, el menú de filtro se está recortando porque la cuadrícula solo tiene 150 píxeles para jugar. Se está recortando en las alturas del div principal contenedor. Y esto puede suceder si estás en un dispositivo móvil o si el usuario reduce el tamaño del navegador a un tamaño muy pequeño y lo que puedes hacer para solucionarlo es, por defecto, los elementos emergentes o lo que llamamos elementos emergentes serán el div principal. Pero en un caso de uso como este, donde tu cuadrícula es bastante estrecha y bastante pequeña y aún quieres mostrar el menú de contexto completo o el menú de la cuadrícula y el menú de filtro, puedes especificar elementos emergentes. Y esto se usa específicamente para los filtros principales. Pero también es útil en otros lugares, como el menú de contexto. He dicho que el documento body sea el elemento emergente y verás ahora que el menú emergente se muestra completamente y se sale del div principal. Es una pequeña cosa, solo quería resaltar porque puede ser un problema, puede ser un obstáculo. Y todo lo que necesitas hacer es especificar el elemento emergente. Por defecto, probablemente quieras usar el documento body pero es posible que desees usar algunos otros elementos. Espero que tenga sentido, si ves que los menús se recortan echa un vistazo a los elementos emergentes y probablemente quieras establecerlo en document.body de forma predeterminada si tienes cuadrículas muy estrechas o muy delgadas. ¿Podrías echar un vistazo específicamente a las preguntas? Patricia ha preguntado, ¿podrías tener una búsqueda de nivel superior fuera de la tabla de la cuadrícula? Sí, hay algo llamado búsqueda rápida, filtro rápido y un filtro rápido te permite externalizar el filtrado. Así que espero que puedas ver mi navegador aquí, tengo un pequeño cuadro de texto aquí y puedo hacer una búsqueda fuera del cuadro y esto podría hacer más de lo que estoy mostrando aquí pero hay una funcionalidad llamada filtros rápidos así que echa un vistazo a eso en la documentación y eso te permite externalizar tu búsqueda fuera de la cuadrícula. ¿Puedes colocar los filtros flotantes encima de los encabezados de tabla? No, no puedes de forma predeterminada pero podrías crear, así que si necesitas tal vez tus diseños de interfaz de usuario y especificar eso, sabes que el filtro flotante tenía que estar en la parte superior y está en la parte inferior, podrías crear un encabezado personalizado, probablemente sería un trabajo considerable pero podrías crear un componente personalizado de React que haga eso por ti pero de forma predeterminada no, los filtros flotantes están según recuerdo, debajo de los encabezados reales. Con este filtro emergente a pantalla completa en un dispositivo móvil ¿cómo se ve la cuadrícula en el móvil? Entonces, sí, sí, eso funcionaría en un dispositivo móvil pero debes tener cuidado al tener datos tabulares en un navegador, en un dispositivo móvil y esto no es solo un grado, esto es cualquier dato tabular. Probablemente no quieras mostrar este tipo de cosas en un déjame mostrarte de nuevo a tres, 500 en un dispositivo móvil. Probablemente no quieras mostrar muchas columnas como tenemos aquí y muchas miles de filas como tenemos aquí en un dispositivo móvil. Probablemente quieras mostrar una vista truncada y menos columnas. Entonces esto se convierte en más una cosa de diseño. Algo de lo que probablemente quieras hablar con tu equipo de UX o si eres el equipo de UX tienes que pensarlo. Puedes mostrar datos tabulares y eso es útil pero no quieres mostrar muchas columnas y muchas filas porque aunque el usuario puede desplazarse y eso probablemente está bien en una tableta en un dispositivo móvil real, sí, puedes mostrarlo y sí, el menú se mostrará si filtras. Probablemente no sería una gran experiencia de usuario. Entonces, cuadrículas más pequeñas y luego considera un diseño diferente de esta decisión en dispositivos pequeños.

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

Ok, ¿qué íbamos a ver a continuación? Ok, lo último que vamos a ver hoy llegando a las dos horas, es sobre, este taller fue planeado justo cuando lleva alrededor de dos horas. Así que nos vamos a extender 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 seguirlo. Pero lo último que vamos a ver son filtros personalizados. Así que hemos visto lo que Agigrid proporciona por defecto, 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, echaré un vistazo a agigrid.com para obtener la documentación completa sobre lo que los filtros pueden hacer. Pero si quieres hacer algo especial o algo personalizado, como hicimos con los renderizadores, puedes tener un filtro personalizado.

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. Permíteme compartir ese enlace rápidamente. Ahí lo 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 de filtros personalizados en este momento. Así que no voy a intentar escribir esto. Lo voy a copiar y luego lo revisaré y describiré lo que estamos haciendo. Entonces, como hicimos antes con los, como hicimos antes, vamos a tener un componente de React componentes personalizado, como hicimos con los renderizadores, pero esta vez, vamos a tener un componente un poco más complicado y esta vez lo haremos para los filtros. Entonces, hay dos formas de crear componentes en este momento en React. Puedes agregar componentes funcionales, como un gancho, que vamos a demostrar aquí, o componentes basados en clases. Si estás usando un componente funcional, hay algunos métodos del 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 reenvío y un uso de manejo imperativo. No voy a entrar en mucho detalle sobre cómo funcionan. Nuevamente, ese es un tema específico de React, así que echa un vistazo a la documentación de React si quieres saber. Pero en pocas palabras, estos métodos aquí que he resaltado, isFilterActive, doesFilterPass, getModel y demás, son métodos del ciclo de vida específicos del filtro que la cuadrícula necesita poder llamar en el componente. Y para que la cuadrícula pueda verlos, o para que cualquier componente pueda ver estos métodos, necesitas exponerlos a través de un uso de manejo imperativo. Si estás usando un componente basado en clases, no necesitas usar reenvío y uso de manejo imperativo. Los métodos simplemente se expondrán por defecto. Espero que tenga sentido, pero en pocas palabras, cualquier método que quieras exponer a la cuadrícula debe estar dentro de un uso de manejo imperativo. Todo lo demás que no esté en uso de manejo imperativo es efectivamente invisible para la cuadrícula. Y eso es bueno para la encapsulación y demás. Entonces, cuando estés escribiendo un filtro personalizado, debes 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 indefinido y no haremos nada con setModels. Así que podemos ignorarlos por ahora. Aún necesitamos proporcionarlos, pero la cuadrícula los llamará cuando ocurran cosas. Pero por ahora no haremos nada con ellos. 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. Entonces, para este filtro de año, vamos a comprobar si este estado de filtro no es igual a apagado. Entonces, si de forma predeterminada el valor del estado de filtro es apagado, y si está apagado, el filtro está apagado. Si el filtro es cualquier valor que no sea el estado del filtro, en otras palabras, si es un año, llamará a este filtro por fila. Entonces, por fila, en nuestro caso particular, lo hemos codificado directamente, y vamos a comprobar el valor del año, y si es 2008, funcionará. Entonces, en nuestro filtro hemos creado dos entradas, un botón de radio, y el filtro será encendido, o estará apagado. Y si el usuario hace clic en apagado, el estado del filtro será apagado. Si el usuario hace clic en encendido, el estado del filtro será encendido. Recuerda, tenemos un filtro simple donde el valor está simplemente codificado, y está codificado porque solo quiero hablar sobre los parámetros o props que suceden aquí. Y tenemos dos escuchadores para esos botones. Uno establecerá el estado del filtro, y otro establecerá el estado del filtro en encendido, y otro establecerá el estado del filtro en apagado, así que tenemos un filtro, pero no estamos haciendo nada con él. Vamos a importarlo. Voy a eliminar Enterprise, no lo necesitamos por ahora. Y voy a eliminar los otros filtros por simplicidad. Entonces, importamos, hemos importado el filtro de año, y lo vamos a aplicar aquí. Así que recuerda que antes, para usar el filtro predeterminado, 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 echemos un vistazo a nuestra aplicación. Si actualizamos eso solo para asegurarnos. Entonces, aquí en el navegador, puedes ver los resultados de nuestro filtro de año aquí. Tenemos los dos botones, encendido y apagado. De forma predeterminada está apagado. Y luego, de forma predeterminada, el filtro no está activo. Puedes decir que el filtro está activo porque no hay un pequeño símbolo de filtro aquí. Si hacemos clic en encendido, verás que la fila está filtrada. Puedes ver que apareció el pequeño símbolo de embudo porque isFilterActive será verdadero porque el estado del filtro no es igual a apagado. Y se aplicó el filtro. Nos saltamos un paso, disculpas. El filtro solo se aplicó debido a esta línea que he resaltado en el navegador, en el IDE. Entonces, en la parte de los props del filtro, hay un método llamado filterChangedCallback, y eso se pasa a esta 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 esta devolución de llamada, filtro callback. Entonces, en este efecto, cada vez que cambia el estado del filtro, en otras palabras, si lo encendemos o apagamos, llamamos de vuelta a la cuadrícula. Básicamente le estamos diciendo a la cuadrícula, eh, el filtro ha cambiado, por favor actúa en eso. Así que cada vez que cambiamos el estado del filtro, llamamos a filterChangedCallback en los props, y la cuadrícula llamará, ¿está el filtro activo? Y si está activo, ¿doesFilterPass por fila? Ok, Matilda también ha preparado el enlace, gracias.

Sí, y luego vamos a devolver la llamada. Voy a describir lo que he hecho aquí. Entonces, simplemente lo probaré, y luego te guiaré a través de lo que he hecho. Presióname. Así que, mi FiltroEspecial. Como puedes ver en la parte superior, hice clic en Presióname. Y luego el método especial personalizado que hemos expuesto en el filtro se puede llamar. Entonces, lo que esto está demostrando es que cuando tienes un componente React personalizado que vas a colocar en la cuadrícula, puedes exponer ciertos métodos si quieres. No es obligatorio, solo es opcional. Y lo que expones luego se puede llamar. En primer lugar, puedes obtener las instancias de filtro de esta manera, obtener instancia de filtro. Pasas la columna en la que estás interesado, esa es la clave. En este caso, lo vamos a llamar en year. Asincrónicamente, la instancia se te devolverá del filtro de columna en su lugar. Y luego puedes hacer cosas en ese método. Puedes hacer lo que quieras exponer. En nuestro caso, estamos exponiendo mi acción de filtro especial. Esto no es común, pero ocasionalmente es útil hacer algo. Así que podrías tener botones externalizados y tal vez quieras hacer cosas especiales en tu filtro o tus editores o renderizadores para cambiar el color o establecer un valor predeterminado o algo así. De cualquier manera, puedes acceder a los componentes personalizados puros exponiéndolos en useImperativeHandle. Y luego puedes llamarlos usando getFilterStage. Y luego tienes, obtener estado del editor y así sucesivamente, obtener instancia del editor y instancia del encabezado. Tienes todo tipo de cosas. Esa es solo una forma de agregar funcionalidad personalizada y poder llamarla en tu cuadrícula. Lo siento, en tus componentes.

Lo último que voy a describir y lo último de lo que hablaremos hoy fue otro método. Entonces, 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 getModelAsString. Y lo que esto te permite hacer es convertir en formato de cadena cualquier estado de filtro que tengas. Por ejemplo, si tienes un filtro que tiene un dial giratorio y no puedes mostrarlo realmente en un filtro flotante, tal vez quieras hacer un conjunto. Tienes el filtro como una rueda giratoria y luego el valor elegido en el filtro flotante quieres que muestre solo un valor simple. Cómo lo harías es implementar getModelAsString, devolver lo que sea que el modelo sea como una cadena. Entonces, si el estado del filtro es igual a desactivado devuelve una cadena vacía, de lo contrario, devuelve el estado del filtro. Y luego, si vamos a la columna, podemos decir que el filtro flotante es verdadero. No tenemos filtro, así que establezcámoslo en 2004, 2006, 2008. En este momento lo estamos mostrando exactamente como 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 complejo y quieres reducirlo a un valor de cadena simple. Podrías tener algo como mi valor de filtro, eso probablemente es demasiado largo. Y luego puedes ver que dice, valor de filtro 2004. Entonces, si tienes un valor complejo en el filtro que no tiene sentido mostrar en este filtro flotante, puedes reducirlo a una cadena simple y cambiarlo a un filtro. Así que solo para recordarte, eso es getModelAsString y eso es muy útil cuando vas a usar este filtro flotante en conjunto con un filtro personalizado.

Eso es todo lo que he cubierto. Todo lo que quería cubrir hoy. Pero nos hemos extendido un poco, unos 25 minutos, no está mal. Esperaré aquí y revisaré esta llamada ahora solo para ver si hay alguna pregunta. No hay preguntas en esta llamada. Creo que algunas personas tuvieron problemas para unirse a esta llamada. Pero espero aquí otros cinco minutos. Si ustedes o ustedes o simplemente las personas en general quieren hacer preguntas, esperaré otros cinco minutos. Pero si tienen alguna otra pregunta, Stack Overflow es un buen lugar. Estamos pendientes de eso. Y respondemos activamente, consulten nuestra documentación para todo lo relacionado. Y hemos tocado apenas el 5% de la buena funcionalidad. Así que por favor, siéntanse libres de consultar Stack Overflow. Pueden usar GitHub para problemas legítimos. Por favor, no lo usen para preguntas. Mejor usen Stack Overflow. Si están interesados en adquirir una licencia o probar AgGrid, intenten contactar por correo electrónico a info en aggrid.com. Recuerden que enterprise se puede probar de forma gratuita. Y si no quieren mensajes de consola o marca de agua, pueden obtener una clave de prueba gratuita. Gracias a todos por unirse. Lo aprecio mucho. Muy buena participación, excelentes preguntas. Esperaré hasta las 25 en punto para mí. Esperaré otros cinco minutos para cualquier pregunta. De lo contrario, muchas gracias. Fue genial ser parte de esto. Tengo una pregunta que viene, creo que de Bruna. Gracias a todos por sus agradecimientos, se aprecia. Sí, entonces. Lo único que te mostré hoy que es específico de enterprise es el agrupamiento de filas y el filtro establecido y el filtro múltiple. Esas son las cosas que compras de fábrica. Solo esas tres cosas. El filtro establecido, el filtro múltiple y el agrupamiento de filas son las únicas cosas que he descrito en esta charla que son específicas de enterprise. Todo lo demás está disponible en la versión gratuita de la Comunidad. Tres minutos más, algunas preguntas más. Gracias Michael. Gracias Michael. Entonces, si estás usando entonces, si estás usando useState, todo el IRU no así que déjame retroceder un segundo. La respuesta es depende. Entonces, si cambias el valor de una celda en la cuadrícula. Entonces, si simplemente haces clic en editar, editable debe ser verdadero.

Permíteme demostrarte esto. Digamos que el país y hagamos que el país sea editable. Y si vamos al navegador. Haría X. Toda la cuadrícula, por lo tanto, el valor de la celda y la fila subyacente utilizada 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 cambias todos los datos de la fila, la cuadrícula en sí misma, el componente en sí mismo no se vuelve a renderizar, pero volveremos a renderizar las filas. Entonces, si cambias todas las filas, si estás usando un modelo de fila donde te desplazas hacia abajo y estás agregando, y estás volviendo a renderizar 10,000, digamos 1000 nuevas filas, por supuesto, las filas antiguas se destruirán y las nuevas filas se renderizarán, pero si estás haciendo nuevos estados y así, 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 ocurre si estás usando redux. Si te desplazas hacia abajo, y usas, los datos de fila de la cuadrícula cambian, no necesariamente toda la cuadrícula se vuelve a renderizar. Solo se vuelve a renderizar la fila de datos que ha cambiado. Es una pregunta un poco complicada porque depende de tu caso de uso. Pero como regla general, no deberías tener la cuadrícula volviéndose a renderizar cuando cambian los datos. Muy bien, gente. Gracias a todos por unirse. Me desconectaré ahora. Espero que todos tengan un buen resto de la semana y el fin de semana por venir. Adiós.