Quickstart Tutorial for the React Data Grid from AG Grid

This video is a quick start tutorial to getting started with AG Grid in a React project. Niall Crosby, the CEO and creator of AG Grid walks you through the basic knowledge needed to work with AG Grid using React. You'll see how to create a project, add AG Grid. You'll understand what CSS is used to style and structure the grid. How to use state and effect to manage data in the grid while loading data from the server. Sorting and Filtering is demonstrated through specific and default column properties. Grid Properties are used to animate rows and support selection. Adding functionality to the grid can be implemented by hooking into the grid events and using the API.

- 00:00 Create a Project
- 00:30 Get Started
- 01:05 Create an AG Grid
- 02:05 CSS Includes Explained
- 03:11 Using React State
- 03:29 Loading data from server with useEffect
- 03:55 Sorting and Filtering Columns
- 04:35 Default Column Definitions
- 04:55 Grid properties to animate and select rows
- 05:33 hooking into Grid Events
- 06:00 using the Grid API
- 06:42 Summary
- 07:03 Outro

AG Grid works with React, Angular, Vue, and JavaScript. Available as a free community edition and commercially as an Enterprise product (full support and more features).

This is part of a series of video tutorials showing how to get started with AG Grid and React.

All videos are available in a playlist:

Source code for all videos is available on Github:

[manajalali]

😂5:28 is hilarious, please make a full theme song for Ag Grid. I really enjoyed watching, thanks for making these videos for your users. very clear explanations and definitely not boring like other tutorials I've seen. Looking forward to the other videos in the series :)

[samislam]

Wow this is the fastest tutorial in the world, I feel like I know everything I need now

[zoolfwoolf]

This was a quick and amazing introduction that basically gave me everything I needed to know to get started. Cheers :)

[Dom-fsom]

Thanks for this video, was able to get setup in a few mins. Super simple setup.

[aashiqahmed]

great video! want videos on infinite scrolling in react ag grid

[marnierogers]

Thanks so much for this video, you have saved me a lot of time!

[adinamarasanu]

The video needs an update. The css file's path is changed, the fetch URL is not working anymore.. And it would be great to see it integrated with Typescript.

[carlosalbertocabreraquirog]

Hi, thanks for the nice tutorial. I have a question, ia m using valueFormatter. Example 'active" to "customer active", but when i try to use the filter with thw word "customer" int that column it doesnt work.

[chessmaster]

Beautiful. Style height 500 and we see the grid

[francoismonfret]

please tell me how to delete the exrta blank colom on the right

[kartikdolas]

Those who are gettimg errors while importing styles, please add -

import
import

[shaunfitzgibbon]

How do you use the gridapi correctly with typescript?
I keep getting "Property 'api' does not exist on type 'never'."

[akhilaannireddy]

npm ERR! node_modules/react
npm ERR! react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! node_modules/ag-grid-react
npm ERR! ag-grid-react@"*" from the root project

this is the error facing when run the command: npm install --save ag-grid-react

is there any dependency on the react version

[TonyYoungblood-hw]

I get 'AgGridReact' is not a known element even though AgGridReact is installed and imported

[MrSuhaskr]

I followed the same example with ag grid community 30.0.5, ag grid react 30.0.5, react and react Dom as 18.2.0 and react scripts as 5.0.1, the data is populated as per example but the table is not coming up in the browser. I tried to comment the css imports and run it again.. data is being populated but without css. The same is not working with css

[muhammadeakub]

Thanks for the nice video.
Would you or anyone advice how can I refresh minute age column data that is calculated from createdDate field. We want minute age to be refreshed as time goes by.
Minute age 1 min and 5 mins later you will see same cell with 6 mins

[reinishasarojini]

Actually your teaching is good. But you can zoom in your screen more so that no one get eye pain

[abuasim]

You are in so hurry that it appears you are going to catch a flight and you have no time.

[aliali-ufyp]

Can you help me with some project
If its not t9 much to ask

[abuasim]

Why are you in hurry it appears you are going to catch a flight and you have to finish the tutorial somehow