Hands-on with AG Grid's React Data Grid

Rate this content
Bookmark

Get started with AG Grid React 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 an AG Grid React Data Grid and customized with functional React components.

- Getting started and installing AG Grid

- Configuring sorting, filtering, pagination

- Loading data into the grid

- The grid API

- Using hooks and functional components with AG Grid

- Capabilities of the free community edition of AG Grid

- Customizing the grid with React Components

Sean Landsman
Sean Landsman
147 min
01 Jul, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Workshop covered various topics related to AG Grid and React. It included installing dependencies, pulling data from remote sources, adding sorting and filtering capabilities, exploring grid properties and events, using Aggrid Enterprise for advanced functionality, and creating custom renderers and filters. The Workshop also discussed TypeScript support, server-side row model, and applying filters. Overall, the Workshop provided a comprehensive overview of AG Grid and React integration with a focus on practical usage and customization.

1. Introduction to AG Grid and React

Short description:

We're going to start off by creating an empty react project using create react app, react app. We'll install the necessary dependencies and open up app.js. We'll then install the aggrid React component and pull in some local data to display in the grid. We'll also specify the columns to show. Stay tuned for the agenda.

On the left-hand side, hopefully you can all see my screen, on the left side I've got the GitHub repo. We're going to use this to track the different chapters, if you like, or the sections of this talk. As we go, I'm going to be coding live. If you feel that you missed something or made a mistake or get a bit left behind, refer to the branch for the section that we're talking about and it will describe the code as we go. For example, in the first section, here's the code for the first thing that I'll introduce as I discuss, and then the second part, and so on. And at the end of it, so when we get to the end of that chapter, if you go to... We're about to start on the second section. So for example, if we're about to start the second section with enterprise features, if you just check out that branch, you'll be straight in line, back where we were. But as you go, if you want to follow along, just make sure that you've got the right branch for the section that we're talking about and the code's there. And you'll be able to copy and paste. Alternatively, you can code along as you like or you can just watch, you don't have to code at all and when you, after the workshop, take your time and go look at the GitHub repo and the YouTube videos that we have, and you can follow along in your own time.

So we're going to start off. We're going to create an empty react project using create react app, react app. We're just going to call it hello. Keep an eye on the Discord channel. So we're just a simple boilerplate react application here. It's nothing to do with the grid so far. Just installing all the dependencies. It's taking a time, I'm sorry. Wow, that took longer than I thought, sorry guys and Googles. Okay, so if we go to hello, we'll see a nor project. I'm gonna open this project up in my IDE. And as I said, so far, this is just a straightforward boilerplate React project. There's nothing specific about the AG grid yet. This was a lot snappier before, I apologize for the slight delay here. While that's having a thing, we'll go back to the terminal.

So to get started with AG grid and React, there are two dependencies you need to install. The first one is, we're gonna save it and save the dependencies. First one we're gonna install is AGgridCommunity. AGgridCommunity has all the core features and all the free features. You're able to use the features in AGgrid community without a license. You don't need to contact us. You can use us in commercial projects, and then that contains the core code. Then we also gonna install AGgridReact. AGgridReact is the React rendering side of things, so you need the two together. The AGgridCommunity is the core grid code, and that's part of the community edition, and AGgridReact you'll need as well for React integration, and that provides the React rendering. I will install those dependencies pretty quick. We've got your IDE. So the first thing we're going to do is open up app.js. Let me see if I can open up just in case people have questions. So if you guys or people on the channel have any problems seeing the screen or understanding me, please do feel free to ping a question and I'll try, and answer it. Okay. So we started off with React Create app provided to us. This is just a boilerplate code if we run this. We run this. Okay. The repo, I'll share on the repo. Someone asked, I'll just reshare that. So on the left-hand side, hopefully, you can see my browser. We see the results of the Create React app. I'll just share it. Okay. That's what Create React app has given us. So the first thing we need to do is install our aggrid React component. We'll pull it in. So we'll pull it in with imports. Aggrid React. We'll get rid of this stuff in the app, which we don't need. And we'll use our aggrid React component. So, so far, this won't do anything for us. Because at the minimum, a grid or table requires rows and columns. So the rows will be the horizontal things you see, and the columns will be the vertical. So let's pull in some local data to take a look at what that might look like. So. Focus. So these each of these fields will be something that we can put out and do in the grid. Row data is just an array of JSON data. You can have as many attributes, properties that you like, and then the properties can be complex. In this example, we're only going to be looking at simple data. So numbers and strings. But they can be of any type and then it will be the grid offers functionality for you to read that type and displays it however you wish. So in this case, we will put in some local data in the latest section and we're going to show you how we can more realistically pull this from a remote source. I would say this is 45,000 and this is 50. And then this one will do BMW. 4 series. So that's our row data. We haven't done anything with it yet, so it's. So that will tell the grid to display that row data. That's only half the story there because we also need to show and choose which columns to pull out. To pull out so your row data can have hundreds of fields that maybe you only want to show one or two. How you pick out what data to show is with the column data. So do that next. That's equal and like row data. This is an array of JSON data and at a minimum, you need to specify the field again to show we're going to have Make Model. And price. And again, we need to tell the grid. Good question. What's the agenda. So we've gone straight into it all, pause in a second and Tell you what the agenda is. Okay, so that looks all messed up.

2. Grid Features and Enterprise Functionality

Short description:

We'll cover the basic functionality of the grid, including sourcing, filtering, creating cell renderers, and filters. We'll also touch on enterprise functionality and how to include it. The majority of the workshop will focus on community features and basic usage with React. The code for each section is available on the GitHub repo.

And that's fine because we'll get to that in a minute. So I'll pause for a second to discuss the agenda. What we're going to cover today I mentioned that briefly. But for those that have joined afterwards, I'm going to be describing some of the basic functionality provided by the grid. Sourcing filtering creating cell renderers filters and so on. I'll introduce you to a little bit of the enterprise functionality and how you'd include that. We don't talk a lot about the enterprise features. But if you're something you're interested in and you want to use that in a project will describe how you get a license, how you can try it and briefly, some of the enterprise features, but the the bulk of the talk. What this workshop will be free to use. Community features and just basic stuff really get you going up, get you up and running and going and you can see how easy it is to use with React. Yeah, that's it in a nutshell, these are five different sections and I'll just repeat briefly for those that join later. There's a GitHub repo and each of the five sections here is on the repo and it shows you the code for that particular section. If you want to copy and paste or if you make a mistake along the way and see what I've done, it'll be on the GitHub repo. I believe that answers that question, Clint.

QnA

Watch more workshops on topic

Building GraphQL APIs on top of Ethereum with The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
Nader Dabit
Nader Dabit
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.
Practice TypeScript Techniques Building React Server Components App
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
Maurice de Beijer
Maurice de Beijer
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
Database Workflows & API Development with Prisma
Node Congress 2022Node Congress 2022
98 min
Database Workflows & API Development with Prisma
WorkshopFree
Nikolas Burk
Nikolas Burk
Prisma is an open-source ORM for Node.js and TypeScript. In this workshop, you’ll learn the fundamental Prisma workflows to model data, perform database migrations and query the database to read and write data. You’ll also learn how Prisma fits into your application stack, building a REST API and a GraphQL API from scratch using SQLite as the database.
Table of contents:
- Setting up Prisma, data modeling & migrations- Exploring Prisma Client to query the database- Building REST API routes with Express- Building a GraphQL API with Apollo Server
From Idea to Production: React Development with a Visual Twist
React Summit 2023React Summit 2023
31 min
From Idea to Production: React Development with a Visual Twist
WorkshopFree
Omer Kenet
Omer Kenet
Join us for a 3-hour workshop that dives into the world of creative React development using Codux. Participants will explore how a visually-driven approach can unlock creativity, streamline workflows, and enhance their development velocity. Dive into the features that make Codux a game-changer for React developers. The session will include hands-on exercises that demonstrate the power of real-time rendering, visual code manipulation, and component isolation all in your source code.
Table of the contents: - Download & Setup: Getting Codux Ready for the Workshop- Project Picker: Cloning and Installing a Demo Project- Introduction to Codux Core Concepts and Its UI- Exercise 1: Finding our Feet- Break- Exercise 2: Making Changes While Staying Effective- Exercise 3: Reusability and Edge Case Validation- Summary, Wrap-Up, and Q&A
Best Practices and Patterns for Managing API Requests and States
React Advanced Conference 2022React Advanced Conference 2022
206 min
Best Practices and Patterns for Managing API Requests and States
Workshop
Thomas Findlay
Thomas Findlay
With the rise of frameworks, such as React, Vue or Angular, the way websites are built changed over the years. Modern applications can be very dynamic and perform multiple API requests to populate a website with fresh content or submit new data to a server. However, this paradigm shift introduced new problems developers need to deal with. When an API request is pending, succeeds, or fails, a user should be presented with meaningful feedback. Other problems can comprise API data caching or syncing the client state with the server. All of these problems require solutions that need to be coded, but these can quickly get out of hand and result in a codebase that is hard to extend and maintain. In this workshop, we will cover how to handle API requests, API states and request cancellation by implementing an API Layer and combining it with React-Query.
Prerequisites: To make the most out of this workshop, you should be familiar with React and Hooks, such as useState, useEffect, etc. If you would like to code along, make sure you have Git, a code editor, Node, and npm installed on your machine.

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

Get rid of your API schemas with tRPC
React Day Berlin 2022React Day Berlin 2022
29 min
Get rid of your API schemas with tRPC
Do you know we can replace API schemas with a lightweight and type-safe library? With tRPC you can easily replace GraphQL or REST with inferred shapes without schemas or code generation. In this talk we will understand the benefit of tRPC and how apply it in a NextJs application. If you want reduce your project complexity you can't miss this talk.
Step aside resolvers: a new approach to GraphQL execution
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Step aside resolvers: a new approach to GraphQL execution
Though GraphQL is declarative, resolvers operate field-by-field, layer-by-layer, often resulting in unnecessary work for your business logic even when using techniques such as DataLoader. In this talk, Benjie will introduce his vision for a new general-purpose GraphQL execution strategy whose holistic approach could lead to significant efficiency and scalability gains for all GraphQL APIs.
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
Top Content
There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.
Handling Breaking Changes in GraphQL
GraphQL Galaxy 2022GraphQL Galaxy 2022
22 min
Handling Breaking Changes in GraphQL
Top Content
Requirements change, but API contracts are forever - I wish! A breaking change is something that is not backwards compatible. This means that a consumer of your API would not be able to use the new version without making a code change themselves. We avoid breaking changes if possible, but there are cases when they are inevitable. It could be something small: like making a mandatory field optional. Or it could be something big: like removing a query or a mutation. In this talk we'll review the types of breaking changes you may encounter and how to deal with them gracefully.
Advanced Patterns for API Management in Large-Scale React Applications
React Advanced Conference 2021React Advanced Conference 2021
20 min
Advanced Patterns for API Management in Large-Scale React Applications
Top Content
In this talk, you will discover how to manage async operations and request cancellation implementing a maintainable and scalable API layer and enhancing it with de-coupled cancellation logic. You will also learn how to handle different API states in a clean and flexible manner.
Safely Handling Dynamic Data with TypeScript
Node Congress 2021Node Congress 2021
29 min
Safely Handling Dynamic Data with TypeScript
Top Content
TypeScript makes JavaScript safer adding static type definitions. Static definitions are wonderful; they prevent developers from making trivial mistakes ensuring every assignment and invocation is done correctly. A variable typed as a string cannot be assigned a number, and a function expecting three arguments cannot be called with only two. These definitions only exist at build time though; the code that is eventually executed is just JavaScript. But what about the response from an API request? In this talk Ethan Arrowood, Software Engineer 2 @ Microsoft, he will cover various solutions for safely typing dynamic data in TypeScript applications. This talk features popular technologies such as Fastify, JSON Schema, Node.js, and more!