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:
React MERN Project  with Node, Expres...

Source Code on github:
https://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