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

Подписаться 2,9 тыс.

Просмотров 115 тыс.

50% 1

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:
• React MERN Project wi...
Source Code on github:
github.com/codelikepro22/plac...
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

Опубликовано:

5 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

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

@muhammadbilalmalik7292 2 года назад

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

@CodeLikePro22 2 года назад

Thanks a lot bro❤

@drnageswaragaliveedu2089 Год назад

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

@raymondcaddick6208 Год назад

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

@CodeLikePro22 Год назад

Thanks bro🙂❤

@mahadevdhoble3855 Год назад

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

@CodeLikePro22 Год назад

Thanks a lot my friend.

@juandaniel6726 Год назад

Great tutorial. Thank u so much Sir!

@CodeLikePro22 Год назад

You are very welcome my friend❤

@user-mq1ym6fc9r Месяц назад

exactly what I was looking for :D

@user-uj3ko9iz3n 4 месяца назад

very useful brother , thank you

@symphony86 10 месяцев назад

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

@user-gp6pw9je8o Год назад

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

@mohammedabujayyab6146 Год назад

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

@smartjefreycoca5425 2 года назад

Hope you make more videos about MUI

@CodeLikePro22 2 года назад

Definitely we will do. Thanks my friend

@arikmosfor4907 Год назад

amazing

@CodeLikePro22 Год назад

Thanks a lot my friend♥

@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?

@amalalabed4060 Год назад

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?

@balakiswe 7 месяцев назад

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

@sulmanahmad6943 5 месяцев назад

Make a complete video on advance Filters mui data grid.

@fahiyangtech Год назад

Thx

@fahiyangtech Год назад

Data grid version , please🙏

@Cysecsg Год назад

What if server return error? How to revert change?

@muhammadbilalmalik7292 2 года назад

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

@CodeLikePro22 2 года назад

We can use that as well. Thanks for this smart idea

@AlexSmith-ms9xb Год назад

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?

@CodeLikePro22 Год назад

You can try onRowClick function. Check all the functions and props of DataGrid on this link: mui.com/x/api/data-grid/data-grid/

@_m4rch Год назад

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)

@CodeLikePro22 Год назад

You need a state for this array to control the changes if you need to edit your data in the grid

@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'

@CodeLikePro22 Год назад

It is supposed to work automatically. Just assign it to the src of the Avatar. If it doesn't work send me your github repo link on : codelikepro22@gmail.com

@AlanLimaMarques Год назад

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

@katongoleisaac2007 Год назад

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

@CodeLikePro22 Год назад

In this case you need another strategy. If you want the user to be able to leave the changed row to another one before saving, you need to change the state of active rowId to be an array and to push the rows ids to this array and check if the id is in this array to activate the save button, but also you need to manage this array when you save to make sure that you removed that row id from this array 🤔

@marcelos1lva Год назад

Hello goodnight. I need to insert two "increment/decrement" buttons in my quantity column, but I don't know how to do it. The way I did using renderCell, it just superficially changes the field and doesn't send the changed value to the server. Thanks for the videos! Helped me a lot!

@CodeLikePro22 Год назад

if you use the built-in type:'number' in the field of quantity the changes will be tracked automatically by dataGrid and it also contains automatically increase and decrease arrows. But if you need to use renderCell, you need state to track changes of this field and when you send it to the server you need to send the state not the value in dataGrid row

@marcelos1lva Год назад

@@CodeLikePro22 a simple useState for this? Tanks for you response.

@CodeLikePro22 Год назад

@@marcelos1lva yes exactly

@marcelos1lva Год назад

@@CodeLikePro22 I'm not able to implement the increment/decrement component at all. Could you send an example through codesandbox? I'm only able to store in my state the value of just one line🙌

@CodeLikePro22 Год назад

@@marcelos1lva Can you send me your repo on github so I can check it out and try to help: codelikepro22@gmail.com

@dr.maninderjitkaur7805 Год назад

he softs good and attracted more

@ugochukwuanajemba3117 3 месяца назад

Can this be implemented with shadcn ui using tangstack table?

@cyberstarcritic Год назад

How to memoized Datagrid

@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?

@aaroonplay1993 Год назад

Hi, for some reason onCellEditCommit doesn't work, have some idea why? row.id} rowHeight={120} pageSize={10} rowsPerPageOptions={[10, 20]} editMode='row' onCellEditStart={(params, event, details) => { //this work debugger }} onCellEditCommit={(params, event, details) => { //no work debugger }} onEditRowsModelChange={(params, event, details) => { //this work debugger }} onRowEditStop={(params, event, details) => { //this work debugger }} /> thanks

@CodeLikePro22 Год назад

Can you send me the link of the whole code on: codelikepro22@gmail.com

@adi29raj Год назад

Awesome video man, where do you work?

@CodeLikePro22 Год назад

Thanks bro❤

@cyberstarcritic Год назад

Usememo doesnt work for me

@arroyomariaagustina1204 19 дней назад

Hello! I was following your video to the letter because I am very interested in the design you achieved, but the mapping of the rows per page does not work for me. I did it as is and yet nothing is modified, it continues to show me the big numbers

@CodeLikePro22 16 дней назад

If you are still facing the problem, I need to check your code. You can contact me on: codelikepro22@gmail.com

@ABUTAHER-wg7gz Год назад

is it possible to get without custom funtction all selected rows value

@CodeLikePro22 Год назад

You can check this link, I think it is the same case: stackoverflow.com/questions/64419767/get-the-selected-values-in-a-datagrid-with-material-ui

@AlexisPizarroAbarca 2 года назад

hi awesome video... my code dont recognize renderCell as a function on my component??

@CodeLikePro22 2 года назад

Do you have your code on github, so I can have a look? And don't forgot to install the package @mui/x-data-grid'

@justforfun0017 Год назад

Can any tell me how to sort alpha numeric value in mui grid table (eg : 123 test, 12 test)

@CodeLikePro22 Год назад

The builtin sortable feature does not work in this kind of sorting?

@justforfun0017 Год назад

@@CodeLikePro22 is there any way to archive that?

@CodeLikePro22 Год назад

@@justforfun0017 sorting feature is automatically added to the fields when you use MUI DataGrid

@henriquembotelho 2 года назад

Good project. Do you like typescript?

@CodeLikePro22 2 года назад

Thanks my friend. We can use typescript in another upcoming projects

@pedromanuelcamargomendez6520 2 года назад

@@CodeLikePro22 please, good idea complete.

@lekbejo17 Год назад

do you know how to auto increment column values?

@CodeLikePro22 Год назад

Sorry, I didn't understand the question. Can you give an example?

@ehsaannadeem6048 2 года назад

I am trying to use the dropdown menu just like you did for roles but i can't. It compiles all good but when i go and double click to open drop down , it doesn't open infact it open empty grid and says "An error occurred." Can you help me ?

@ehsaannadeem6048 2 года назад

{ field:"status" , headerName:"Status" ,width:170, type:'singleSelect', valueOption: ['Active','Passive','Pending'], editable: true, renderCell: (params) => { return( {params.row.status} ) } },

@CodeLikePro22 2 года назад

@@ehsaannadeem6048 You forgot the s in valueOptions

@ehsaannadeem6048 2 года назад

@@CodeLikePro22 thank you so much . I literally tried on 3 PC's and did the same mistake with all of them. You are the best

@phamquoc3449 Год назад

Hi bro, I have question How to get list values filterd?

@CodeLikePro22 Год назад

Maybe you can use Autocomplete component from MUI like this one on selecting countries: mui.com/material-ui/react-autocomplete/

@fadelyaya3873 2 года назад

Thank you for the project. I really love the fact that you use beginner and advance methodes of MUI v5. But I do have some issues when I launch npm start on the server side. Here is the error I got : import { OAuth2Client } from 'google-auth-library'; ^^^^^^^^^^^^ SyntaxError: The requested module 'google-auth-library' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export. For example: import pkg from 'google-auth-library'; const { OAuth2Client } = pkg; PLEASE HELP ME FIGURE IT OUT. THANKS A BOUNCH

@CodeLikePro22 2 года назад

Have you added "type": "module" to your package.json file in the server side?

@CodeLikePro22 2 года назад

if you did already try to change the import way of google-auth-library from directly extracting {OAuth2Client} to import googleAuth from 'google-auth-library' then extract {OAuth2Client} = googleAuth

@fadelyaya3873 2 года назад

@@CodeLikePro22 Yes already done

@fadelyaya3873 2 года назад

@@CodeLikePro22 Okay I will try to change the import way

@fadelyaya3873 2 года назад

Thank you for the response

@harikrishnalakkoju4588 2 года назад

Hi Sir, Thanks for the vedio, Can you help me that where I have to place .env .both client and server, please add it in readme Please make a small vedio on how to .env and variable in .env and how to connect mongodb and how to run on local.

@fadelyaya3873 2 года назад

Just insert them in the client and server folder respectively. Exactly where you have the json packages

@harikrishnalakkoju4588 2 года назад

I added .env sir ,still not able to get . getting error failed to fetch .

@CodeLikePro22 2 года назад

@@harikrishnalakkoju4588 you can follow the project from the beginning. We added everything from scratch step by step: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-n_9DI-AqYN8.html

@harikrishnalakkoju4588 2 года назад

In url what i have to pass sir

@CodeLikePro22 2 года назад

We build already server side with link localhost:5000 and we added that to environment variable. If you want you can watch the whole playlist of the project from scratch on this link: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ANZNMaBODDY.html