Build a Powerful Datagrid With AG Grid

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

Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.

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

FAQ

Yes, AG Grid allows you to create custom cell renderers and editors. You can use React components for both, providing a high level of customization. Custom cell renderers give you full control over the content of a cell, while custom cell editors allow for interactive user inputs.

Value getters and value formatters are part of AG Grid's cell rendering pipeline. Value getters are functions that determine the value of a cell, useful for complex data retrieval. Value formatters are functions that format the retrieved value before displaying it, allowing for custom formatting like currency or date formats.

To get started with AG Grid in a React project, you need to install two npm packages: `ag-grid-community` and `ag-grid-react`. You also need to import the base and theme CSS files. Once installed, you can define column definitions and row data to render your initial grid.

You can enable sorting by setting the `sortable` property to true in the column definition. Filtering can be enabled using the `filter` property, which supports text, number, and date filters. For more advanced filtering, you can use the set filter, which requires an enterprise license.

AG Grid offers two main row models: client-side row model and server-side row model. The client-side row model is suitable for smaller datasets and performs all operations in the browser. The server-side row model, which requires an enterprise license, is designed for large datasets and offloads operations like filtering and sorting to the server.

AG Grid offers several built-in themes including Balham, Material, Quartz, and Alpine. These themes can be customized using CSS variables and SCSS. You can override global CSS styles and use CSS variables to make theme-specific customizations, such as changing colors and font sizes.

AG Grid is a highly customizable and powerful data grid library that integrates seamlessly with React. It allows developers to handle large datasets, perform complex data operations, and customize the grid's appearance and functionality. AG Grid provides out-of-the-box support for features like sorting, filtering, and cell editing.

Yes, AG Grid can be integrated with Firebase for real-time data updates. You can use Firebase's JavaScript SDK to stream data into AG Grid, enabling real-time updates and synchronization. This works well with both Firestore and the Firebase Realtime Database.

AG Grid provides several options for handling data persistence and editing. By default, the grid mutates the row data. You can also use events like `onCellValueChanged` and `onCellEditRequest` to manage data updates and persist changes to a backend. For immutable data, you can use the read-only edit mode and handle changes programmatically.

AG Grid allows you to style rows and cells using properties like `cellClass`, `cellClassRules`, `rowClass`, and `rowClassRules`. You can apply styles conditionally based on the data or state of the cell or row. This can include changing colors, adding icons, or custom formatting.

Brian Love
Brian Love
168 min
03 Jun, 2024

Comments

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

Watch more workshops on topic

Build a powerful DataGrid in few hours with Ag Grid
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
Top Content
Workshop
Mike Ryan
Mike Ryan
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner
Get started with AG Grid Angular Data Grid
JSNation 2022JSNation 2022
116 min
Get started with AG Grid Angular Data Grid
Workshop
Stephen Cooper
Stephen Cooper
Get started with AG Grid Angular Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you’ll learn a powerful tool that you can immediately add to your projects. You’ll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created and customized an AG Grid Angular Data Grid.
Contents:- getting started and installing AG Grid- configuring sorting, filtering, pagination- loading data into the grid- the grid API- add your own components to the Grid for rendering and editing- capabilities of the free community edition of AG Grid
Powerful Data Visualisation with AG Grid & AG Charts
React Advanced 2024React Advanced 2024
145 min
Powerful Data Visualisation with AG Grid & AG Charts
Workshop
Brian Love
Brian Love
Does your React app have lots (and lots) of data that needs to be displayed in both Data Grids and Charts? Do your users want to interact with, analyse, and work with this data without compromising on performance or reliability? AG Grid provide the best React Data Grid & Charts libraries that are packed with features and provide unbeatable performance whilst being fully customizable. In this workshop, you'll learn how to get started with both AG Grid and AG Charts, learn how to use their key features. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid & AG Charts into your React application.
Live Coding Workshop to Setup Rollbar Error Monitoring
TypeScript Congress 2023TypeScript Congress 2023
48 min
Live Coding Workshop to Setup Rollbar Error Monitoring
Workshop
Nico Krüger
Nico Krüger
During this session you will learn how to create a new Rollbar account and integrate the Rollbar SDK with your application to monitor errors in real-time and respond and fix those errors. We will also cover how to customize payload data sent to Rollbar to extend your monitoring capabilities.

Agenda:- Create a Rollbar Account (Free Account)- Integrate your application with the Rollbar SDK- Send handled and unhandled errors to Rollbar- Add Custom payload data to your configuration.
Building a Serverless GraphQL API For Any Datasource With StepZen
GraphQL Galaxy 2021GraphQL Galaxy 2021
75 min
Building a Serverless GraphQL API For Any Datasource With StepZen
Workshop
Roy Derks
Roy Derks
Want to get started with building a GraphQL server but have no idea where to begin? Every (frontend) developer asks for a GraphQL API but often lacks the backend knowledge to create a performant one. There are many different flavours in creating the perfect GraphQL server, ranging from schema-first to code-first or even auto-generated solutions.

In this interactive workshop, you will learn about building a serverless GraphQL API using StepZen. With StepZen, you can create a GraphQL for any data source (SQL, NoSQL & REST) and even other GraphQL APIs within minutes. And even handle more complicated use cases such as authentication and deployment. Using little code, you'll get to combine different data sources in one fully performant API that you can use in your applications from day one.

Table of contents:
- What is StepZen?
- Connecting to a data source (SQL, NoSQL & REST)
- Using custom directives
- Handle sequence flows
- Deployment
Data Visualization for Web Developers
JSNation Live 2021JSNation Live 2021
139 min
Data Visualization for Web Developers
Workshop
Anjana Vakil
Anjana Vakil
In this workshop, through hands-on projects we'll learn how to use Observable, a browser-based reactive coding platform, to rapidly build insightful, interactive visualizations in JavaScript. After completing this workshop, you'll have the basic tools & techniques you need to start using dataviz to better understand your code, your projects & your users, and make better data-driven decisions as a developer.

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

(Easier) Interactive Data Visualization in React
React Advanced 2021React Advanced 2021
27 min
(Easier) Interactive Data Visualization in 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 Simply Explained With TypeScript Examples
JSNation 2023JSNation 2023
27 min
Apache Kafka Simply Explained With TypeScript Examples
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.
Safely Handling Dynamic Data with TypeScript
Node Congress 2021Node Congress 2021
29 min
Safely Handling Dynamic Data with 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.
The Art of Functional Programming
React Summit 2022React Summit 2022
26 min
The Art of Functional Programming
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.
GPU Accelerating Node.js Web Services and Visualization with RAPIDS
JSNation 2022JSNation 2022
26 min
GPU Accelerating Node.js Web Services and Visualization with 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.
Content Modeling for React Developers
React Summit 2022React Summit 2022
7 min
Content Modeling for React Developers
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.