Build a powerful DataGrid in few hours with Ag Grid

Rate this content
Bookmark

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

Mike Ryan
Mike Ryan
96 min
08 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

AG Grid is a powerful JavaScript grid used in various applications. It can handle millions of rows of data and supports Excel-like functionality. The most important construct in AG Grid is the column definition, which instructs AG Grid on how to represent properties in the data set. AG Grid provides sorting and filtering options, as well as the ability to customize cell rendering and editing. Styling cells and rows in AG Grid can be done using cell styles, cell classes, or cell class rules. AG Grid also offers customization options with CSS variables, SAS rules, and module system for bundle size control.

1. Introduction to AG Grid and React Workshop

Short description:

Good morning! I'm Mike Ryan, a Google Developer Expert in Angular and Web Technologies. Today, we're going to talk about AG Grid. This workshop is different as everything is online. Go to liveloveapp.com/courses and select the Getting Started with AG Grid and React workshop. We'll be using StackBlitz for exercises. Let's get started!

Alright, good morning everybody. I'm really excited to be your Workshop Instructor today. My name is Mike Ryan. I'm a Google Developer Expert in Angular and Web Technologies. If you know me from the Angular space, then you have probably used some of my open source work including ngRx, the Redux for Angular. And I'm also an AG Grid expert. And so I'm really excited to talk to you about AG Grid today. I'm also a software architect at LiveLoveApp.

Now in terms of this workshop, it's a little different than other workshops in that all the slides, exercises, and challenges are all going to be online today. So if you want, you're going to go to liveloveapp.com slash courses. And let me show you what you're going to see once you go to that link. So if you go to liveloveapp.com slash courses, you're to see a couple of different workshops to select from. We're going to be doing the Getting Started with AG Grid and React workshop. And so you're going to hit let's go on that. And then you'll see the full table of contents. I'm going to go through these slides today. But as you go through them, you can hit period on your keyboard to put it into slide mode and follow along with me. Additionally, at the end of each sort of section or chapter, there's going to be a challenge or an exercise for us to complete together. These are all going to be done on StackBlitz, an online IDE. So you don't have to worry about getting NPM dependencies installed or get anything running locally. We're going to do all of our exercises today using StackBlitz. So, again, I'm going to give everyone just a second to pull that up. You're going to go to liveloveapp.com slash courses, and then you're going to pick on the getting started with AG Grid and React in two hours workshop. And then once everyone's gotten a moment to pull that up and get that loaded, we will proceed from there. Again, liveloveapp.com slash courses, and then click on the Getting Started with AG Grid and React in Two Hours workshop.

2. Introduction to AG Grid and Column Definitions

Short description:

AG Grid is a powerful JavaScript grid that provides an Excel-like experience for visualizing data. It can handle millions of rows of data, supports powerful Excel-like functionality, and is used in various applications such as sports betting, financial transactions, and real-time log visualization. To install AG Grid with React, you need to install the AG Grid community package and the AG Grid React modules. AG Grid is free and comes with a React wrapper. You can import themes to customize the appearance of AG Grid, and we will cover custom styling in detail during this workshop. The most important construct in AG Grid is the column definition, which instructs AG Grid on how to represent properties in the data set. To use AG Grid, you define column definitions, import the AG Grid React component, and bind to the column definitions property. Each column definition specifies the field to display and its header name.

All right, while everyone's pulling that up, I want to give just a little introduction to what AG Grid is. So AG Grid is one of the most powerful JavaScript grids in the world. It provides an Excel-like experience for visualizing data. And the thing that makes AG Grid really unique is that it's had a really focused amount of work on performance. So AG Grid can handle, in my experience, millions of rows of data. It can do some really powerful Excel-like functionality like pivoting data, making data editable in real time from the user's perspective, visualizing data with charts and graphs. Pretty much anything that you might need to reach for a data grid for, AG Grid can handle. And so we really like teaching AG Grid because we use it on a lot of our client projects at LiveLoveApp, where I'm one of the software architects on staff. And for our clients, we've seen them do everything from sports betting to financial transactions to visualizing real-time logs coming off of a backend server. And so AG Grid is a really dynamic and powerful library.

To install AG Grid with React, let's just kind of jump into it. To get started, if you were to be doing this locally, again, you don't have to do this on your machines this morning because we'll be doing everything in StackBlitz. But if you wanted to do this in your React project, you'd get started by installing the AG Grid community package and the AG Grid React modules. Now, a quick naming note about this, AG Grid is free. It is completely free out of the box using the AG Grid community package. There's also an enterprise version of AG Grid that comes with more powerful features. All the things that we'll be teaching today, though, come in this community edition of AG Grid that's provided completely free with online open source support. And then the AG Grid React Package is going to provide us React-native bindings to AG Grid directly, and so that's what we'll be using today to interact with AG Grid is we're going to be using the React wrapper around it. Additionally, you need to import at least a theme to get started. So AG Grid is not themed out of the box. It doesn't apply any CSS. This is really great if you have the time and energy to go build out a custom theme and you really wanna get detailed about the way AG Grid looks and behaves for your application, but it also comes with some great themes out of the box. So if you were to be using AG Grid on your project today, you could import one of the themes from the styles folder in the AG Grid community package. for our exercises, we'll be using the Alpine theme. It's a great little theme. They also have built-in ones that give you a material-style look. So if you're looking for more of like a Google Material Flair, that's available to you, as well. As a note, we will be covering more custom styling in detail during this workshop today. So if you're curious about how to get to some of that custom styling functionality with AG Grid, don't worry. We will be covering it. So with that, let's just jump right on into AgGrid and talk about how to use it.

So the most important construct in AgGrid is something called the column definition, right? AgGrid is going to be a data grid, and so it's going to be built on top of columns and rows of data. and when you're displaying data with AG Grid, by default, it's going to show each item in your collection of data as a row in this grid, and so the columns and the column definitions are going to instruct AG Grid on how to actually represent different properties within that data set. Each column that we want to show on our grid is going to be defined using a CallDef object. By default, columns are going to be positioned in the order that matches the column definition specified. So, we're going to pass AGGRID kind of an array of column definitions. And starting from the top going down, it's going to be the same order we'll see the columns in our application going from left to right. To get started with it, you're going to define some column definitions, and then you're going to import the AGGRID.react component from that AGGRID.react package. It's just a React component, so you're going to drop it inside of whatever React component you want to render the grid in. And then you're going to bind to the column definitions property on that AG React component. From there, you can start to define those column definitions. So in this example, I have an interface for row data. And in this collection of data, I've got a name and a color. And so you can imagine that I'm just showing a bunch of colors and their names here. And if I wanted to create some column definitions to show this data, well, I'm going to create a little array here. I'm using the use state callback hook so that I can make this list of column definitions dynamic. And so I've got my column definitions here. And you can see that I've got my first column is going to show the name field. And I'm going to give it a header name of name. And then for my second column, I'm going to show the field color from this data set and give it the name color.

QnA

Watch more workshops on topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Concurrent Rendering Adventures in React 18
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn

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

A Guide to React Rendering Behavior
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
Using useEffect Effectively
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.