update pading and pagination on Manage Members

src/pages/members/manage-members/ManageMembers.tsx

@@ -7,7 +7,7 @@ import axios from 'axios';
 import DetailMember from './blocks/DetailMember';
 import ConfirmDialog from '@/components/confirm';
 import { useAuthContext } from '@/auth';
-import { DataGridInner, LoaderTransparant } from '@/components';
+import { Container, DataGridInner, LoaderTransparant } from '@/components';
 import { DataGridProvider } from '@/components';
 import { toast } from 'sonner';
 import { Breadcrumbs, Link } from '@mui/material';
@@ -188,8 +188,7 @@ const ManageMembers = () => {
       <Helmet>
         <title>TPAY | Manage Members</title>
       </Helmet>
-      <div>
-        <div className="container mx-auto w-full">
+      <Container>
         <ConfirmDialog
           open={dialogOpen}
           onClose={() => setDialogOpen(false)}
@@ -212,10 +211,7 @@ const ManageMembers = () => {
         ) : (
           ''
         )}
-          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">
-            Manage Members
-          </h1>
-          <div className="grid gap-5 lg:gap-7.5 mx-8 w-auto">
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Manage Members</h1>
         <Breadcrumbs>
           <Link underline="none" color="inherit" href="/">
             <span className="text-sm hover:underline">Dashboard</span>
@@ -228,27 +224,23 @@ const ManageMembers = () => {
             <span className="text-sm">Manage Members</span>
           </Link>
         </Breadcrumbs>
-          </div>
-          <div className="w-full overflow-x-auto px-4">
-            <div className="min-w-[800px]">
+        {/* <div className="w-full overflow-x-auto px-4"> */}
+        <div className="grid gap-5 lg:gap-7.5 mt-5">
           <DataGridProvider
             data={members}
+            pagination={{ size: 25 }}
             columns={getColumns(handleUpdate)}
             layout={{ card: true }}
             serverSide={false}
-                toolbar={
-                  <ListToolbar createMember={createMember} />
-                }
+            toolbar={<ListToolbar createMember={createMember} />}
             onRowSelectionChange={(selected, table: any) => {
               const selectedRow = table.getSelectedRowModel().rows[0];
               if (selectedRow) handleUpdate(selectedRow.original);
             }}
-              >
-              </DataGridProvider>
-            </div>
-          </div>
-        </div>
+          ></DataGridProvider>
         </div>
+        {/* </div> */}
+      </Container>
     </>
   );
 };