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

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

useEffect needs an additional parameter (an empty dependency array), otherwise the fetch will loop forever. But a great video, thank you.

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!!!!

data is not showing in the table

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

LOW Video Sound

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

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

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?

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

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

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

In my case It is showing error, I have used your API but still i am getting error.

Nice tutorial.. really helped a lot. Thanks!

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

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

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

Thanks a lot !!!!

Its showing me an error that the data is in object form and not in array form...
Failed prop type: Invalid prop `rows` of type `object` supplied to `ForwardRef`, expected an array.

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?

Please increase the volume ...

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

...cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
when resize window screen

keep on getting unhandled runtime error when I do columns={columns}

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.

Great Tutorial!!!

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

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

Nice! I have more than 8 Columns to show and the header data is getting hidden even after having vertical scrollbar for table, example: YouT.... Kind of this
How can I show all headings title clearly without hidden instead of having tooltip

Can barely hear your voice.

YOU CANT PERFORM SEARCH ON THIS TABLE??

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

Your lecture is very helpful. But I have something to ask you. How can I resize columns in that grid.

This method isn't as easy as how it look in the video. In fact, this method doesn't work at all as Material-UI data grid component requires all rows to have a unique id property.

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