Styled Table Container - Copy this React, Mui Component to your project

Const [rows, setRows] = useState([ { id: 1, UserTypeId: 2, UserName: 'raymon', FirstName: 'ray', LastName: 'jr', Phone: '6385540443', Mail: 'rayjr@gmail.com', CreatedBy: 1, CreatedDate: '2024 10 14 12:34:55.017', UpdateBy: 1, UpdatedDate: '2024 10 14 12:34:55.017', Status: 1 }, { id: 2, UserTypeId: 1, UserName: 'leo', FirstName: 'Lionel', LastName: 'Messi', Phone: '9842148737', Mail: 'leo@10gmail.com', CreatedBy: 2, CreatedDate: '2024 10 17 13:03:13.463', UpdateBy: 2, UpdatedDate: '2024 10 17 13:03:13.463', Status: 0 }, { id: 3, UserTypeId: 2, UserName: 'Test user', FirstName: 'Test', LastName: 'user', Phone: '1234567890', Mail: 'test@gmail.com', CreatedBy: 3, CreatedDate: '2024 11 12 17:42:05.987', UpdateBy: 3, UpdatedDate: '2024 11 12 17:42:05.987', Status: 1 }, ]); const columns = [ { field: 'UserTypeId', headerName: 'User Type', width: 150, valueFormatter: (params) => params.value === 1 ? 'Admin' : 'User' }, { field: 'UserName', headerName: 'User Name', width: 150 }, { field: 'Mail', headerName: 'Mail', width: 200 }, { field: 'Phone', headerName: 'Phone', width: 150 }, { field: 'CreatedDate', headerName: 'Created Date', width: 200, valueFormatter: (params) => new Date(params.value).toLocaleString() }, { field: 'Status', headerName: 'Status', width: 150, valueFormatter: (params) => params === 1 ? 'Active' : 'Inactive' }, { field: 'actions', headerName: 'Actions', width: 150, renderCell: (params) => ( <Button variant="outlined" onClick={() => handleEditClick(params.row)}> Edit </Button> ), }, ];