update pading and pagination on Manage Members

This commit is contained in:
Wikzyy
2025-04-15 19:36:35 +07:00
parent a247afdea3
commit f71b203eb7

View File

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