Construye un potente DataGrid en pocas horas con Ag Grid

Please sign in to watch this workshop.
Sign in
Bookmark
Rate this content

¿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 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.

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.

Mike Ryan
Mike Ryan
96 min
08 Nov, 2023

Comments

Sign in or register to post your comment.
Sign in to access video transcription and chapter summary.

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 un Datagrid Poderoso con AG Grid
React Summit 2024React Summit 2024
168 min
Construye un Datagrid Poderoso con AG Grid
Top Content
WorkshopFree
Brian Love
Brian Love
¿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 comenzar con AG Grid, cómo podemos habilitar la ordenación y 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.
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
Visualización de Datos Poderosa con AG Grid & AG Charts
React Advanced 2024React Advanced 2024
145 min
Visualización de Datos Poderosa con AG Grid & AG Charts
WorkshopFree
Brian Love
Brian Love
¿Tiene su aplicación React muchos (y muchos) datos que necesitan ser mostrados tanto en Data Grids como en Charts? ¿Quieren sus usuarios interactuar, analizar y trabajar con estos datos sin comprometer el rendimiento o la fiabilidad? AG Grid proporciona las mejores bibliotecas de React Data Grid & Charts que están llenas de características y ofrecen un rendimiento inigualable mientras son completamente personalizables. En esta masterclass, aprenderás cómo comenzar con AG Grid y AG Charts, y cómo utilizar sus características clave. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid & AG Charts en tu aplicación React.
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.

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.
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.
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.
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.