MUI Responsive Data Grid Table, sort, edit, search, filter, React Advanced component to manage users

This is the 17th part of React MERN Couch Surfing project. In this video we added the system users list to our dashboard using the advanced DataGrid component from Material UI5. It is a responsive table with lots of flexible options(Sortable, Editable, Filterable). And we added save, loading, success features to save the updated status of the user into our mongo database. Also we customised the pagination in the table as well as the spacing and the background of the rows to make our table looks prettier.
Reactjs
Material UI5
Admin Dashboard Panel
Manage users List
Advanced MUI5 DataGrid component
Nodejs
Expressjs
MongoDB
Mongoose
@MUI_hq/x-data-grid

The whole videos playlist of the project:

Source Code on github:

00:00 Introduction
01:49 Adding users table DataGrid from MUI
06:42 Adding more advanced options (renderCell) to render custom components
09:45 Customise the pagination (number of rows per page)
11:00 Customise the style of the data grid (rows gap and background)
12:47 Adding the actions column to the gridData table (Save, loading, success, icons Fab button)
19:28 Submitting the updated data to the server to save it in the database and forbid the disabled (inactive) user from login into the system

[muhammadbilalmalik]

Love for real man! you will be in the Top Channels List!! Keep up the good work!!

[raymondcaddick]

Dude you're a hero! You deserve more subs! Wish you luck

[drnageswaragaliveedu]

Ayyyy Thanks for helping get to know the Software! I just downloaded it in hopes of making resetupes and originals. Props to you for

[mahadevdhoble]

Likes your functionality and the method of coding make sure to do some more tutorials ❣️❣️

[gppwjeo]

heyo, nice tutorial!
I'm wondering whether is there a nice way to have the save actions button along with confirmation in Modal? Also I can't figure out a nice way to display an error message in nice way in the datagrid with cell values validation

[lrobertj]

is there any way to implemet features like colum resizing row grouping only using DataGrid? I know these functionalities are available just for pro and premium versions. My question is if it is possible to extend this to the free open version?

[mohammedabujayyab]

Thanks! But how to handle adding a new row ? It is very important!!

[amalalabed]

I have so many columns in the datagrid but it's not taking the width of its container "100%" its taking extra width, any suggestions?

[symphony]

Thanks bro.. i really not feeling motivated to read another doc on a table grid of yet another ui library.. i'll just watch this instead..

[balakiswe]

Hello, how can we make dropdown select pop-up with dark background? By default mui is providing white background.

[maquibarrios]

Very useful! Thanks. I am getting the 'avatar' in base64, do you know how to transform it to image format? It would be in the same column field as 'Avatar'

[AlexSmith-msxb]

Hello! Your tutorial is very usefull, thanks. But I have a question: let's assume that I want to add a "more actions" column where I add an iconbutton and when I click on it, a menu with more options opens. how do I make this iconbutton activate when I click on a row, and the save button in the actions column activate only when I change something in the roles column?

[_mrch]

Hi, great tutorial! I am trying to get the entire functionality of the table you used here but I am only pulling the data to be added from a hardcoded array of objects, do I still need the ContextProvider.js? Aside from this file what else do I need/don't need?

Basically I already have a simple table, I just want to add the functionality of this specific table on my React application (I didn't watch the other videos as I only need this table)

[muhammadbilalmalik]

I think we should use value formatter for createdAt instead of renderCell as we have to modify value not have to return element?

[sulmanahmad]

Make a complete video on advance Filters mui data grid.

[AlanLimaMarques]

is there any way to hide permanently a column ? i wanna hide the ID from the user

[katongoleisaac]

Thanks for the video, but I have notice an issue, for instance if we try to edit one row[firstRow] and we do not commit the changes for that row, and still we edit another row[secondRow], the save button on the [firstRow] will become disabled therefore ignoring, to save changes for that row, and still if we try to edit another row [thirdRow], changes for the [secondRow] will be lost too, like that

[Cysecsg]

What if server return error? How to revert change?

[ugochukwuanajemba]

Can this be implemented with shadcn ui using tangstack table?

[isaacjon]

Hey bro just discovered you. I have a question. How can i become a pro like you. Do you have any courses to recommend?