Práctica con AG Grid's React Data Grid

Rate this content
Bookmark
El masterclass cubrió varios temas relacionados con AG Grid y React. Incluyó la instalación de dependencias, extracción de datos de fuentes remotas, agregando capacidades de ordenamiento y filtrado, explorando propiedades y eventos de la cuadrícula, utilizando Aggrid Enterprise para funcionalidad avanzada, y creando renderizadores y filtros personalizados. El masterclass también discutió el soporte de TypeScript, el modelo de fila del lado del servidor y la aplicación de filtros. En general, el masterclass proporcionó una descripción general completa de la integración de AG Grid y React con un enfoque en el uso práctico y la personalización.

From Author:

Comienza con AG Grid React Data Grid con un tutorial práctico del equipo principal que te guiará a través de los pasos para crear tu primera cuadrícula, incluyendo cómo configurar la cuadrícula con propiedades simples y componentes personalizados. La edición comunitaria de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar de inmediato a tus proyectos. También descubrirás cómo cargar datos en la cuadrícula y diferentes formas de agregar representación personalizada a la cuadrícula. Al final del masterclass, habrás creado una cuadrícula de datos AG Grid React y la habrás personalizado con componentes funcionales de React.

- Comenzando e instalando AG Grid

- Configurando ordenamiento, filtrado, paginación

- Cargando datos en la cuadrícula

- La API de la cuadrícula

- Usando hooks y componentes funcionales con AG Grid

- Capacidades de la edición comunitaria gratuita de AG Grid

- Personalizando la cuadrícula con componentes de React

This workshop has been presented at React Summit 2022, check out the latest edition of this React Conference.

FAQ

AG Grid es una biblioteca de JavaScript avanzada que se utiliza para crear y manejar tablas y cuadrículas de datos complejas en aplicaciones web. Ofrece funciones como filtrado, ordenamiento, manipulación de grandes conjuntos de datos y la capacidad de integrarse con diversos frameworks como React.

En AG Grid, los filtros se pueden aplicar usando los métodos getFilterModel y setFilterModel, que permiten obtener el estado actual de los filtros y aplicar un nuevo estado, respectivamente. Los filtros pueden ser tan simples como filtros de texto, número y fecha, o más complejos como filtros personalizados desarrollados como componentes React.

Sí, AG Grid es compatible con React y permite desarrollar componentes de cuadrícula personalizados usando React. Proporciona integración mediante el paquete AG Grid React que facilita la representación y la gestión de datos dentro de aplicaciones React.

AG Grid Enterprise es una versión avanzada de AG Grid que incluye características adicionales como agrupación de filas, herramientas de exportación a CSV o Excel, y filtros avanzados como el filtro de conjunto y el multi-filtro. Estas características están diseñadas para ofrecer un control más fino y una mayor escalabilidad en aplicaciones empresariales.

AG Grid permite personalizar estilos usando CSS. Proporciona varios estilos predefinidos que se pueden aplicar directamente, y también permite la creación de temas personalizados modificando las variables SASS o sobre-escribiendo los estilos CSS existentes según las necesidades del proyecto.

Los modelos de fila en AG Grid determinan cómo se manejan y se cargan los datos en la cuadrícula. Por ejemplo, el modelo de fila infinita permite cargar datos a medida que el usuario se desplaza, lo cual es útil para manejar grandes conjuntos de datos de forma eficiente sin sobrecargar la memoria del navegador.

Sean Landsman
Sean Landsman
147 min
01 Jul, 2022

Comments

Sign in or register to post your comment.

Video Transcription

1. Introducción a AG Grid y React

Short description:

Vamos a comenzar creando un proyecto de React vacío utilizando create react app, react app. Instalaremos las dependencias necesarias y abriremos app.js. Luego, instalaremos el componente de React de aggrid y extraeremos algunos datos locales para mostrar en la cuadrícula. También especificaremos las columnas a mostrar. Estén atentos a la agenda.

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.

2. Funcionalidades de la Cuadrícula y Funcionalidad Empresarial

Short description:

Vamos a cubrir la funcionalidad básica de la cuadrícula, incluyendo la obtención de datos, filtrado, creación de renderizadores de celdas y filtros. También tocaremos la funcionalidad empresarial y cómo incluirla. La mayor parte de la masterclass se centrará en las características de la comunidad y el uso básico con React. El código de cada sección está disponible en el repositorio de GitHub.

Vale, eso se ve todo desordenado. Y está bien porque lo veremos en un momento. Haré una pausa para discutir la agenda. Lo que vamos a cubrir hoy lo mencioné brevemente. Pero para aquellos que se han unido después, voy a describir algunas de las funcionalidades básicas proporcionadas por la cuadrícula. Obtención de datos, filtrado, creación de renderizadores de celdas, filtros, y así sucesivamente. Te presentaré un poco de la funcionalidad enterprise y cómo puedes incluirla. No hablamos mucho sobre las características enterprise. Pero si es algo en lo que estás interesado y quieres usarlo en un proyecto, describiré cómo obtener una licencia, cómo puedes probarlo y brevemente algunas de las características enterprise, pero la mayor parte de la charla. Lo que esta masterclass será gratuita de usar. Características de la comunidad y cosas básicas para que puedas comenzar y ver lo fácil que es usarlo con React. Sí, eso es básicamente todo, estas son cinco secciones diferentes y repetiré brevemente para aquellos que se unan más tarde. Hay un repositorio de GitHub y cada una de las cinco secciones está en el repositorio y muestra el código para esa sección en particular. Si quieres copiar y pegar o si cometes un error en el camino y quieres ver lo que he hecho, estará en el repositorio de GitHub. Creo que eso responde esa pregunta, Clint.

QnA

Watch more workshops on topic

Construye un potente DataGrid en pocas horas con Ag Grid
React Summit US 2023React Summit US 2023
96 min
Construye un potente DataGrid en pocas horas con Ag Grid
Top Content
WorkshopFree
Mike Ryan
Mike Ryan
¿Tu aplicación React necesita mostrar eficientemente muchos (y muchos) datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está llena de características, es altamente eficiente y extensible. En esta masterclass, aprenderás cómo empezar con AG Grid, cómo podemos habilitar la ordenación y el filtrado de datos en la cuadrícula, la representación de celdas y más. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación React.
Todos sabemos que crear nuestra propia solución de cuadrícula no es fácil, y seamos honestos, no es algo en lo que deberíamos estar trabajando. Estamos enfocados en construir un producto e impulsar la innovación. En esta masterclass, verás lo fácil que es empezar con AG Grid.
Prerrequisitos: React y JavaScript básicos
Nivel de la masterclass: Principiante
Construyendo APIs GraphQL sobre Ethereum con The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Construyendo APIs GraphQL sobre Ethereum con The Graph
WorkshopFree
Nader Dabit
Nader Dabit
The Graph es un protocolo de indexación para consultar redes como Ethereum, IPFS y otras blockchains. Cualquiera puede construir y publicar APIs abiertas, llamadas subgrafos, para hacer que los datos sean fácilmente accesibles.

En este masterclass aprenderás cómo construir un subgrafo que indexa datos de blockchain de NFT del contrato inteligente Foundation. Desplegaremos la API y aprenderemos cómo realizar consultas para recuperar datos utilizando diferentes tipos de patrones de acceso a datos, implementando filtros y ordenamiento.

Al final del masterclass, deberías entender cómo construir y desplegar APIs de alto rendimiento en The Graph para indexar datos de cualquier contrato inteligente desplegado en Ethereum.
Practica Técnicas de TypeScript Construyendo una Aplicación con Componentes de Servidor React
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practica Técnicas de TypeScript Construyendo una Aplicación con Componentes de Servidor React
Workshop
Maurice de Beijer
Maurice de Beijer
En esta masterclass práctica, Maurice te guiará personalmente a través de una serie de ejercicios diseñados para empoderarte con una profunda comprensión de los Componentes de Servidor React y el poder de TypeScript. Descubre cómo optimizar tus aplicaciones, mejorar el rendimiento y desbloquear nuevas posibilidades.
 
Durante la masterclass, realizarás:
- Maximizar la mantenibilidad y escalabilidad del código con prácticas avanzadas de TypeScript
- Desatar los beneficios de rendimiento de los Componentes de Servidor React, superando enfoques tradicionales
- Potenciar tu TypeScript con el poder de los Tipos Mapeados
- Hacer tus tipos TypeScript más seguros con Tipos Opacos
- Explorar el poder de los Tipos de Plantillas Literales al usar Tipos Mapeados
 
Maurice estará virtualmente a tu lado, ofreciendo una guía completa y respondiendo a tus preguntas mientras navegas por cada ejercicio. Al final de la masterclass, habrás dominado los Componentes de Servidor React, armado con un nuevo arsenal de conocimientos de TypeScript para potenciar tus aplicaciones React.
 
No pierdas esta oportunidad de elevar tu experiencia en React a nuevas alturas. Únete a nuestra masterclass y desbloquea el potencial de los Componentes de Servidor React con TypeScript. Tus aplicaciones te lo agradecerán.
Comenzando con AG Grid y React: La mejor cuadrícula de JavaScript en el mundo
React Advanced Conference 2022React Advanced Conference 2022
140 min
Comenzando con AG Grid y React: La mejor cuadrícula de JavaScript en el mundo
WorkshopFree
Brian Love
Brian Love
¿Tu aplicación de React necesita mostrar eficientemente una gran cantidad de datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está repleta de funciones, altamente eficiente y extensible. En este masterclass, aprenderás cómo empezar con AG Grid, cómo habilitar la ordenación y filtrado de datos en la cuadrícula, renderizado de celdas y más. Saldrás de este masterclass gratuito de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación de React.
Todos sabemos que crear nuestra propia solución de cuadrícula no es fácil, y seamos honestos, no es algo en lo que deberíamos estar trabajando. Estamos enfocados en construir un producto y promover la innovación. En este masterclass, verás lo fácil que es empezar con AG Grid.
Prerrequisitos: React básico y JavaScript
Nivel del masterclass: Principiante
Flujos de base de datos y desarrollo de API con Prisma
Node Congress 2022Node Congress 2022
98 min
Flujos de base de datos y desarrollo de API con Prisma
WorkshopFree
Nikolas Burk
Nikolas Burk
Prisma es un ORM de código abierto para Node.js y TypeScript. En esta masterclass, aprenderás los flujos de trabajo fundamentales de Prisma para modelar datos, realizar migraciones de base de datos y consultar la base de datos para leer y escribir datos. También aprenderás cómo Prisma se integra en tu stack de aplicaciones, construyendo una API REST y una API GraphQL desde cero utilizando SQLite como base de datos.
Tabla de contenidos:
- Configuración de Prisma, modelado de datos y migraciones- Explorando Prisma Client para consultar la base de datos- Construyendo rutas de API REST con Express- Construyendo una API GraphQL con Apollo Server

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Despídete de tus esquemas de API con tRPC
React Day Berlin 2022React Day Berlin 2022
29 min
Despídete de tus esquemas de API con tRPC
Today's Talk introduces TRPC, a library that eliminates the need for code generation and provides type safety and better collaboration between front-end and back-end. TRPC is demonstrated in a Next JS application integrated with Prisma, allowing for easy implementation and interaction with the database. The library allows for seamless usage in the client, with automatic procedure renaming and the ability to call methods without generating types. TRPC's client-server interaction is based on HTTP requests and allows for easy debugging and tracing. The library also provides runtime type check and validation using Zod.
Deja paso a los resolvers: un nuevo enfoque para la ejecución de GraphQL
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Deja paso a los resolvers: un nuevo enfoque para la ejecución de GraphQL
GraphQL has made a huge impact in the way we build client applications, websites, and mobile apps. Despite the dominance of resolvers, the GraphQL specification does not mandate their use. Introducing Graphast, a new project that compiles GraphQL operations into execution and output plans, providing advanced optimizations. In GraphFast, instead of resolvers, we have plan resolvers that deal with future data. Graphfast plan resolvers are short and efficient, supporting all features of modern GraphQL.
Estudio de caso: Construcción de componentes React reutilizables accesibles en GitHub
React Summit 2024React Summit 2024
29 min
Estudio de caso: Construcción de componentes React reutilizables accesibles en GitHub
The talk discusses building accessible React components and emphasizes the importance of using the correct HTML elements and ARIA roles for accessibility. It explains how to navigate and select options within a form and how to add supplementary text using Aria described by. The speaker also discusses the benefits of using conditional checkboxes and ARIA disabled to improve the UI. Additionally, the talk explores the role of JavaScript in web accessibility and provides recommendations for testing website accessibility.
Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro
React Summit 2022React Summit 2022
17 min
Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro
Top Content
Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.
Manejo de Cambios Significativos en GraphQL
GraphQL Galaxy 2022GraphQL Galaxy 2022
22 min
Manejo de Cambios Significativos en GraphQL
Top Content
This Talk discusses handling breaking changes in a GraphQL schema, including the use of the deprecated directive to tag fields that should no longer be used. It also covers the process of deploying GraphQL APIs and mobile apps, highlighting the challenges of mobile app release adoption. The Talk emphasizes the importance of making safe upgrades in mobile apps and provides strategies for detecting and handling breaking changes, such as using TypeScript and GraphQL Inspector. Overall, the Talk emphasizes the need to minimize user impact when introducing breaking changes in GraphQL schemas.
Patrones avanzados para la gestión de API en aplicaciones React a gran escala
React Advanced Conference 2021React Advanced Conference 2021
20 min
Patrones avanzados para la gestión de API en aplicaciones React a gran escala
Top Content
This Talk covers advanced patterns for API management in large-scale React applications. It introduces the concept of an API layer to manage API requests in a more organized and maintainable way. The benefits of using an API layer include improved maintainability, scalability, flexibility, and code reusability. The Talk also explores how to handle API states and statuses in React, and provides examples of canceling requests with Axios and React Query. Additionally, it explains how to use the API layer with React Query for simplified API management.