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: https://www.youtube.com/watch?v=ANZNMaBODDY&list=PLufbXXGswL_pS6rdWbDO56oiZovLWE_rs Source Code on github: https://github.com/codelikepro22/place-to-stay/tree/part_17 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