Construye un potente DataGrid en pocas horas con Ag Grid

Rate this content
Bookmark

¿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

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

FAQ

AG Grid es una biblioteca de JavaScript que proporciona una cuadrícula de datos similar a Excel para visualizar y manipular datos con opciones avanzadas como edición en tiempo real, filtrado y clasificación. Se utiliza en aplicaciones web para manejar grandes cantidades de datos de manera eficiente.

AG Grid permite personalizar el tema utilizando variables CSS o, para un control más avanzado, usando SAS. Puedes importar el tema que deseas aplicar y luego modificarlo según tus necesidades, utilizando las variables CSS o las reglas SAS proporcionadas por AG Grid.

AG Grid está optimizado para manejar grandes volúmenes de datos a través de características como el modelado de filas en el lado del cliente, el desplazamiento infinito y la paginación gestionada por el servidor. Estas funcionalidades permiten a AG Grid cargar y presentar los datos de manera eficiente sin sobrecargar el navegador.

AG Grid permite personalizar la apariencia de celdas y filas utilizando propiedades como 'cellStyle', 'cellClass' y 'rowStyle'. También ofrece 'cellClassRules' y 'rowClassRules' para aplicar estilos de forma condicional basada en los datos de las celdas o filas.

Sí, AG Grid permite implementar funciones personalizadas como 'valueGetter', 'valueFormatter' y 'cellRenderer', que pueden ser usadas para adaptar la manera en que los datos son obtenidos, formateados y visualizados en la cuadrícula, permitiendo un control detallado sobre la presentación y manejo de los datos.

La edición de celdas en AG Grid se puede habilitar estableciendo la propiedad 'editable' en true en las definiciones de las columnas. AG Grid proporciona varios editores de celdas que se pueden usar dependiendo del tipo de datos, como texto, número o fecha. También es posible crear editores de celdas personalizados usando componentes de React.

Mike Ryan
Mike Ryan
96 min
08 Nov, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
AG Grid es una potente cuadrícula de JavaScript utilizada en diversas aplicaciones. Puede manejar millones de filas de datos y soporta funcionalidad similar a Excel. La construcción más importante en AG Grid es la definición de columna, que instruye a AG Grid sobre cómo representar propiedades en el conjunto de datos. AG Grid proporciona opciones de ordenación y filtrado, así como la capacidad de personalizar la representación y edición de celdas. El estilo de las celdas y filas en AG Grid se puede hacer usando estilos de celda, clases de celda o reglas de clase de celda. AG Grid también ofrece opciones de personalización con variables CSS, reglas SAS y sistema de módulos para el control del tamaño del paquete.

1. Introducción a la masterclass de AG Grid y React

Short description:

¡Buenos días! Soy Mike Ryan, un Experto Desarrollador de Google en Angular y Tecnologías Web. Hoy, vamos a hablar sobre AG Grid. Esta masterclass es diferente ya que todo es en línea. Ve a liveloveapp.com/cursos y selecciona la masterclass de Introducción a AG Grid y React. Usaremos StackBlitz para los ejercicios. ¡Empecemos!

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

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

2. Introducción a AG Grid y Definiciones de Columna

Short description:

AG Grid es una potente cuadrícula de JavaScript que proporciona una experiencia similar a Excel para visualizar datos. Puede manejar millones de filas de datos, soporta una poderosa funcionalidad similar a Excel y se utiliza en diversas aplicaciones como apuestas deportivas, transacciones financieras y visualización de registros en tiempo real. Para instalar AG Grid con React, necesitas instalar el paquete de la comunidad AG Grid y los módulos AG Grid React. AG Grid es gratuito y viene con un envoltorio de React. Puedes importar temas para personalizar la apariencia de AG Grid, y cubriremos el estilo personalizado en detalle durante esta masterclass. El constructo más importante en AG Grid es la definición de columna, que instruye a AG Grid sobre cómo representar propiedades en el conjunto de datos. Para usar AG Grid, defines las definiciones de columna, importas el componente AG Grid React y te vinculas a la propiedad de definiciones de columna. Cada definición de columna especifica el campo a mostrar y su nombre de encabezado.

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

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

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

QnA

Watch more workshops on topic

Práctica con la Rejilla de Datos React de AG Grid
React Summit 2022React Summit 2022
147 min
Práctica con la Rejilla de Datos React de AG Grid
Top Content
WorkshopFree
Sean Landsman
Sean Landsman
Comienza con la Rejilla de Datos React de AG Grid con un tutorial práctico del equipo central que te llevará a través de los pasos para crear tu primera rejilla, incluyendo cómo configurar la rejilla 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 inmediatamente a tus proyectos. También descubrirás cómo cargar datos en la rejilla y diferentes formas de agregar renderizado personalizado a la rejilla. Al final de la masterclass, habrás creado una Rejilla de Datos React de AG Grid y personalizado con componentes React funcionales.- Comenzando e instalando AG Grid- Configurando ordenación, filtrado, paginación- Cargando datos en la rejilla- La API de la rejilla- Usando hooks y componentes funcionales con AG Grid- Capacidades de la edición comunitaria gratuita de AG Grid- Personalizando la rejilla con Componentes React
Construye una Potente Rejilla de Datos con AG Grid
React Summit 2024React Summit 2024
168 min
Construye una Potente Rejilla de Datos con AG Grid
WorkshopFree
Brian Love
Brian Love
¿Tu aplicación React necesita mostrar eficientemente una gran cantidad de datos en una rejilla? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor rejilla JavaScript del 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 rejilla, la personalización y renderización de celdas, y más. Saldrás de este masterclass gratuito de 3 horas equipado con los conocimientos para implementar AG Grid en tu aplicación React.
Comienza con AG Grid Angular Data Grid
JSNation 2022JSNation 2022
116 min
Comienza con AG Grid Angular Data Grid
WorkshopFree
Stephen Cooper
Stephen Cooper
Comienza con AG Grid Angular 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 de la comunidad 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 y personalizado una cuadrícula de datos AG Grid Angular.
Contenido:- comenzando e instalando AG Grid- configurando ordenamiento, filtrado, paginación- cargando datos en la cuadrícula- la API de la cuadrícula- agregar tus propios componentes a la cuadrícula para representación y edición- capacidades de la edición de la comunidad gratuita de AG Grid
Comenzando con AG Grid y React: La mejor cuadrícula de JavaScript en el mundo
React Advanced 2022React Advanced 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
Masterclass de Codificación en Vivo para Configurar la Monitorización de Errores con Rollbar
TypeScript Congress 2023TypeScript Congress 2023
48 min
Masterclass de Codificación en Vivo para Configurar la Monitorización de Errores con Rollbar
WorkshopFree
Nico Krüger
Nico Krüger
Durante esta sesión aprenderás cómo crear una nueva cuenta de Rollbar e integrar el SDK de Rollbar con tu aplicación para monitorizar errores en tiempo real y responder y solucionar esos errores. También cubriremos cómo personalizar los datos de carga útil enviados a Rollbar para ampliar tus capacidades de monitorización.

Agenda:- Crear una cuenta de Rollbar (Cuenta gratuita)- Integra tu aplicación con el SDK de Rollbar- Enviar errores gestionados y no gestionados a Rollbar- Añadir datos de carga útil personalizados a tu configuración.
Construyendo una API GraphQL sin servidor para cualquier fuente de datos con StepZen
GraphQL Galaxy 2021GraphQL Galaxy 2021
75 min
Construyendo una API GraphQL sin servidor para cualquier fuente de datos con StepZen
WorkshopFree
Roy Derks
Roy Derks
¿Quieres empezar a construir un servidor GraphQL pero no tienes idea de por dónde empezar? Cada desarrollador (frontend) pide una API GraphQL pero a menudo carece del conocimiento backend para crear una que sea eficiente. Existen muchas formas diferentes de crear el servidor GraphQL perfecto, desde el enfoque de esquema primero hasta el enfoque de código primero o incluso soluciones generadas automáticamente.

En este masterclass interactivo, aprenderás a construir una API GraphQL sin servidor utilizando StepZen. Con StepZen, puedes crear un GraphQL para cualquier fuente de datos (SQL, NoSQL y REST) e incluso otras APIs GraphQL en cuestión de minutos. Incluso puedes manejar casos de uso más complicados como la autenticación y el despliegue. Con un poco de código, podrás combinar diferentes fuentes de datos en una API totalmente eficiente que podrás utilizar en tus aplicaciones desde el primer día.

Tabla de contenidos:
- ¿Qué es StepZen?
- Conexión a una fuente de datos (SQL, NoSQL y REST)
- Uso de directivas personalizadas
- Manejo de flujos de secuencia
- Despliegue

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

(Más fácil) Visualización interactiva de datos en React
React Advanced 2021React Advanced 2021
27 min
(Más fácil) Visualización interactiva de datos en React
Top Content
This Talk is about interactive data visualization in React using the Plot library. Plot is a high-level library that simplifies the process of visualizing data by providing key concepts and defaults for layout decisions. It can be integrated with React using hooks like useRef and useEffect. Plot allows for customization and supports features like sorting and adding additional marks. The Talk also discusses accessibility concerns, SSR support, and compares Plot to other libraries like D3 and Vega-Lite.
Manejo Seguro de Datos Dinámicos con TypeScript
Node Congress 2021Node Congress 2021
29 min
Manejo Seguro de Datos Dinámicos con TypeScript
Top Content
This Talk discusses the safe handling of dynamic data with TypeScript using JSON Schema and TypeBox. Fastify, a web framework, allows developers to validate incoming data using JSON schema, providing type safety and error handling. TypeBox is a powerful library that allows developers to define JSON schemas and derive static types in TypeScript. The combination of JSON schema, TypeBox, and Fastify provides powerful tools for type safety and validation of dynamic data.
Apache Kafka Explicado Simplemente Con Ejemplos de TypeScript
JSNation 2023JSNation 2023
27 min
Apache Kafka Explicado Simplemente Con Ejemplos de TypeScript
Top Content
Apache Kafka is a distributed, scalable, and high-throughput event streaming platform that plays a key role in event-driven architecture. It allows for the division of monolithic applications into independent microservices for scalability and maintainability. Producers and consumers are the key components in Kafka, allowing for a decoupled system. Kafka's replication and persistent storage capabilities set it apart from alternatives like Redis and RabbitMQ. Kafka provides easy access to real-time data and simplifies real-time data handling.
El Arte de la Programación Funcional
React Summit 2022React Summit 2022
26 min
El Arte de la Programación Funcional
Functional programming is a beautiful paradigm that allows us to understand programs and how entities behave and interact. It has nice characteristics like predictability, which makes testing and debugging easier. We explore how functional programming handles side effects and generative art. We learn about drawing patterns and grids with recursive functions, handling state in functional programming, and creating fashion using functional programming techniques. We also discuss handling randomness in functional programming and how to introduce organic variation and randomness to art while maintaining predictability.
Aceleración de GPU para servicios web y visualización en Node.js con RAPIDS
JSNation 2022JSNation 2022
26 min
Aceleración de GPU para servicios web y visualización en Node.js con RAPIDS
Welcome to GPU Accelerating Node.js Web Services and Visualization with Rapids. Rapids aims to bring high-performance data science capabilities to Node.js, providing a streamlined API to the Rapids platform without the need to learn a new language or environment. GPU acceleration in Node.js enables performance optimization and memory access without changing existing code. The demos showcase the power and speed of GPUs and rapids in ETL data processing, graph visualization, and point cloud interaction. Future plans include expanding the library, improving developer UX, and exploring native Windows support.
Modelado de Contenido para Desarrolladores de React
React Summit 2022React Summit 2022
7 min
Modelado de Contenido para Desarrolladores de React
Haushal, a Developer Advocate at Contentful, discusses content modeling and its importance in providing a great user experience. He uses his Cookbook web app as an example to explain how he structures and organizes content. The overall content model emphasizes reusability and considerations for content governance and platform selection. Content modeling is an iterative process, and Haushal provides resources for further learning and development.