Material UI in React #10 - Data grid - fetching data from API, loading, error messages

[@aelohinjuz]

Pretty good the full series!, Thank you!! Great presentation.

[@JoBj89]

really good video. Even people with little experience will understand the explanations!

[@leandrmiklashevich297]

It seems like MUI Data Grid changed API and PageSize doesn't work nowadays.

[@beyzaates2908]

First of all, thank you for your hard work. Please add the user list crud operations to the authentication page.

[@theatypicaldeveloper]

hey Beyza, thank you for your comment, that means a lot to me! Apologies! But I am not planning to add any more content to the MUI series at this moment, unless something crucial comes out I might work on a completely new series. Hope you can find your answer elsewhere :).

[@beyzaates2908]

@@theatypicaldeveloper Thank you for your interest. :)

[@DaveTradeFx_01]

Thank you for your hark work, keep it up and post more video about MUI

[@theatypicaldeveloper]

hey Hak, been away for a bit. I'll probably drop the MUI subject and move on to new features in React 18, but if anything crazy comes out in MUI then I might do a separate series.

[@DaveTradeFx_01]

@@theatypicaldeveloper How about doing the Mui Autocomplete? How to handle it within the form submit?

[@christianbaidoo1016]

Thank you Sir, I found this tutorial really useful

[@theatypicaldeveloper]

hey Christian, thank you!

[@Shariq26]

I am stuck at the api response for status as I am getting response as 1, 2, 3 which has to be shown in frontend as Accepted, Pending and Rejected. Stuck with Data Grid layout

[@tomaszstanisz1786]

How about fetching headers for the DataGrid to have complately reusable Table, not only rows but also columns with headers fetching as table config from api? is it possible with dataGrid?

[@suman_osti]

hey bro, i used data grid in axios get request, i am updating the value from api to table, and i have used datagrid's filter for the filtration, and in useEffect hook i have set the depedency for the table, and if the depedency array is given then the filter flickers and goes into infinite call and i cant use the filters they just flicker, but the table is fine though, and if i set the dependency array to null, then the table wont get auto updated i need to refresh the page, how can i fix this, i have to use the filter as well

[@jamisonpereira1]

Loved the series! great job. quick question: The clickaway close feature is not working for me... and looking at the solution repo I'm not sure where it's integrated. Am I missing something or is this a bug?

[@stokedonthestoke]

Thanks for this series! I have a question: how do I get my own page title at the top of the drawer like it's got in the example?

[@trideepsardar2266]

how we could handle the next page data of data grid according to the pageno. or offset value of rest api? please reply

[@theatypicaldeveloper]

hey Trideep, if you wish to display only x rows and then on pagination number change call the API and display the next x rows. You'd have add some extra functionality to the onPageChange prop and then save your results to the state, so you don't end up with repetetive network calls.

[@mamlzy]

please discuss more feature or even all feature about server side data grid, its really useful, and so hard to find tutorial that discuss about full feature server side data grid. thanks btw..

[@theatypicaldeveloper]

hey Lazy, thanks for leaving a comment. Sure I will definitely consider that!

[@s0me131]

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?

[@theatypicaldeveloper]

hey Andrei, sorry it's difficult to tell without the code, do you have a codesandbox?

[@s0me131]

@@theatypicaldeveloper i figured it out, it was just paginationMode='server'

[@suman_osti]

hey bro, can you add action options for data grid like edit and delete, will really appreciate it alot bro.

[@theatypicaldeveloper]

hey Suman, you shouldn't have an issue with that as MUI data grid has built-in support for cell and row editing. Should be fairly simple to implement, the great example of it can be found just here: mui.com/x/react-data-grid/editing/

[@suman_osti]

@@theatypicaldeveloper yeah i did look at those docs, but while using with the api it seems to be hard and there is no option for confirmation for deletion as well and i wanted to edit the data on a modal, so it would be awesome of you would break it down. 😁😁

[@kapiljain4423]

hi, can you please upload complete video on mui datagrid with crud operations. please use datagrid free v. thanks in advance.

[@funnyvideos-gi4zv]

need video on server side filtering and sorting for MUI DataGrid

[@jshub1]

very helful video

[@theatypicaldeveloper]

hey there, thank you! Glad to hear that.

[@AhmadMaartmesrini]

thanks a lot

[@anandgarikapati1580]

hey bro y cant you do more videos on reactjs?

[@theatypicaldeveloper]

hey Anand, I'm working on dropping another series. But to be honest having a full-time job, a life and a video channel is a bit hard to compromise lol. But I'm hoping to release first few episodes quite soon.

[@anandgarikapati1580]

@@theatypicaldeveloper yes I understand , I appreciate you on managing both. thanks for the upcoming series

[@KhalifahMB]

There's no part 7 and 9, please upload

[@mohanr-ho7iz]

screen is moving at a very fast rate. Very Difficult to follow..

[@AlexisPizarroAbarca]

Thank you... when i tried to populate the grid ... an unique id error showed up. For that i need to add to my code this on the UserTable getRowId={row => row.idUser} and in the DataTable component const DataTable = ({ getRowId, rows, columns, }) => { return ( );

[@theatypicaldeveloper]

hey Alexis, sorry to hear that you've encontered an issue. If you did everything like in the tutorial the code would work. If you're still having an issue you can put the whole piece to sandbox so we can have a look.

[@AlexisPizarroAbarca]

@@theatypicaldeveloper Thank you so much it works right now ...

[@zeshanshaikh0401]

Please upload next video asap

[@theatypicaldeveloper]

hey Zeshan, sorry mate but I'm not planning to do any MUI related videos now. Will come out with the new series soon. If you have any questions let me know, I'd be happy to help.