React & Material UI Data Grid Table Tutorial - Rendering Data Dynamically Using a REST API

In this video, I create a dynamic and responsive table component, with React and Material UI, using the Data Grid component. We also worked with the free REST API called JSON place holder.

This tutorial is beginner-friendly and very easy to follow along.

Installation commands:
npm install @material-ui/core
npm i @material-ui/data-grid

TimeStamps:
Intro - 00:00​
02:26​​ - Load Boilerplate Template on the browser.
04:02 - Import Data Grid & start setting up columns for the data table.
05:54 - Started to create logic to fetch API data from JSON placeholder.
08:49 - Started implementing logic to load API data inside the Data Grid table
12:39 - Conclusion

Source Code:

For more resources on Web Development:

Follow Me on Twitter:

Leave a like and subscribe for more videos.
Thanks a lot for watching ❤

[ziaurrahman]

Thankyou so much, i've been looking for react table tutorial and almost gave up. Thanks!

[brothersofgenration]

Many many thanks for this tutorial it helped me land an internship

[JoelDwyer]

Straight to the point, most helpful tutorial on MUI so far. Thanks! (Your english is amazing.)

[warmogs]

Insightful and straight to the point! Thank you so much!

[alexandreroitman]

thank you so much!
Best explanation I've found so far, thanks to your excellent didactics I managed to do the first part of a challenge for the company I'm joining. Again thank you very much!!!!

[MEssential]

My friend this was awesome and just what I needed for a job interview, thank you very much, you are the best.

[egzonberisha]

You presented a really easy and cool way to implement tables, thanks a lot man

[abibatsalaudeen]

Thanks boss really enjoyed the video and it really advance my knowledge. It makes my work super easy

[AryanKumar-unri]

How to handle checkboxes ??
What to do if I have to edit data of the row that is checked ??

[yoegyone]

This is beautiful thank you! Would love to see how to edit things on the table for the post request.

[atom]

Hi. Thanks a lot for your video. It is very informative. Request if u can provide help on one query.
I did something similar to what u have shown in the video as well as added a "set interval" method to automatically refresh the table data. My data grid component makes use of GridToolbarColumnsButton (in Grid Toolbar component). However, every time I refresh the table data, the GridToolbarColumnsButton gets reset. Is there a way to store the GridToolbarColumnsButton settings even after refresh?

[stevencrutchfield]

Would this same process work with typescript/TSX? I like how easy you make it look and this would be perfect for my application however the project I am using uses TSX, so it doesn't require importing React; the application just already knows to do it. Thus I can't use {useState, useEffect} to implement the code you are using to set up the APIs for the table. (I am using interfaces, as the challenge I am working on does not have any states/classes in place, so I'd prefer to keep it clean/stagnant for a potential employer). Sorry for the weird question as I am a rookie in web development.

[saurabhranjan]

Nice tutorial.. really helped a lot. Thanks!

[FredLungu]

How do you add a button to each of those rows. To edit record for instance.

[nitinwandile]

thanks... please make video on how to load data into data table using graphql

[sme]

Hey, i am having an issue with Data Grid, maybe you experienced something similar. I am using a rest api with pagination, the initial data length (rows) is 15 and from the api i get total items (way more than 15 that are on one page). Data grid knows that there are more pages but when i change the page i see only one row on all pages apart from the first one. Although i have the right api call and the data is set correctly, i get to see only one row. Any suggestions?

[janeimpossible]

wow I thought I should do sth so hard to get data!
thank you

[ewolz]

How do you store your checked buttons, is it in the docs too?

[pedroperegrinaa]

can you do a tutorial about how to update the info of the rows with a database connection?

[chiranjibbordoloi]

Nice tutorial can you explain how to use these checkbox for deleting the rows