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

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

The Code Angle

3 года назад

41,728 Просмотров

Ссылки и html тэги не поддерживаются


Комментарии:

Ziaurrahman
Ziaurrahman - 30.01.2023 13:51

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

Ответить
S J
S J - 18.10.2022 15:39

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

Ответить
Alexandre Roitman
Alexandre Roitman - 11.08.2022 04:03

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

Ответить
Osama ayub
Osama ayub - 06.08.2022 23:22

data is not showing in the table

Ответить
Brothers of Genration
Brothers of Genration - 29.05.2022 11:31

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

Ответить
pallavggupta
pallavggupta - 24.05.2022 14:01

LOW Video Sound

Ответить
Joel Dwyer
Joel Dwyer - 17.05.2022 15:06

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

Ответить
Abibat Salaudeen
Abibat Salaudeen - 12.05.2022 02:49

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

Ответить
Andrei Cristian Ionescu
Andrei Cristian Ionescu - 04.05.2022 12:44

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?

Ответить
Aryan Kumar
Aryan Kumar - 09.04.2022 20:22

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

Ответить
Chiranjib Bordoloi
Chiranjib Bordoloi - 05.04.2022 18:34

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

Ответить
Warmogs
Warmogs - 30.03.2022 07:33

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

Ответить
Tiyasa Jana
Tiyasa Jana - 25.03.2022 15:10

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

Ответить
Saurabh Ranjan
Saurabh Ranjan - 23.03.2022 12:35

Nice tutorial.. really helped a lot. Thanks!

Ответить
Nitin Wandile
Nitin Wandile - 23.03.2022 06:58

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

Ответить
Pedro Peregrina
Pedro Peregrina - 01.03.2022 22:39

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

Ответить
Manu Grande Lope
Manu Grande Lope - 06.02.2022 02:20

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

Ответить
Abhay Mamidpalliwar
Abhay Mamidpalliwar - 27.01.2022 23:07

Thanks a lot !!!!

Ответить
Kanika Gola
Kanika Gola - 24.01.2022 17:24

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.

Ответить
Adam
Adam - 16.01.2022 09:14

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?

Ответить
Rakshith S.N
Rakshith S.N - 07.01.2022 09:43

Please increase the volume ...

Ответить
elrazor
elrazor - 20.12.2021 00:56

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

Ответить
Ducky ducky
Ducky ducky - 16.12.2021 03:49

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

Ответить
Souvik Bhattacharya
Souvik Bhattacharya - 30.11.2021 19:17

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

Ответить
Steven Crutchfield
Steven Crutchfield - 18.11.2021 20:10

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.

Ответить
Robert Yarborough
Robert Yarborough - 03.11.2021 02:17

Great Tutorial!!!

Ответить
Fred Lungu
Fred Lungu - 29.10.2021 09:44

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

Ответить
Egzon BERISHA
Egzon BERISHA - 08.10.2021 20:06

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

Ответить
Darisa Nikhila
Darisa Nikhila - 04.10.2021 19:19

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

Ответить
Christopher Blair
Christopher Blair - 18.08.2021 02:17

Can barely hear your voice.

Ответить
Dolapo Ajayi
Dolapo Ajayi - 24.07.2021 15:21

YOU CANT PERFORM SEARCH ON THIS TABLE??

Ответить
jane impossible
jane impossible - 17.07.2021 13:25

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

Ответить
Bruce LEE
Bruce LEE - 29.06.2021 09:40

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

Ответить
Grove Magnus
Grove Magnus - 05.06.2021 11:26

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.

Ответить
yoegyone
yoegyone - 17.04.2021 21:32

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

Ответить